WPF use ttf icon font

WPF use ttf icon font

---

---

1. What is an icon

Pack vector graphics into fonts, and use them in the same way as we use fonts. You can freely set the size and color of icons. Compared with traditional pictures, the advantages are still obvious:

1. Small size, fast loading speed, high performance
2. Vector (free scaling, no distortion)
3. Flexibility (icon color can be changed via code)

Just because it is the same as the font, it also has some disadvantages:

1. It is difficult to be compatible with the previous design, and the replacement workload is heavy
2. It is difficult to fit the designer's design draft, and the cost of coordination and communication is slightly higher

---

2. Commonly used icon fonts

The first recommendation is the Alibaba vector icon library . There are many schemes in this library, and there are also many sets of icons. You can try more.

The second is the Font Awesome icon , which is divided into the old version and the new version (V5 version or Pro version). The old version is free and has fewer icons.

Microsoft currently provides two sets, one is the Segoe MDL2 Assets icon for Windows 10 , and the other is the Segoe Fluent icon for Windows 11 .

Google has a set of open-source icon fonts for Material Design icons , which were downloaded locally before, but Material Design icons by Google were not found .

I won’t talk about the rest, there are many icon fonts, so go and search for it yourself!

---

3. How to use icon fonts in WPF

In this example, Microsoft’s Segoe MDL2 Assets icon is used . The following figure is a partial display of the icon font on the website, in which you can see a Unicode code point , which is used to identify the current font, and will also be used to display it later Our font.

3.1 Application method in Windows 10

<TextBlock
            FontFamily="Segoe MDL2 Assets"
            FontSize="50"
            Foreground="Red"
            Text="&#xE702;" />

Among them , Text is composed of Unicode code points in the description , but you need to add &#x before the text and a semicolon after the text ;

3.2 Ways to reference font files

But this method only supports Window10 system. If it is on other systems, it will not be displayed, so we download the Segoe MDL2 Assets icon font, and copy the SegMDL2.ttf in the downloaded compressed package to our project. For the convenience of management, put Go to the newly created Fonts folder in the project:

Then select SegMDL2.ttf and change the generation operation to resource in the property bar below , so that this file will be included in our WPF program as a resource:

The way to use the icon font is the same as above, but because it is added to the WPF program in the form of an external font, the attribute value set by FontFamily is a bit particular, and it can be expressed as pack://application:,,,/项目名称空间;component/字体路径/字体文件名#字体实际名称follows. Let’s introduce one by one ( You can also refer to this rule when citing custom resource files later, but #font name is not needed, see below for details):

Project namespace: If you have not changed the project namespace privately, then your project namespace is the name of the project. My project name here is called FontWindow, so the project namespace is also the same. If you don’t know what your project namespace is, you can open it Your XAML file, such as in the project App.xaml, can see the properties in the xaml file x:Class, or the background class namespace:

font path/file name: the font file is placed Fontsin the folder here, so my font path and file name Fonts/SegMDL2.ttf, file name There is a vignette here, the file name shown in the properties should be used:

The actual name of the font: the actual name of the font requires us to double-click to open the font, and then we can see it ( don’t open it in VS, otherwise you will see bytecode, select the file in the windows folder and double-click to open ), SegMDL2.ttfthe actual name here is Segoe MDL2 Assets:

So FontFamilyit should be set topack://application:,,,/WPF_Blog_Test;component/Fonts/SegMDL2.ttf#Segoe MDL2 Assets

<TextBlock
            FontFamily="pack://application:,,,/FontWindow;component/Fonts/SegMDL2.ttf#Segoe MDL2 Assets"
            FontSize="50"
            Foreground="Red"
            Text="&#xE702;" />

​ PS: In order not to write such a long FontFamily every time , you can consider writing it in the resource and then quoting it, or defining a TextBlock icon font style (a little bit more), you can skip it if you already know the resource definition.

3.3 Custom resources

Create a new folder Styles , and create a new resource file IconFonts under this folder (right-click Styles, select Add Resource Dictionary). Both ways are written in the file IconFonts

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <FontFamily x:Key="SegIconFont">
        pack://application:,,,/FontWindow;component/Fonts/SegMDL2.ttf#Segoe MDL2 Assets
    </FontFamily>

    <Style x:Key="tbSegIconFontKey" TargetType="{x:Type TextBlock}">
        <Setter Property="FontFamily" Value="pack://application:,,,/FontWindow;component/Fonts/SegMDL2.ttf#Segoe MDL2 Assets" />
        <Setter Property="Foreground" Value="Red" />
        <Setter Property="FontSize" Value="50" />
    </Style>
</ResourceDictionary>

At this time, only a resource dictionary named IconFonts has been added , and it needs to be introduced into the project before it can be used in the interface. Therefore, a reference statement needs to be added to the App.xaml file, which tells the program that the newly created resource dictionary needs to be included. , the statement is <ResourceDictionary Source="pack://application:,,,/FontWindow;component/Styles/IconFonts.xaml" />, the namespace and resource path rules have been expressed above, add an App.xaml:

<Window
    x:Class="FontWindow.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:local="clr-namespace:FontWindow"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    Title="MainWindow"
    Width="800"
    Height="450"
    mc:Ignorable="d">
    <Grid>
        <StackPanel Orientation="Horizontal">
            <!--  win10系统直接使用  -->
            <TextBlock
                FontFamily="Segoe MDL2 Assets"
                FontSize="180"
                Foreground="Blue"
                Text="&#xE702;" />

            <!--  最原始方式  -->
            <TextBlock
                FontFamily="pack://application:,,,/FontWindow;component/Fonts/SegMDL2.ttf#Segoe MDL2 Assets"
                FontSize="180"
                Foreground="DarkBlue"
                Text="&#xE702;" />

            <!--  定义FontFamily资源  -->
            <TextBlock
                FontFamily="{StaticResource SegIconFont}"
                FontSize="180"
                Foreground="Black"
                Text="&#xE702;" />

            <!--  定义TextBlock Style样式  -->
            <TextBlock
                FontSize="180"
                Foreground="GreenYellow"
                Style="{ 
         StaticResource tbSegIconFontKey}"
                Text="&#xE702;" />
        </StackPanel>
    </Grid>
</Window>

renderings

3.4 Use in C# code

TextBlock textBlock = new TextBlock();
textBlock.FontFamily = new FontFamily(new Uri("pack://application:,,,/Fonts/iconfont.ttf"), "#iconfont");
textBlock.Text = "\ue670";

Precautions

Write in the icon content part of the xmal codetext = ""

And in C# code writetext = "\ue670"

This is the end, I hope the logic is clear, thank you for watching!

Reference link: https://www.cnblogs.com/choumengqizhigou/p/15550133.html

back to the top

---