web-dev-qa-db-fra.com

Modification de l'icône de police dans WPF à l'aide de Font Awesome

J'utilise les icônes de Font Awesome pour générer des images de police de base dans mon application C # WPF. Pendant l'exécution, lorsque j'essaie de modifier TextBlock pour afficher une icône de police différente, mais la représentation unicode est affichée à la place de l'icône de police.

J'ai créé un exemple d'application pour l'afficher. Lorsque l'on clique sur l'un des boutons, il remplace la propriété Text de TextBlock par l'unicode de l'icône correspondante. Il existe un dossier Ressources dans le projet qui contient le fichier FontAwesome.ttf font en tant que ressource de génération à laquelle la propriété FontFamily de The TextBlock fait référence. 

Voici le code source de mon exemple d'application:

Code-Derrière:

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>

J'ai utilisé le didacticiel suivant pour incorporer Font Awesome à mon application http://www.codeproject.com/Tips/634540/Using-Font-Icons

Donc, en substance, comment puis-je changer l'icône mais avoir un affichage d'icône - pas Unicode?

Merci d'avance.

c#wpfxamlfontsfont-awesome
15
Gareth

METTRE À JOUR

J'ai trouvé un article différent pour ce sujet - Ajouter une police d'icône dans wpf Je pense que cela devrait être plus susceptible de correspondre à ce que vous voulez.

Assurez-vous que votre police est ajoutée en tant que ressource. Ensuite, utilisez ce qui suit chaîne:

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

Dans la chaîne ci-dessus, je suppose que le nom de la police (not le nom du fichier Font) est FontAwesome.

Vous avez juste besoin de:

  1. Ajoutez la police à votre projet, disons que vous les mettez dans un dossier "polices"
  2. Définissez l’action de construction sur ressource _ pas _ ​​ressource intégrée
  3. Ajoutez votre style pour définir la famille de polices comme le code ci-dessus, définissez le TextBlock.Text sur l'icône de votre choix et appliquez le style au TextBlock.

Si vous souhaitez modifier l'icône en mettant à jour la propriété TextBlock.Text, vous devez définir la propriété Text avec la chaîne unicode prise en charge.

Essayez quelque chose comme 

 tblkFontIcon.Text = "\uf000";

plutôt que

tblkFontIcon.Text = "&#xf000;";

Si vous utilisez le code de Utilisation des icônes de police

alors vous avez probablement manqué la section "Comment ça marche" de cet article ... vous devriez utiliser cette extension de balisage, plutôt que d'utiliser la propriété TextBlock.Text.

Dans son exemple de code:

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

faites attention au WpfTools:ImageFromFont, c’est le Markup Extension , il permet à l’analyseur xaml de convertir le 

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

à un ImageSource et affecté à la propriété LargeImageSource.

Donc, dans votre xaml, vous pourriez remplacer la TextBlock par une Image, alors ce devrait être quelque chose comme:

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

Si vous voulez changer l'icône, vous devrez changer vous-même la ImageSource, suivez simplement le Utilisation des icônes de police pour créer votre propre méthode, ou copiez simplement le code suivant à partir de ce tutoriel.

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

Je sais que la question est ancienne, mais Font Awesome propose un package NuGet nommé FontAwesome.UWP et FontAwesome.WPF. Il suffit de télécharger un de cela.

 NuGet Packages for Font Awesome

Si vous souhaitez utiliser une icône, suivez l’espace de noms dans votre code XAML:

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

Utilisez-le dans votre bouton comme ceci:

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

Et enfin dans votre code C # derrière:

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

Simple et très facile:

Vous devez installer la police fontawesome sur votre système, utilisez-la comme suit

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

Comment composer une icône, {& # x} {code d'icône FontAwesome} p. Ex. & # Xf2b9 pour le carnet d'adresses

Pour trouver la liste des codes goto FontAwesome ou astronaut web

0
Kolajo