Home / Questions / 215010
Accepted
Wilmilcard
Asked: 2020-11-20 05:50:14 +0800 CST 2020-11-20 05:50:14 +0800 CST

How to Bind the "Icon" property of FontAwesome UWP?

  • 772

I have this gallery of icons that I downloaded for my UWP project

https://www.nuget.org/packages/FontAwesome.UWP/

I need to Bind the Icon property so the xaml calls it like this:

xmlns:fa="using:FontAwesome.UWP"

and in the grid or in a stackpanel I call it like this:

<StackPanel>
   <Viewbox>
       <fa:FontAwesome Icon="Industry"/>
   </Viewbox>
</StackPanel>

How can I make it bind, I thought that sending a string would work directly but not

c#

2 Answers

  1. For UWP it is a bit different than WPF. In WPF there is the possibility of assigning a binding path that is a string, but in UWP the type is an enum. So one possible solution is to declare the property of the viewmodel that you bind to of type FontAwesome.UWP.FontAwesomeIcon.

    Option 1

    private FontAwesomeIcon _iconName;
public FontAwesomeIcon IconName
{
    get => _iconName;
    private set
    {
        if (value == _iconName) return;
        _iconName = value;
        OnPropertyChanged();
    }
}

    And assuming you have the namespace faregistered for the nuget of FontAwesome.UWP. Something like this:

    xmlns:fa="using:FontAwesome.UWP"

    Then you can bind it like this in the view:

    <StackPanel>
   <Viewbox>
       <fa:FontAwesome Icon="{Binding IconName}" />
   </Viewbox>
</StackPanel>

    Option 2: Using a IValueConverter:

    The other possibility is to pass it a string(as you were thinking) and use converter to transform that value to the correct instance of FontAwesomeIcon.

    The first one is easier, as long as you can get the icons you need directly from the enum, but if you need help with this one... let me know :-)

    Hope this can help you!

    • 1
  2. Best Answer

    Done, @Karel gave me the idea and I solved it:

    First create a class where I will convert the text to icon:

    public class TextToIcon : IValueConverter
{
    public object Convert(object value, Type targetType = null, object parameter = null, string language = null)
    {
        FontAwesomeIcon item;
        if (value != null && Enum.TryParse(value.ToString(), out item))
            return item;
        else
            return FontAwesomeIcon.None;
     }

    public object ConvertBack(object value, Type targetType, object parameter, string language)
    {
        return null;
    }
}

    I then add it to a XAML Resource Dictionary:

    <ResourceDictionary
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:c="using:Proyecto.Converters"> <!-- este es el using del namespace de la clase convertidora -->

    <c:ImageToVisible       x:Key="ImageToVisible.conv"/>

</ResourceDictionary>

    And now on the page, where I am editing the view, I do this:

    <StackPanel>
    <Viewbox MaxHeight="35" Width="70">
          <fa:FontAwesome Icon="{x:Bind Icono, Converter={StaticResource TextToIcon.conv}}" Foreground="#f1c40f"/>
    </Viewbox>
</StackPanel>

    And that's it, the Binding is full on the Icon

    • 0