Question: How to bind AnimatedIcon to NavigationViewItem.Icon

I’m trying to use AnimatedIcon in NavigationViewItem, it works properly when using it in MenuItems

...
<winui:NavigationViewItem Content="Search">
                    <winui:NavigationViewItem.Icon>
                        <winui:AnimatedIcon>
                            <winui:AnimatedIcon.Source>
                                <animatedVisuals:AnimatedFindVisualSource />
                            </winui:AnimatedIcon.Source>
                            <winui:AnimatedIcon.FallbackIconSource>
                                <winui:SymbolIconSource Symbol="Find" />
                            </winui:AnimatedIcon.FallbackIconSource>
                        </winui:AnimatedIcon>
                    </winui:NavigationViewItem.Icon>
                </winui:NavigationViewItem>
...

But when I’m using Binding in MenuItemTemplate, it goes wrong

<models:NavigationMenuItemModel
                    Content="Search">
                    <models:NavigationMenuItemModel.Icon>
                        <winui:AnimatedIcon>
                            <winui:AnimatedIcon.Source>
                                <animatedVisuals:AnimatedFindVisualSource />
                            </winui:AnimatedIcon.Source>
                            <winui:AnimatedIcon.FallbackIconSource>
                                <winui:FontIconSource FontFamily="{StaticResource SymbolThemeFontFamily}" Glyph="&#xE721;" />
                            </winui:AnimatedIcon.FallbackIconSource>
                        </winui:AnimatedIcon>
                    </models:NavigationMenuItemModel.Icon>
                </models:NavigationMenuItemModel>

...
<winui:NavigationView.MenuItemTemplate>
                <DataTemplate x:DataType="models:NavigationMenuItemModel">
                    <winui:NavigationViewItem
                        Height="40"
                        Content="{x:Bind Content}"
                        Icon="{x:Bind Icon}"
                        MenuItemsSource="{x:Bind Children}" />
                </DataTemplate>
            </winui:NavigationView.MenuItemTemplate>
...

Model:

using System;
using System.Collections.ObjectModel;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;

public class NavigationMenuItemModel : DependencyObject
{
 public static readonly DependencyProperty ContentProperty = DependencyProperty.Register(
        "Content", typeof(string), typeof(NavigationMenuItemModel), new PropertyMetadata(default(string)));

    public string Content
    {
        get => (string)GetValue(ContentProperty);
        set => SetValue(ContentProperty, value);
    }

    public static readonly DependencyProperty IconProperty = DependencyProperty.Register(
        "Icon", typeof(IconElement), typeof(NavigationMenuItemModel), new PropertyMetadata(default(IconElement)));

    public IconElement Icon
    {
        get => (IconElement)GetValue(IconProperty);
        set => SetValue(IconProperty, value);
    }
}

I get an error:

System.ArgumentException: Parameter error.

Parameter error.

    at Microsoft.UI.Xaml.Controls.NavigationViewItem.put_Icon(IconElement value)
    at HyPlayer.UWP.Pages.BasePage.XamlBindingSetters.Set_Microsoft_UI_Xaml_Controls_NavigationViewItem_Icon(NavigationViewItem obj, IconElement value, String targetNullValue)
    at HyPlayer.UWP.Pages.BasePage.BasePage_obj6_Bindings.Update_Icon(IconElement obj, Int32 phase)
    at HyPlayer.UWP.Pages.BasePage.BasePage_obj6_Bindings.Update_(NavigationMenuItemModel obj, Int32 phase)
   

If the Icon is a FontIcon, it goes well. I’m wondering why it will throw an error and how to fix it?

**Additional Information: ** Dependencies: Microsoft.UI.Xaml : 2.7.0

[RealTommyKlein]

@ojhad @StephenLPeters - unrelated to XMP. This is the IconElement multiparent issue, where a single IconElement can’t be set as the value of multiple Icon properties since IconElement is a FrameworkElement and it would exist in multiple places in the visual tree. The symptom is setting a breakpoint on Windows.UI.Xaml!OnFailureEncountered, and seeing in the callstack CDependencyObject::SetEffectiveValue() which is failing when calling VerifyCanAssociate().

The developer code using IconElement could be refactored to use the IconElement parameters in the data model instead of an IconElement itself, and then use function binding to create new instances of IconElement using those parameters, e.g. instead of:

Icon="{x:Bind Icon}"

The xaml would be:

Icon="{x:Bind CreateIcon(IconParameters)}"

With IconParameters being a class/struct replacing Icon on the data model, representing the parameters to construct the IconElement with in a new CreateIcon() method.

[kengwang]

Re: https://github.com/microsoft/microsoft-ui-xaml/issues/6496#issuecomment-1068087993

Thanks, it works!