使用 Font Awesome 更改 WPF 中的字体图标 [英] Changing Font Icon in WPF using Font Awesome

查看：49
本文介绍了使用 Font Awesome 更改 WPF 中的字体图标的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在使用 Font Awesome 的图标在我的 C# WPF 应用程序中呈现基本字体图像.在运行时，我尝试更改 TextBlock 以显示不同的字体图标，但显示的是 Unicode 表示而不是字体图标.

我创建了一个示例应用程序来显示它.单击任一按钮时，它会将 TextBlock 的 Text 属性替换为相应图标的 unicode.项目中有一个 Resources 文件夹，其中包含 FontAwesome.ttf 字体文件作为构建资源TextBlock 的 FontFamily 属性引用了它.

这是我的示例应用程序的源代码:

代码隐藏:

命名空间 FontAwesomeTest{公共部分类 MainWindow : 窗口{公共主窗口(){初始化组件()；}私有无效 btnGlass_Click(对象发送者，RoutedEventArgs e){tblkFontIcon.Text = "";}私有无效 btnMusic_Click(对象发送者，RoutedEventArgs e){tblkFontIcon.Text = "";}私有无效 btnSearch_Click(对象发送者，RoutedEventArgs e){tblkFontIcon.Text = "";}}}

XAML:

<网格><Grid.ColumnDefinitions><ColumnDefinition Width="*"/><ColumnDefinition Width="*"/><ColumnDefinition Width="*"/></Grid.ColumnDefinitions><Grid.RowDefinitions><RowDefinition Height="50"/><RowDefinition Height="25"/><RowDefinition Height="*"/></Grid.RowDefinitions><Button Name="btnGlass" Height="35" Width="85" Click="btnGlass_Click" >Glass</Button><Button Name="btnMusic" Grid.Column="1" Height="35" Width="85" Click="btnMusic_Click">Music</Button><Button Name="btnSearch" Grid.Column="2" Width="85" Height="35" Click="btnSearch_Click">Search</Button><TextBlock Grid.Row="1" Grid.Column="0" Horizo​​ntalAlignment="Center" VerticalAlignment="Center" FontSize="18" FontFamily="../Resources/#FontAwesome">&#xf000;</TextBlock><TextBlock Grid.Row="1" Grid.Column="1" Horizo​​ntalAlignment="Center" VerticalAlignment="Center" FontSize="18" FontFamily="../Resources/#FontAwesome">&#xf001;</TextBlock><TextBlock Grid.Row="1" Grid.Column="2" Horizo​​ntalAlignment="Center" VerticalAlignment="Center" FontSize="18" FontFamily="../Resources/#FontAwesome">&#xf002;</TextBlock><TextBlock Name="tblkFontIcon" Grid.Row="2" Grid.ColumnSpan="3" FontSize="64" FontFamily="../Resources/#FontAwesome" Horizo​​ntalAlignment="Center" VerticalAlignment="Center">&#xf011;</TextBlock></网格>

我使用以下教程将 Font Awesome 合并到我的应用程序中 http://www.codeproject.com/Tips/634540/Using-Font-Icons

所以从本质上讲，如何更改图标但显示图标 - 而不是 Unicode?

提前致谢.

解决方案

UPDATE

我找到了一个关于这个主题的不同帖子——在 wpf 中添加图标字体我认为这应该更可能是您想要的.

<块引用>

确保您的字体作为资源添加.然后，使用以下字符串:

<Setter Property="TextElement.FontFamily" Value="pack://application:,,,/fonts/#FontAwesome"/>

在上面的字符串中，我假设字体的名称(不是字体的文件名)是 FontAwesome.

你只需要:

  1. 将字体添加到您的项目中，假设您将它们放入文件夹fonts"
  2. 将构建操作更改为Resource 不 嵌入式资源
  3. 添加您的样式以设置字体系列，如上面的代码片段，并将 TextBlock.Text 设置为您喜欢的图标并将样式应用到 TextBlock.

