使用Font Awesome更改WPF中的字体图标

时间:2014-04-16 11:30:12

标签: c# wpf xaml fonts font-awesome

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

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

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

代码隐藏:

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

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

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

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

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>

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

所以从本质上讲,我如何更改Icon但是有一个Icon显示 - 而不是Unicode?

提前致谢。

3 个答案:

答案 0 :(得分:26)

Font Awesome包含名为 FontAwesome.UWP FontAwesome.WPF 的NuGet包。只需下载其中一个。

NuGet Packages for Font Awesome

如果您将使用图标导入跟随命名空间到您的XAML代码中:

xmlns:fa="http://schemas.fontawesome.io/icons/"

将它用于您的按钮,如下所示:

<Button x:Name="btnButton">
    <Button.Content>
        <fa:ImageAwesome Icon="LongArrowLeft"/>
    </Button.Content>
</Button>

最后在你的C#代码背后:

using FontAwesome.WPF; // on the top of the code
btnButton.Content = FontAwesomeIcon.LongArrowRight;

答案 1 :(得分:19)

更新

我发现了这个主题的不同帖子 - Add Icon font in wpf 我认为这应该更适合你想要的东西。

  

确保将您的字体添加为资源。然后,使用以下内容   字符串:

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

在上面的字符串中,我假设字体的名称(   font&#39; s filename是FontAwesome。

你只需要:

  1. 将字体添加到您的项目中,让我们说您将它们放入文件夹&#34; fonts&#34;
  2. 将构建操作更改为资源 嵌入式资源
  3. 添加您的样式以设置字体系列,如上面的代码片段,并将TextBlock.Text设置为您喜欢的图标,并将样式应用于TextBlock。
  4. 如果要通过更新TextBlock.Text属性来更改图标,则应使用支持的unicode字符串设置Text属性。

    尝试类似

    的内容
     tblkFontIcon.Text = "\uf000";
    

    而不是

    tblkFontIcon.Text = "&#xf000;";
    

    如果您正在使用Using Font Icons

    中的代码 那么你可能错过了&#34;它如何运作&#34;该帖子中的部分。 您应该使用该标记扩展,而不是使用TextBlock.Text属性。

    在他的示例代码中:

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

    注意WpfTools:ImageFromFont,它是Markup Extention,它允许xaml解析器转换

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

    ImageSource并分配到LargeImageSource属性。

    因此,在你的xaml中,你可以用TextBlock替换Image,那么它应该是这样的:

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

    如果您想更改图标,则必须自己更改ImageSource,只需按照Using Font Icons创建自己的方法,或者只是复制该教程中的以下代码。

    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;
    }
    

答案 2 :(得分:0)

简单又很简单:

您应该在系统上安装fontawesome字体,使用方式如下

<Button Content="&#xf0e4;" FontFamily="FontAwesome" FontSize="32" />

如何撰写图标,{&#x} {FontAwesome图标代码},例如&#xf2b9用于通讯簿

要找到代码列表,请转到FontAwesomeastronaut web