web-dev-qa-db-ja.com

Font Awesomeを使用したWPFのフォントアイコンの変更

Font Awesomeのアイコンを使用して、C＃WPFアプリケーション内で基本的なフォントイメージをレンダリングしています。実行時にTextBlockを変更して別のフォントアイコンを表示しようとしたが、フォントアイコンの代わりにUnicode表現が表示された。

これを表示するサンプルアプリケーションを作成しました。いずれかのボタンをクリックすると、TextBlockのTextプロパティがそれぞれのアイコンのUnicodeに置き換えられます。 FontAwesome.ttf フォントファイルが、TextBlockのFontFamilyプロパティが参照するビルドリソースとして含まれているプロジェクトには、Resourcesフォルダーがあります。

これが私のサンプルアプリケーションのソースコードです。

分離コード：

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ではなくアイコン表示を使用できますか？

前もって感謝します。

c#wpfxamlfontsfont-awesome
15
Gareth

更新

このトピックの別の投稿を見つけました- wpf にアイコンフォントを追加しますこれはあなたが望むものになりそうです。

フォントがリソースとして追加されていることを確認してください。次に、次の文字列を使用します。

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

上記の文字列では、フォントの名前（ではないフォントのファイル名）がFontAwesomeであると想定しています。

あなたがする必要があるのは：

  1. フォントをプロジェクトに追加します。たとえば、「フォント」フォルダに配置するとします。
  2. ビルドアクションをResourcenotEmbedded Resource
  3. 上記のコードスニップのようにフォントファミリーを設定するためにスタイルを追加し、TextBlock.Textを好みのアイコンに設定して、スタイルをTextBlockに適用します。

TextBlock.Textプロパティを更新してアイコンを変更する場合は、TextプロパティにサポートされているUnicode文字列を設定する必要があります。

のようなものを試してください

 tblkFontIcon.Text = "\uf000";

のではなく

tblkFontIcon.Text = "&#xf000;";

フォントアイコンの使用からのコードを使用している場合

次に、おそらくその投稿の「How It Works」セクションを逃しました。 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;
}
20
terry

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;
26
H. Pauwelyn

シンプルで非常に簡単：

Fontawesomeフォントをシステムにインストールし、次のように使用します。

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

アイコンの作成方法、{＆＃x} {FontAwesome icon code}例：アドレス帳の＆＃xf2b9

コードのリストを見つけるには、 FontAwesome または astronaut web に移動します

0
Kolajo