How to compose icons in NavigationViewItem.Icon

[Balkoth]

I want to do something like this:

<NavigationViewItem x:Name="Test" Content="Hello">
  <NavigationViewItem.Icon>
    <!-- Single icon works fine, but HOW TO COMPOSE TWO OR MORE ICONS HERE? -->
    <FontIcon FontFamily="{StaticResource SymbolThemeFontFamily}" Glyph="&#xe8ca;" />
  </NavigationViewItem.Icon>
</NavigationViewItem>

[castorix]

A workaround can be to call RenderTargetBitmap of a grid with the 2 icons, convert it to BitmapImage and set it as source of ImageIcon (instead of FontIcon)

I increased the size of Viewbox of "Content 1" to 32x32 otherwise it is too small like in "Content 2":

[castorix]

You can also modify the template copied from generic.xaml
<Style TargetType="NavigationViewItem" >
(put inside App.xaml)
in particular the <Viewbox x:Name="IconBox"
(I tested with the grid with the 2 FontIcons, by replacing ContentPresenter x:Name="Icon" )

[Balkoth]

Ah yes, that could be an opportunity. I see what i can come up with, or if it's just not worth the hustle.

[Balkoth]

I have decided not to pursue copying and modifying the template. I would rather create a custom control that can be inserted everywhere an IconElement is expected that can compose and render multiple icons into a single one like presented above.

If anyone has an idea to get me started...

[castorix]

I have decided not to pursue copying and modifying the template. I would rather create a custom control that can be inserted everywhere an IconElement is expected that can compose and render multiple icons into a single one like presented above.

If anyone has an idea to get me started...

I made a test with a class derived from FontIcon
It is draft code, with hardcoded heart icons, but it can be a basis for a better code...

namespace WinUI3_IconControl
{
    /// <summary>
    /// An empty window that can be used on its own or navigated to within a Frame.
    /// </summary>
    public sealed partial class MainWindow : Window
    {
        public MainWindow()
        {
            this.InitializeComponent();
        }

        private void myButton_Click(object sender, RoutedEventArgs e)
        {
            myButton.Content = "Clicked";

            CompositeIcon ci = new CompositeIcon(48, 48);
            UIElement root = (UIElement)this.Content;
            ((StackPanel)this.Content).Children.Add(ci);           
        }
    }

    //[Microsoft.UI.Xaml.Markup.ContentProperty(Name = nameof(IconElements))]
    public class CompositeIcon : FontIcon
    {
        private Microsoft.UI.Composition.Compositor _compositor;
        private int _nWidth = 48, _nHeight = 48;
        private bool _bIcons = false;        
        public ObservableCollection<IconElement> IconElements { get; } = new ObservableCollection<IconElement>();

        // Necessary for XAML, for example inside NavigationViewItem.Icon
        public CompositeIcon() : base()
        {             
            this.Width = _nWidth;
            this.Height = _nHeight;
            _compositor = ElementCompositionPreview.GetElementVisual(this).Compositor;
            Loaded += OnLoaded;
        }

        public CompositeIcon(int nWidth = 32, int nHeight = 32) : base()
        {
            _nWidth = nWidth;
            _nHeight = nHeight;
            this.Width = _nWidth;
            this.Height = _nHeight;
            _compositor = ElementCompositionPreview.GetElementVisual(this).Compositor;                    
            Loaded += OnLoaded;
        }

        private async void DrawIcons()
        {            
            var temporaryViewbox = new Viewbox()
            {
                Width = _nWidth,
                Height = _nHeight,
                Margin = new Thickness(-5000, -5000, 0, 0),
            };

            var childGrid = new Grid()
            {
               
            };
            temporaryViewbox.Child = childGrid;

            foreach (var icon in IconElements)
            {                
                if (icon is FontIcon fontIcon)
                {                    
                    childGrid.Children.Add(fontIcon);
                }
            }

            FrameworkElement rootElement = GetRootElement(this);
            ((Panel)rootElement).Children.Add(temporaryViewbox);
          
            var renderTargetBitmap = new RenderTargetBitmap();
            await renderTargetBitmap.RenderAsync(temporaryViewbox);           

            var pixelBuffer = await renderTargetBitmap.GetPixelsAsync();
            var pixels = pixelBuffer.ToArray();

            using (var stream = new InMemoryRandomAccessStream())
            {
                var encoder = await BitmapEncoder.CreateAsync(BitmapEncoder.PngEncoderId, stream);
                encoder.SetPixelData(
                    BitmapPixelFormat.Bgra8,
                    BitmapAlphaMode.Premultiplied,
                    (uint)renderTargetBitmap.PixelWidth,
                    (uint)renderTargetBitmap.PixelHeight,
                    96, 96,
                    pixels);
                await encoder.FlushAsync();
                
                var surface = LoadedImageSurface.StartLoadFromStream(stream);
                var brush = _compositor.CreateSurfaceBrush(surface);

                SpriteVisual spriteVisual = _compositor.CreateSpriteVisual();
                spriteVisual.Brush = brush;
                brush.Stretch = CompositionStretch.Uniform;
                spriteVisual.Size = new System.Numerics.Vector2((float)this.Width, (float)this.Height);
                ElementCompositionPreview.SetElementChildVisual(this, spriteVisual);
            }
            ((Panel)rootElement).Children.Remove(temporaryViewbox);
        }

