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

查看：475 发布时间：2016/8/30 16:06:52 c# wpf xaml fonts font-awesome

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

问题描述

我正在使用的字体真棒的图标，我的C＃WPF应用程序内作出基本的字体图像。在当我尝试改变的TextBlock来显示不同的字体图标，但Unicode表示，而不显示字体图标运行时间。

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.

我创建了一个示例应用程序显示此。当按下其中一个按钮，它会替换文本块的Text属性都符合Unicode的相应图标。有一个在其中有FontAwesome.ttf（下载地址在这里，项目的资源文件夹： http://fortawesome.github.io/Font -Awesome / ）字体文件作为建设资源其中的TextBlock的财产的FontFamily引用。

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 (Download Here: http://fortawesome.github.io/Font-Awesome/) font file as a Build Resource which the The TextBlock's FontFamily property references.

下面是我的示例应用程序的源代码：

Here's my sample application's source code:

代码隐藏：

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：

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>

我用下面的教程包括字体真棒到我的应用程序 http://www.codeproject.com/Tips/634540/Using-Font-图标

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

因此，在本质上，我怎么能更改图标，但有一个显示图标 - 不是Unicode

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

先谢谢了。

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" />

在上面的字符串，我假设字体的名称（不可以在
字体的文件名）是FontAwesome

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

您只需要：

添加字体到您的项目，让我们说你把它们放在一个文件夹字体

生成操作更改为的资源的不可以 嵌入的资源的

添加您的样式设置字体系列类似上面的代码剪断，并设置 TextBlock.Text 你喜欢和样式应用到TextBlock的图标。

Add the Font to your project, let's say you put them in to a folder "fonts"
Change the Build Action to Resource not Embedded Resource
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.

如果您希望通过更新 TextBlock.Text 属性更改的图标，你应该设置与在文本属性支持unicode字符串。

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

试着这么做

 tblkFontIcon.Text = "\uf000";

而不是

rather than

tblkFontIcon.Text = "&#xf000;";

如果your're利用的使用字体图标

那么你可能错过了在该职位如何运作一节。
。您应该使用标记扩展，而不是使用TextBlock.Text属性。

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.

在他的示例代码：

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

注意 WpfTools：ImageFromFont ，它是标记延伸，它允许XAML分析器转换在

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}

到的ImageSource 并分配到 LargeImageSource 属性。

因此，在XAML中，你可以替换的TextBlock 与的图像，那么就应该是这样的：


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}" />

如果您想更改图标，你将不得不修改的ImageSource 自己，只要按照使用字体图标来创建自己的方法，或者干脆下面的代码从该教程复制。
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;
}


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


                    
                        查看全文

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

问题描述

推荐答案

UPDATE

如果your're利用的使用字体图标

If your're using the code from Using Font Icons

相关文章

C#/.NET最新文章

热门教程

热门工具

登录关闭

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

问题描述

推荐答案

UPDATE

如果your're利用的使用字体图标

If your're using the code from Using Font Icons

相关文章

C#/.NET最新文章

热门教程

热门工具

登录 关闭

登录关闭