Use With FluentAvalonia IconSource

[Ricent82]

Could you maybe provide some sample code for how to use these icons with FluentAvalonia's IconSource? I've so far been unable to get it to work. As a quick example, here's their NavigationView control (from the sample project):

You specify the items like:

<ui:NavigationViewItem.MenuItems>
    <ui:NavigationViewItem Content="Mail" IconSource="Mail" />
</ui:NavigationViewItem.MenuItems>

Rather than their selection of icons, I'd love to be able to use these. I tried something like:

      <ui:NavigationView.MenuItemTemplate>
        <DataTemplate>
          <ui:NavigationViewItem>
            <StackPanel Orientation="Horizontal">
              <i:Icon Value="fa-brands fa-anchor"/>
              <TextBlock Text="Anchor" />
            </StackPanel>
          </ui:NavigationViewItem>
        </DataTemplate>
      </ui:NavigationView.MenuItemTemplate>

But then you end up having to tweak around with margins - and it still looks glitchy when you expand/collapse the item:

I'm sure there must be a simple way to do this, but I haven't found any way that's compatible. Any pointers would be greatly appreciated. Here's a bit about their IconSource, if it's helpful: amwx/FluentAvalonia#257

[just-seba]

You could try something like this:

<ui:NavigationViewItem.MenuItems>
  <ui:NavigationViewItem Content="Anchor">
    <ui:NavigationViewItem.IconSource>
      <ui:ImageIconSource>
        <i:IconImage Value="fa-brands fa-anchor" Brush="(defaults to black)" />
      </ui:ImageIconSource>
    </ui:NavigationViewItem.IconSource>
  </ui:NavigationViewItem>
</ui:NavigationViewItem.MenuItems>

[Ricent82]

Yessssss, that's it! Thanks so much :)

[just-seba]

Nice 👍

[Ricent82]

Quick follow-up: the only thing I can't seem to get working is the brush. I'm using the same DynamicResource as everywhere else in xaml, but the icons seem to be the only thing that don't follow it. As an example:

      <ui:NavigationView.MenuItemTemplate>
        <DataTemplate DataType="{x:Type local:ViewModelNavPageBase}">
            <ui:NavigationViewItem>
              <ui:NavigationViewItem.Content>
                <!--This border is just to prove to myself that the DynamicResource is getting the right color-->
                <Border BorderThickness="1" CornerRadius="10" Margin="10" Background="{DynamicResource TextFillColorPrimaryBrush}">
                  <--Not actually visible due to the border-->
                  <TextBlock Text="{Binding PageName}" />
                </Border>
              </ui:NavigationViewItem.Content>
              <ui:NavigationViewItem.IconSource>
                <ui:ImageIconSource>
                   <--However, the icons don't follow the color-->
                  <i:IconImage Value="{Binding PageIcon}" Brush="{DynamicResource TextFillColorPrimaryBrush}" />
                </ui:ImageIconSource>
              </ui:NavigationViewItem.IconSource>
            </ui:NavigationViewItem>
        </DataTemplate>
      </ui:NavigationView.MenuItemTemplate>

And here's the behavior - the "debug" button toggles the them, and you can see the border following the text foreground color, but the icons always remain black:

[just-seba]

The IconImage is derived from the DrawingImage which itself is not stylable (see AvaloniaUI/Avalonia#5633). I think that's why it's not working with DynamicResource as well.

You could try to create your own Image Source like this

public class MyIconSource: ImageIconSource
{
    public static readonly StyledProperty<string?> ValueProperty =
        AvaloniaProperty.Register<MyIconSource, string?>(nameof(Value));
    
    public static readonly StyledProperty<IBrush?> BrushProperty =
        AvaloniaProperty.Register<MyIconSource, IBrush?>(nameof(Brush));

    
    public string? Value 
    {
        get => GetValue(ValueProperty);
        set => SetValue(ValueProperty, value);
    }

    public IBrush? Brush 
    {
        get => GetValue(BrushProperty);
        set => SetValue(BrushProperty, value);
    }

    protected override void OnPropertyChanged(AvaloniaPropertyChangedEventArgs change)
    {
        base.OnPropertyChanged(change);
        if (change.Property == ValueProperty || change.Property == BrushProperty)
        {
            Source = new IconImage(Value, Brush);
        }
    }
}

and use it in your UI

<ui:NavigationViewItem.IconSource>
  <foo:MyIconSource Value="{Binding PageIcon}" Brush="{DynamicResource TextFillColorPrimaryBrush}" />
</ui:NavigationViewItem.IconSource>

[Ricent82]

Thanks for the quick response :)

Unfortunately, it won't let me bind:

Avalonia error AVLN:0004: Unable to find suitable setter or adder for property Source of type FluentAvalonia:FluentAvalonia.UI.Controls.ImageIconSource for argument IconSourceStyleable, available setter parameter lists are:
Avalonia.Media.IImage

[houstonhaynes]

Thanks for raising this @Ricent82 - I just encountered this a week after you and we had to divert to using bitmaps. I'd love to see a proper "bridge" between this and FluentAvalonia - for both "inner loop" to ease working in the code as well as smoothing out the rough edges of mapping icons to color changes in theme variants.

[Ricent82]

I ended up just switching to https://github.com/davidxuang/FluentIcons. In addition to the theme issue, was also having issues with icons appearing stretched/squished, or getting oddly mixed up (i.e. sometimes one of the icons in the NavigationView would actually appear as one of the other icons, until you tap it in the UI, then it would switch to the correct icon). FluentIcons mitigated all of those issues out of the box.

[houstonhaynes]

Thanks for that advice - I did the same for now, but would love to have access to FontAwesome (I have a pro license and like the duotone fonts for various purposes). So I want to keep an eye on this and use it with FluentAvalonia when I (or someone else) figures out how to map the icons in.

[just-seba]

Thank's for the feedback. It seems it's not that easy to support FluentAvalonia. But I will look into this in the feature.

I'll keep this issue open for tracking.