Programmatically adding new NavigationViewItems to an existing NavigationView.MenuItems collection results in the added items rendering inside a generated NavigationViewItem node

[GlitterHorn]

Example:

XAML:

<ct:NavigationView x:Name="NavMain" ItemInvoked="NavMain_ItemInvoked">
    <ct:NavigationView.MenuItems>
        <ct:NavigationViewItem Content="Home"/>
    </ct:NavigationView.MenuItems>
</ct:NavigationView>

C#:

private void RenderMenu()
{
    NavMain.MenuItems.Add(new NavigationViewItemSeparator());

    foreach (TarotSuit suit in deck.Suits)
    {
        // make a nav menu item for the suit
        NavigationViewItem newMenu = new NavigationViewItem();
        newMenu.Content = suit.Suit;
        newMenu.Icon = new SymbolIcon(Symbol.OutlineStar);

        NavMain.MenuItems.Add("menu");
    }
}

The resulting UI and live tree:

It looks like NavigationView.MenuItems.Add(object) is setting the value passed as the Content property of a generated NavigationViewItem, resulting in an added NavigationViewItem set as the Content property of a container NavigationViewItem.

Rendering really goes sideways on this:

If I pass a string to NavigationView.MenuItems.Add(object), the result is a single NavigationViewItem with the Content property set to the string. Not only that, but if I return all the items after they've been created, the returned list doesn't contain these extra, auto-generated NavigationViewItem controls, so I think this is happening when the control is rendered, rather than how the XAML controls are created before rendering.

[GlitterHorn]

I think this issue may be related to my windows build. This happened on 18231, but since updating to 18240, NavigationViewItem controls are being generated properly.

I'll leave this open though, since there might still be something else going on.

[kmahone]

@ClairelyClaire that you for reporting this issue.

This behavior happens when a Windows.UI.Xaml.Controls.NavigationViewItem is added to a Microsoft.UI.Xaml.Controls.NavigationView. You only get the correct behavior when a Microsoft.UI.Xaml.Controls.NavigationViewItem is added to a Microsoft.UI.Xaml.Controls.NavigationView. The controls in the Microsoft.UI.Xaml namespace are from the NuGet package. The controls in the Windows.UI.Xaml namespace are the ones that are from the OS.

If you update your code to create Microsoft.UI.Xaml.Controls.NavigationViewItems, you should get the correct behavior.

Because the MenuItem property is typed to collection of object, the type system doesn't really help here.

Thanks for the feedback.

[GlitterHorn]

Thanks! I added this to my using:

using NavigationView = Microsoft.UI.Xaml.Controls.NavigationView;
using NavigationViewItem = Microsoft.UI.Xaml.Controls.NavigationViewItem;
using NavigationViewItemInvokedEventArgs = Microsoft.UI.Xaml.Controls.NavigationViewItemInvokedEventArgs;

I don't think I had that added when I posted this issue, but things look to be working now.