如果您想通过更新 TextBlock.Text 属性来更改图标，您应该使用支持的 unicode 字符串设置 Text 属性.

尝试类似的东西

 tblkFontIcon.Text = "uf000";

而不是

tblkFontIcon.Text = "&#xf000;";

如果您使用的是使用字体图标

那么您可能错过了该帖子中的它是如何工作的"部分.您应该使用该标记扩展，而不是使用 TextBlock.Text 属性.

在他的示例代码中:

注意WpfTools:ImageFromFont，它是标记扩展，它允许xaml解析器转换

{WpfTools:ImageFromFont Text=&#xf01a;,FontFamily=/RibbonFontIconSample;component/Resources/#FontAwesome, Brush=Brown}

到 ImageSource 并分配给 LargeImageSource 属性.

所以在你的 xaml 中，你可以用一个 Image 替换 TextBlock，那么它应该是这样的:

<Image Source="{WpfTools:ImageFromFont Text=&#xf000;,FontFamily=/RibbonFontIconSample;component/Resources/#FontAwesome, Brush=Brown}"/>

如果要更改图标，则必须自己更改ImageSource，只需按照使用字体图标 创建您自己的方法，或者简单地从该教程中复制以下代码.

private static ImageSource CreateGlyph(string text,FontFamily fontFamily, FontStyle fontStyle, FontWeight fontWeight,FontStretch fontStretch, Brush foreBrush){if (fontFamily != null && !String.IsNullOrEmpty(text)){字体 typeface = new Typeface(fontFamily, fontStyle, fontWeight, fontStretch);GlyphTypeface glyphTypeface;if (!typeface.TryGetGlyphTypeface(out glyphTypeface))throw new InvalidOperationException("未找到字形");ushort[] glyphIndexes = new ushort[text.Length];double[] AdvanceWidths = new double[text.Length];for (int n = 0; n

I am making use of Font Awesome's icons to render basic font images within my C# WPF application. During run-time when I attempt to alter the TextBlock to display a different font icon but the unicode representation is displayed instead of the font icon.

I have created a sample application to display this. When either of the buttons are clicked, it replaces the TextBlock's Text property with the unicode for the respective icon. There is a Resources folder in the project which has the FontAwesome.ttf font file as a Build Resource which the The TextBlock's FontFamily property references.

Here's my sample application's source code:

Code-Behind:

namespace FontAwesomeTest
{
public partial class MainWindow : Window
{
    public MainWindow()
    {
        InitializeComponent();
    }

    private void btnGlass_Click(object sender, RoutedEventArgs e)
    {
        tblkFontIcon.Text = "&#xf000;";            
    }

    private void btnMusic_Click(object sender, RoutedEventArgs e)
    {
        tblkFontIcon.Text = "&#xf001;";
    }

    private void btnSearch_Click(object sender, RoutedEventArgs e)
    {
        tblkFontIcon.Text = "&#xf002;";
    }        
}
}

XAML:

<Window x:Class="FontAwesomeTest.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Font Awesome Test Window" Height="300" Width="330" Name="FontAwesomeTestWindow">
<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="*"/>
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition Height="50"/>
        <RowDefinition Height="25"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>
    <Button Name="btnGlass" Height="35" Width="85" Click="btnGlass_Click" >Glass</Button>
    <Button Name="btnMusic" Grid.Column="1" Height="35" Width="85" Click="btnMusic_Click">Music</Button>
    <Button Name="btnSearch" Grid.Column="2" Width="85" Height="35"  Click="btnSearch_Click">Search</Button>
    <TextBlock Grid.Row="1" Grid.Column="0" HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="18" FontFamily="../Resources/#FontAwesome">&#xf000;</TextBlock>
    <TextBlock Grid.Row="1" Grid.Column="1" HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="18" FontFamily="../Resources/#FontAwesome">&#xf001;</TextBlock>
    <TextBlock Grid.Row="1" Grid.Column="2" HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="18" FontFamily="../Resources/#FontAwesome">&#xf002;</TextBlock>
    <TextBlock Name="tblkFontIcon" Grid.Row="2" Grid.ColumnSpan="3" FontSize="64" FontFamily="../Resources/#FontAwesome" HorizontalAlignment="Center" VerticalAlignment="Center">&#xf011;</TextBlock>
</Grid>

I used the following tutorial to incorporate Font Awesome into my application http://www.codeproject.com/Tips/634540/Using-Font-Icons

So in essence, how can I change the Icon but have an Icon display - not Unicode?

Thanks in advance.

解决方案

UPDATE

I found a different post for this topic -- Add Icon font in wpf I think this should be more likely to what you want.

Make sure your font is added as a resource. Then, use the following string:

<Setter Property="TextElement.FontFamily" Value="pack://application:,,,/fonts/#FontAwesome" />

In the string above, I'm assuming that the font's name (not the font's filename) is FontAwesome.

You just need to:

  1. Add the Font to your project, let's say you put them in to a folder "fonts"
  2. Change the Build Action to Resource not Embedded Resource
  3. Add your style to set the font family like the code snip above, and set the TextBlock.Text to the icon you like and apply the style to the TextBlock.

If you want change the icon by updating the TextBlock.Text property, you should set the Text property with the supported unicode string.

Try something like 

 tblkFontIcon.Text = "uf000";

rather than

tblkFontIcon.Text = "&#xf000;";

If your're using the code from Using Font Icons

then you probably missed the "How It Works" section in that post. You should use that markup extension, rather than using the TextBlock.Text property.

In his sample code:

<RibbonButton Label="Import data" 
  LargeImageSource="{WpfTools:ImageFromFont Text=&#xf01a;, 
  FontFamily=/RibbonFontIconSample;component/Resources/#FontAwesome, Brush=Brown}" />

pay attention to the WpfTools:ImageFromFont, it is the Markup Extention, it allows xaml parser to convert the 

{WpfTools:ImageFromFont Text=&#xf01a;, 
      FontFamily=/RibbonFontIconSample;component/Resources/#FontAwesome, Brush=Brown}

to an ImageSource and assigned to the LargeImageSource property.

So in your xaml, you could replace the TextBlock with an Image, then it should be something like:

<Image Source="{WpfTools:ImageFromFont Text=&#xf000;, 
      FontFamily=/RibbonFontIconSample;component/Resources/#FontAwesome, Brush=Brown}" />

If you want to change the Icon, you will have to change the ImageSource yourself, just follow the Using Font Icons to create your own method, or simply copy the following code from that tutorial.

private static ImageSource CreateGlyph(string text, 
        FontFamily fontFamily, FontStyle fontStyle, FontWeight fontWeight, 
        FontStretch fontStretch, Brush foreBrush)
{
    if (fontFamily != null && !String.IsNullOrEmpty(text))
    {
        Typeface typeface = new Typeface(fontFamily, fontStyle, fontWeight, fontStretch);
        GlyphTypeface glyphTypeface;
        if (!typeface.TryGetGlyphTypeface(out glyphTypeface))
                throw new InvalidOperationException("No glyphtypeface found");

        ushort[] glyphIndexes = new ushort[text.Length];
        double[] advanceWidths = new double[text.Length];
        for (int n = 0; n < text.Length; n++)
        {
            ushort glyphIndex = glyphTypeface.CharacterToGlyphMap[text[n]];
            glyphIndexes[n] = glyphIndex;
            double width = glyphTypeface.AdvanceWidths[glyphIndex] * 1.0;
            advanceWidths[n] = width;
        }

        GlyphRun gr = new GlyphRun(glyphTypeface, 0, false, 1.0, glyphIndexes,
                                    new Point(0, 0), advanceWidths, 
                                    null, null, null, null, null, null);
        GlyphRunDrawing glyphRunDrawing = new GlyphRunDrawing(foreBrush, gr);
        return new DrawingImage(glyphRunDrawing);

    }
    return null;
}

这篇关于使用 Font Awesome 更改 WPF 中的字体图标的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
C#/.NET最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