logo标签列表

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

c#wpfxamlfontsfont-awesome
16

我正在使用 Font Awesome 的图标在我的 C# WPF 应用程序中渲染基本字体图像。运行时，当我尝试更改 TextBlock 以显示不同的字体图标时，Unicode 表示而不是字体图标会显示出来。

我创建了一个示例应用程序来展示这个问题。当单击任一按钮时，它会使用相应图标的 Unicode 替换 TextBlock 的 Text 属性。在项目中有一个资源文件夹，其中包含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

那么，实质上，我如何更改图标但仍然显示一个图标 - 而不是 Unicode？

提前感谢。

你需要这段代码。它可以帮助你避免手动输入Unicode：https://github.com/fzany/Font-Awesome-Cheat-Charp - Olorunfemi Davis
3个回答
30

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

Font Awesome的NuGet包

如果您要使用图标导入，请在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;
3
这是一种非常好的方法，使得使用fontawesome变得方便。 - LuckyLikey
1
对于相同的XAML，我不得不使用以下代码： (btnButton.Content as ImageAwesome).Icon = FontAwesomeIcon.LongArrowRight; - Matt
非常感谢，这些步骤非常有帮助。其他所有帖子都忽略了一个重要的点，即“如果您将使用图标导入，请在XAML代码中遵循命名空间：”，否则您的标记将无法构建/编译。 - OverMars
@Paul，你是什么意思？这是一个图标字体。 - H. Pauwelyn
@paul：确实是一个XAML控件。但在Nuget的代码后台中，它可能使用了“Image”控件。使用FontAwesome XAML控件也更加容易。 - H. Pauwelyn
显示剩余2条评论
21

更新

我发现了一个关于这个主题的不同帖子--在wpf中添加图标字体，我认为这应该更符合您的需求。

确保您的字体已经被添加为资源。然后使用以下字符串：

<Setter Property="TextElement.FontFamily" Value="pack://application:,,,/fonts/#FontAwesome" />
在上述字符串中，我假设字体的名称（而不是字体的文件名）为FontAwesome。
您只需要：
  1. 将字体添加到您的项目中，比如将它们放在一个名为“fonts”的文件夹中
  2. 将构建操作更改为资源（而不是嵌入式资源）
  3. 添加样式以设置字体族，并像上面的代码片段一样设置 TextBlock.Text 为您喜欢的图标，并将样式应用于TextBlock。

如果要通过更新 TextBlock.Text 属性更改图标，应使用支持的Unicode字符串设置 Text 属性。

尝试这样做：

 tblkFontIcon.Text = "\uf000";

而不是

tblkFontIcon.Text = "&#xf000;";

如果您正在使用使用字体图标的代码，则可能错过了该文章中的“如何工作”部分。 您应该使用该标记扩展，而不是使用TextBlock.Text属性。

在他的示例代码中：

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

请注意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 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;
}
首先，感谢您的快速回复！您提供的更新是我目前在我的WPF应用程序中使用字体的方式。正如问题所述，它目前可以工作，但是当我更改文本属性时，即使我将其更改为相同的Unicode，它仍会显示Unicode。我试图包含这些图像，但没有足够的“街头信用”。至于使用字体图标部分，我无法弄清楚如何在运行时使用它来更改图标，因为我的需求需要。我可以在设计/构建时间内让它工作。 - Gareth
我认为你应该使用Unicode字符串来设置文本，而不是使用“”。 - terry
我已经更新了代码，你可以按照那个代码来将你的TextBlock.Text更改为另一个Unicode字符串，那应该能正常工作。 - terry
2
因为 "" 是 XAML 的 "version" Unicode，XAML 解析器将其转换为相应的 Unicode 字符串，即在 C# 中为 "\uf000"，并将其设置为 tblkFontIcon.Text。 - terry
1

简单易懂：

您应该在系统上安装fontawesome字体，并按以下方式使用它

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

如何组合图标，{&#x}{FontAwesome图标代码}，例如&#xf2b9代表地址簿

要查找代码列表，请转到FontAwesome或astronaut web

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接