本章讲述问题:WPF 使用.ttf文件中的图标失败,变成白框问题。
在WPF开发过程中,我们需要使用.ttf文件中的图标和文字,但是经常会遇到类似问题:WPF 在XMAL里增加图标字体时没办法实时显示出来只显示一个小方框,影响我们观察实际效果,但运行后界面显示却是正常的。
我们先看一下效果图
非正常的界面如下:
显示正常的界面如下:
**************************************************************************************************************
本示例中,WPF查看和使用.ttf文件中的字体和图标步骤如下:
一、在项目中添加字体图标文件的使用,层次结构如下图
二、设置.ttf文件属性,生成操作设置为资源(Resource)类型
三:在项目App.xaml中,添加字体文件的引用,代码如下:
<Application.Resources><FontFamily x:Key="iconfont">Resources/Fonts/#iconfont</FontFamily><FontFamily x:Key="bl">Resources/Fonts/#Bahnschrift Light</FontFamily>
</Application.Resources>
四:使用文件字体样式引用示例:
<Style TargetType="Button" x:Key="MenuButtonStyle"><Setter Property="VerticalAlignment" Value="Bottom"/><Setter Property="Template"><Setter.Value><ControlTemplate TargetType="Button"><Grid Background="Transparent"><Grid.RowDefinitions><RowDefinition/><RowDefinition Height="22"/></Grid.RowDefinitions><TextBlock Text="{TemplateBinding Tag}"VerticalAlignment="Center" HorizontalAlignment="Center"FontFamily="{StaticResource iconfont}" FontSize="26"Margin="0,5" Foreground="#4F4644"/><TextBlock Text="{TemplateBinding Content}" Grid.Row="1" HorizontalAlignment="Center" FontSize="11"Foreground="#664F4644"/></Grid></ControlTemplate></Setter.Value></Setter>
</Style><Button Content="首页" Grid.Column="1" Style="{StaticResource MenuButtonStyle}"Tag="" CommandParameter="FirstView">
</Button>
代码编写完后,发现图标显示不出来但是运行时,显示正常。
**************************************************************************************************************
我们从一下两个方面排查:
(1)引用图标的路径对不对。如果路径不对,你程序运行的时候,也不会显示图标。
(2)创建的项目中有没有中文字,或者标识符。
(3)引用资源的类型不正确。
排查上述三点都是符合的,这就不经思考起来,难道引用的路径还是存在问题?
于是乎,就修改了一下资源的引用声明
专门使用Pack Uri:
<Application.Resources><FontFamily x:Key="iconfont">pack://application:,,,/WPFControlStyle;component/Resources/Fonts/#iconfont</FontFamily><FontFamily x:Key="bl">pack://application:,,,/WPFControlStyle;component/Resources/Fonts/#Bahnschrift Light</FontFamily>
</Application.Resources>
或
<Application.Resources><FontFamily x:Key="iconfont">/WPFControlStyle;component/Resources/Fonts/#iconfont</FontFamily><FontFamily x:Key="bl">/WPFControlStyle;component/Resources/Fonts/#Bahnschrift Light</FontFamily>
</Application.Resources>
或 使用相对路径,前导有“/”
在其他情况下,文件未声明为内容类型(例如,必须作为资源嵌入到程序集中的图像,或者必须从网络加载的文件)涉及语法变化,这里是资源类型,使用“Resources/Fonts/#iconfont”是不合适的,故在xaml设计界面上不显示图标。
<Application.Resources><FontFamily x:Key="iconfont">/Resources/Fonts/#iconfont</FontFamily><FontFamily x:Key="bl">/Resources/Fonts/#Bahnschrift Light</FontFamily>
</Application.Resources>
修改之后,在xaml设计界面图标显示就正常了。
在此做个笔记,以防后面遇到同样的问题,一时想不到原因和解决方法。
**************************************************************************************************************