Can I make an icon binding with ImageAwesome in WPF via a ListView item?

Question

I use the "FontAwesome.WPF" nuget.

This is what a ListView Object looks like

public class Item
{
    public string LocalizationNameVariable { get; set; }
    public string LocalizationDescriptionVariable { get; set; }

    public FontAwesomeIcon IsAlertToggleActive { get; set; }
}

This is how a ListView column currently looks like:

<GridViewColumn Header="{Binding Translation.IsAlertActive, FallbackValue=IS_ALERT_ACTIVE}" Width="100">
                        <GridViewColumn.CellTemplate>
                            <DataTemplate>
                                <Grid Height="24" Width="24">
                                    <fa:ImageAwesome Visibility="Visible" Icon="ToggleOff"  MouseUp="AlertModeAlertActiveToggle_MouseUp" />
                                </Grid>
                            </DataTemplate>
                        </GridViewColumn.CellTemplate>
                    </GridViewColumn>

In a TextBox I use the following, here the value comes from the ListView and is stored in the item that works.

<TextBox d:DataContext="{d:DesignInstance models:Item}" Text="{Binding (models:Item.AlertModeMinSellPriceIsUndercutPrice)}" MaxLength="12" Height="24" Width="65" PreviewTextInput="TxtBoxMinSellPriceIsUndercutPrice_OnPreviewTextInput"></TextBox>

But I would like to be able to change values for the toggle icon in both directions.

Do I have to use PropertyChanged or is that not possible with FontAwesome?

Answer 1

You should always implement inotifypropertychanged on any viewmodel.

Item is a viewmodel.

If you read the fontawesome md, it points out there is an example of binding the image in the example project.

Mainwindow is here:

https://github.com/charri/Font-Awesome-WPF/blob/master/example-wpf/Example.FontAwesome.WPF/MainWindow.xaml

            <fa:FontAwesome
                        Icon="{Binding Path=Icon}"
                        FontSize="{Binding ElementName=FontSizeSlider, Path=Value}"
                        VerticalAlignment="Center" Margin="0,0,10,0" />

The viewmodel is here:

https://github.com/charri/Font-Awesome-WPF/blob/master/example-wpf/Example.FontAwesome.WPF/ViewModel/MainViewModel.cs

public class MainViewModel
{

    public ObservableCollection<IconDescription> Icons { get; set; }

    public MainViewModel()
    {
        Icons = new ObservableCollection<IconDescription>();

        var icons = Enum.GetValues(typeof (FontAwesomeIcon)).Cast<FontAwesomeIcon>()
            .Where(t => t != FontAwesomeIcon.None)
            .OrderBy(t => t, new IconComparer());

        foreach (var icon in icons)
        {
            var memberInfo = typeof(FontAwesomeIcon).GetMember(icon.ToString()).FirstOrDefault();

            if(memberInfo == null) continue; // alias

            foreach (var cat in memberInfo.GetCustomAttributes(typeof(IconCategoryAttribute), false).Cast<IconCategoryAttribute>())
            {
                var desc = memberInfo.GetCustomAttributes(typeof(DescriptionAttribute), false).Cast<DescriptionAttribute>().First();
                var id = memberInfo.GetCustomAttributes(typeof(IconIdAttribute), false).Cast<IconIdAttribute>().FirstOrDefault();
                Icons.Add(new IconDescription { Category = cat.Category, Description = desc.Description, Icon = icon, Id = id == null ? null : id.Id });
            }
        }
        
    }

    public class IconComparer
        : IComparer<FontAwesomeIcon>
    {
        public int Compare(FontAwesomeIcon x, FontAwesomeIcon y)
        {
            return String.Compare(x.ToString(), y.ToString(), System.StringComparison.InvariantCultureIgnoreCase);
        }
    }

}

public class IconDescription
{
    public string Description { get; set; }

    public FontAwesomeIcon Icon { get; set; }

    public string Category { get; set; }

    public string Id { get; set; }

}