NavigationViewItems created dynamically via MenuItemsSource crash under More dropdown

Describe the bug When creating items dynamically via a bound collection with MenuItemsSource using a MenuItemTemplate. It will work as expected until the top menu is compressed enough to move items under the “More” dopdown menu. When it does, expanding the menu will create the following error:

Failed to assign to property ‘Windows.UI.Xaml.Controls.ContentPresenter.Content’. [Line: 6980 Position: 37]

and crash. If done statically, they work as expected.

Steps to reproduce the bug Bind the MenuItemsSource to a collection.

Use a DataTemplate

        <DataTemplate x:Key="NavigationItemTemplate">
            <mux:NavigationViewItem Content="{Binding linkTitle}" Icon="{Binding linkImage}" Tag="{Binding Id}"/>
        </DataTemplate>

Expected behavior The menu shows correctly

Version Info

NuGet package version: 2.1.181217001-prerelease

Windows 10 version:

• October 2018 Update (17763)

Device form factor:

• Desktop
• Mobile

[ojhad]

@StephenLPeters Based on the investigation above and what I am seeing, it looks like the removal/addition of items may be happening in NavigationView::HandleTopNavigationMeasureOverrideOverflow. More specifically this part of the function does not look like its behaving as intended in order to avoid NavigationView determining that all the items can be re-added to the top nav. Seems like the item width state is not being saved properly for the line linked above to do its job.

[licanhua]

@chingucoding It’s hard for you to debug it without the source code from Xaml. It’s possible a bug from platform, and most likely Icon property trigged the problem. @ranjeshj I forwarded the email about my investigation before.

Here is the code I used to repro the problem:

        <Grid.Resources>
            <local:Customers x:Key="customers"/>
            <DataTemplate x:Key="NavigationItemTemplate">
                <mux:NavigationViewItem Content="{Binding linkTitle}" Icon="{Binding linkImage}" Tag="{Binding Id}"/>
           </DataTemplate>
        </Grid.Resources>
        <mux:NavigationView MenuItemsSource="{StaticResource customers}" PaneDisplayMode="Top" MenuItemTemplate="{StaticResource NavigationItemTemplate}"></mux:NavigationView>
 
   public class Customer
    {
        public string linkTitle { get; set; }
        public IconElement linkImage { get; set; }
 
        public Customer(string title, SymbolIcon iconElement)
            {
            linkTitle = title;
            linkImage = iconElement;
            }
    }
 
    public class Customers : ObservableCollection<Customer>
    {
        public Customers()
        {
            Add(new Customer("1111111111111", new SymbolIcon(Symbol.Accept)));
            Add(new Customer("2222222222222", new SymbolIcon(Symbol.Accept)));
            Add(new Customer("1333333333333333333333", new SymbolIcon(Symbol.Accept)));
            Add(new Customer("44444444444444", new SymbolIcon(Symbol.Accept)));
        }
 
    }