        public static FrameworkElement GetRootElement(FrameworkElement element)
        {
            FrameworkElement root = element;
            while (VisualTreeHelper.GetParent(root) is FrameworkElement parent)
            {
                if (parent is Panel panel)
                {
                    return panel;
                }
                root = parent;
            }
            return root;
        }    

        private void OnLoaded(object sender, RoutedEventArgs e)
        {
            if (!_bIcons)
                InitializeSampleIcons();
            DrawIcons();
        }

        private void InitializeSampleIcons()
        { 
            var fontIcon = new FontIcon
            {
                Glyph = "\uEB52",
                FontFamily = new FontFamily("Segoe MDL2 Assets"),
                Foreground = new SolidColorBrush(Windows.UI.Color.FromArgb(0xFF, 0xC7, 0x23, 0x35))
            };
            var fontIcon2 = new FontIcon
            {
                Glyph = "\uEB51", 
                FontFamily = new FontFamily("Segoe MDL2 Assets")
            };          

            IconElements.Add(fontIcon);
            IconElements.Add(fontIcon2);
            _bIcons = true;
        }
    }    
}

XAML for test with CompositeIcon in Tab 2 :

<?xml version="1.0" encoding="utf-8"?>
<Window
    x:Class="WinUI3_IconControl.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:WinUI3_IconControl"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <StackPanel Orientation="Vertical" HorizontalAlignment="Center" VerticalAlignment="Center">
        <Button x:Name="myButton" Click="myButton_Click">Click Me</Button>

        <Grid x:Name="gridIcon">
            <FontIcon FontFamily="Segoe MDL2 Assets" Glyph="&#xEB52;" FontSize="32"
                      Foreground="LimeGreen" />
            <FontIcon FontFamily="Segoe MDL2 Assets" Glyph="&#xEB51;" FontSize="32"/>
        </Grid>

        <!--SelectionChanged="NaviView_SelectionChanged"-->
        <!--PaneOpened="NaviView_PaneOpened"-->

        <NavigationView  x:Name="NaviView"                        
        IsBackButtonVisible="Collapsed"
        IsSettingsVisible="False"
        IsTitleBarAutoPaddingEnabled="False"
        PaneDisplayMode="Top"
        PaneTitle="Title">
      
            <NavigationView.MenuItems>
                <NavigationViewItem
                Content="Content 1"
                    x:Name="HomeNavItem"
                Icon="Home"
                IsSelected="True"
              />
                <NavigationViewItem
                Content="Content 2" >
                    <!--Icon="Contact"-->

                    <NavigationViewItem.Icon>                       
                        <!--<FontIcon FontSize="32" FontFamily="Segoe UI Emoji" Glyph="&#10084;"
                                   Foreground="#C72335"/>-->
                        <local:CompositeIcon>
                        </local:CompositeIcon>
                    </NavigationViewItem.Icon>

                </NavigationViewItem>

                <NavigationViewItem
                Content="Content 3"
                Icon="Page2"
                />
                <NavigationViewItem Content="Content 4" Icon="Download" />
                <NavigationViewItem Content="Content 5" Icon="Audio" />
                <NavigationViewItem Content="Content 6" Icon="Video" />
                <NavigationViewItem Content="Content 7" Icon="Edit" />
                <NavigationViewItem Content="Content 8" Icon="Globe" />
                <NavigationViewItem Content="Content 9" Icon="Mail" />
            </NavigationView.MenuItems>

            <!--<StackPanel>
                <Border BorderThickness="2" BorderBrush="Red" Background="Transparent" >
                    <TextBlock x:Name="tb1" Height="40" FontFamily="Arial"></TextBlock>
                </Border>
                <PasswordBox x:Name="pb1" IsTabStop="True">

                </PasswordBox>
            </StackPanel>-->
          
        </NavigationView>
    </StackPanel>
</Window>

[Balkoth]

Maybe next week i can spend some time to investigate this further. Regardless, thanks for your help!