Dynamic Icon switching depend on Enums

[Molenfeuer]

Hello Community,

I want to show an Icon based on a binded enum value.

Let's say I have a class called "Club" containing an enum of types.

public class Club
{
  public enum ClubType
  {
     Unknown,
     Football,
     Cycling,
     Swimming,
     Dancing
  }

   public ClubType Type { get; set; } = ClubType.Unknown;
   public string Name { get; set; } = "Unknown";
}

I have a ListBox displaying instances of Club.

My goal is to show an Icon left to the Club.Name based on the enum.

My first idea was to extend my Club class of an IconPath and BackgroundColor Property. But I think this will violate the MVVM pattern so I struggling how to achieve this inside the axaml. I think use a Converter is the way to do it but I don't know how to use a EnumToBoolConverter. I even don't know which namespace i have to import into the axaml.

Have a great day
Leon

[tobyfirth]

There are at least 3 ways you could do what you want to do in the view.

Using the enum to bool converter or your own custom converter as you mentioned or using a DataTemplate.

EnumToBoolCoverter

Only documented in where it is used as part of the colour picker controls

<UserControl
    <!-- Rest ommited for brevity -->
    xmlns:converters="using:Avalonia.Controls.Converters">

    <UserControl.Resources>
        <converters:EnumToBoolConverter x:Key="enumConverter" />
    </UserControl.Resources>

    <!-- Show the football image if it is selected -->
    <Icon IsVisible="{Binding Type, Converter={StaticResource enumConverter}, ConverterParameter={x:Static ClubEnum:Club.Football}}"/>

</UserControl>

Custom Converter

Documentation

namespace MyConverters;
public static ConverterFuncs
{
    public static FuncValueConverter<Club, string> ClubConverter => new((club) => 
    {
        return club switch
        {
            Club.Football => "Football",
            // Rest of the options
        }
    });
}

<UserControl
    <!-- Rest ommited for brevity -->
    xmlns:converters="using:MyConverters">

    <!-- Show the football image if it is selected -->
    <Icon Type="{Binding Type, Converter={x:Static converters:ConverterFuncs.ClubConverter}}"/>

</UserControl>

DataTemplate

Documentation

namespace MyTemplates;
public class ClubTemplate : IDataTemplate
{
    public Control Build(object param)
    {
       return club switch
        {
            Club.Football => new Icon() { Type = "Football"},
            // Rest of the options
        }
    }

    public bool Match(object data)
    {
        return data is Club;
    }
}

<UserControl
    <!-- Rest ommited for brevity -->
    xmlns:templates="using:MyTemplates">

    <!-- Show the football image if it is selected -->
    <ContentControl Content="{Binding Club}"> 
        <!-- This could also be put into UserControl.DataTemplates instead -->
        <ContentControl.DataTemplates>
            <templates:ClubTemplate/>
        </ContentControl.DataTemplates> 
     </ContentControl> 
</UserControl>

You could also make your own control for displaying the club type but that is probably more complicated than you actually need for what you are doing.

[tobyfirth]

I don't know the answer to that. As long as your ListBox is using virtualisation, I don't think it will matter too much as only the controls which are in view will be created.

My educated guess would be that the custom converter would probably perform the best as you will only have one Icon/Image instance per club and everything needed is contained in the binding whereas the EnumToBoolConverter will still have the other Icons/Images in the visual tree. The DataTemplate I think will need to be looked up each time and the further up the tree it needs to look to find it will have a cost although there maybe some caching used internally to improve this. If you put the DataTemplate as part of the ListBox then there won't be too far to look.

If you use the OneTime mode on your binding you might also might get some small additional performance benefit.

You can implement the DataTemplate similar style to a converter as well.

[Molenfeuer]

Thank you very much :) I will test which option fits best for me.

[maxkatz6]

If you have 12000 items, and you have a limited set of types (represented by enum) - and each type has to use different presentation, I would go with a custom ItemsControl. That would be much more performance, and not too complex if you don't need selection.

I previously wrote this example - #17511 (comment). But if you don't need selection, I would recommend replacing : ListBox with : ItemsControl and NeedsContainer<ListBoxItem> with NeedsContainer<ContentPresenter>.

Where NeedsContainerOverride would decide what type your item is (by specifying recycleKey), and CreateContainerForItemOverride would create correct container depending on this type.

Why is it better? With different recycle keys, this items control will reuse container per each item type independently, ensuring better performance of pooling of these containers. While classic DataTemplate solution would have to rebuild container for each item on scroll.

[Molenfeuer]

The project was set to private until today so I wait for my final answer until now :)

I've chosen your EnumToBoolCoverter approach! Thank you!

[Molenfeuer]

If you have 12000 items, and you have a limited set of types (represented by enum) - and each type has to use different presentation, I would go with a custom ItemsControl. That would be much more performance, and not too complex if you don't need selection.

I previously wrote this example - #17511 (comment). But if you don't need selection, I would recommend replacing : ListBox with : ItemsControl and NeedsContainer<ListBoxItem> with NeedsContainer<ContentPresenter>.

Where NeedsContainerOverride would decide what type your item is (by specifying recycleKey), and CreateContainerForItemOverride would create correct container depending on this type.

Why is it better? With different recycle keys, this items control will reuse container per each item type independently, ensuring better performance of pooling of these containers. While classic DataTemplate solution would have to rebuild container for each item on scroll.

Good idea. The listbox works but is a bit slow. Not much but a bit. 24477 lines where loaded in about 5 seconds.