wake-up-neo.com

Ändern des Schriftart-Symbols in WPF mit Font Awesome

Ich verwende die Icons von Font Awesome, um grundlegende Fontbilder in meiner C # WPF-Anwendung zu rendern. Während der Laufzeit, wenn ich versuche, den TextBlock so zu ändern, dass ein anderes Zeichensymbol angezeigt wird, die Unicode-Darstellung jedoch anstelle des Zeichensymbols angezeigt wird.

Ich habe eine Beispielanwendung erstellt, um dies anzuzeigen. Wenn Sie auf eine der Schaltflächen klicken, wird die Text-Eigenschaft des TextBlock durch den Unicode für das entsprechende Symbol ersetzt. Es gibt einen Ressourcenordner im Projekt, der die Builddatei " FontAwesome.ttf font" enthält, auf die die FontFamily-Eigenschaft des TextBlock verweist. 

Hier ist der Quellcode meiner Beispielanwendung:

Code-Behind:

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>

Ich habe das folgende Tutorial verwendet, um Font Awesome in meine Anwendung zu integrieren http://www.codeproject.com/Tips/634540/Using-Font-Icons

Wie kann ich also das Icon ändern, aber ein Icon anzeigen - nicht Unicode?

Danke im Voraus.

15
Gareth

AKTUALISIEREN

Ich habe einen anderen Beitrag für dieses Thema gefunden - Icon-Schriftart in wpf Ich denke, dass dies eher zu dem passt, was Sie wollen.

Stellen Sie sicher, dass Ihre Schriftart als Ressource hinzugefügt wird. Verwenden Sie dann Folgendes Zeichenfolge:

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

In der obigen Zeichenfolge gehe ich davon aus, dass der Name der Schriftart (nicht der Dateiname ) Der Name FontAwesome ist.

Sie müssen nur:

  1. Fügen Sie Ihrem Projekt die Schriftart hinzu. Angenommen, Sie fügen sie in einen Ordner "Schriftarten" ein.
  2. Ändern Sie die Build-Aktion in Ressourcenicht _ ​​eingebettete Ressource
  3. Fügen Sie Ihren Stil hinzu, um die Schriftfamilie wie im obigen Code-Snip festzulegen, und setzen Sie den TextBlock.Text auf das gewünschte Symbol, und wenden Sie den Stil auf den TextBlock an.

Wenn Sie das Symbol durch Aktualisieren der TextBlock.Text-Eigenschaft ändern möchten, sollten Sie die Text-Eigenschaft mit der unterstützten Unicode-Zeichenfolge festlegen.

Versuchen Sie etwas wie 

 tblkFontIcon.Text = "\uf000";

eher, als

tblkFontIcon.Text = "&#xf000;";

Wenn Sie den Code verwenden von Using Font Icons

dann haben Sie wahrscheinlich den Abschnitt "Funktionsweise" in diesem Beitrag verpasst Sie sollten diese Markup-Erweiterung anstelle der TextBlock.Text-Eigenschaft verwenden.

In seinem Beispielcode:

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

achten Sie auf den WpfTools:ImageFromFont, es handelt sich um die Markup Extention , mit der xaml-Parser den konvertieren kann 

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

zu einem ImageSource und der LargeImageSource-Eigenschaft zugewiesen.

In Ihrem Xaml könnten Sie also TextBlock durch ein Image ersetzen. Dann sollte es ungefähr so ​​aussehen:

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

Wenn Sie das Symbol ändern möchten, müssen Sie ImageSource selbst ändern. Folgen Sie einfach den Anweisungen Using Font Icons , um eine eigene Methode zu erstellen, oder kopieren Sie einfach den folgenden Code aus diesem Lernprogramm.

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

Ich weiß, dass dies eine alte Frage ist, aber Font Awesome hat ein NuGet-Paket namens FontAwesome.UWP und FontAwesome.WPF. Laden Sie einfach eines davon herunter.

 NuGet Packages for Font Awesome

Wenn Sie einen Symbolimport verwenden, folgen Sie dem Namespace in Ihren XAML-Code:

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

Verwenden Sie es wie folgt in Ihren Button:

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

Und zum Schluss in deinem C # -Code hinter:

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

Einfach und sehr einfach:

Sie sollten fontawesome font auf Ihrem System installieren, verwenden Sie es wie folgt

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

So erstellen Sie ein Symbol, {& # x} {FontAwesome-Symbolcode}, z. B. & # xf2b9 für das Adressbuch

Um die Liste der Codes zu finden, gehe zu FontAwesome oder Astronaut Web

0
Kolajo