Dynamically binding NavigationViewItem && NavigationViewItemHeader in UWP XAML

Question

I want to populate NavigationViewItems and NavigationViewItemHeaders dynamically in my NavigationView. However, I can not make it work. It looks like my ListViewonly take the space of one item. How can I create new Items dynamically?

MainMenu.xaml

<NavigationView x:Name="NavViewTester"
                ItemInvoked="NavViewTester_ItemInvoked"Loaded="NavViewTester_Loaded" 
                IsPaneToggleButtonVisible="True" IsPaneOpen="True">
     <NavigationView.MenuItems>
         <NavigationViewItemHeader Content="My Books">
         </NavigationViewItemHeader>
     </NavigationViewItemHeader>  

         <Grid x:Name="BooksGrid">

            <Grid.RowDefinitions>
                <RowDefinition Height="Auto"  />
                <RowDefinition Height="*" />
            </Grid.RowDefinitions>

            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="320" />
                <ColumnDefinition Width="*" />
            </Grid.ColumnDefinitions>

            <ListView
                x:Name="NavigationListView"
                Grid.Row="1"
                ItemTemplate="{StaticResource NavigationListViewItemTemplate}"
                ItemsSource="{x:Bind books.getBooks()}" 
                IsItemClickEnabled="True"
                ItemClick="NavigationListView_ItemClick"
                >
                <ListView.ItemContainerStyle>
                    <Style TargetType="ListViewItem">
                        <Setter Property="HorizontalContentAlignment" Value="Stretch" />
                    </Style>
                </ListView.ItemContainerStyle>
            </ListView>

        </Grid>   
     </NavigationView.MenuItems>

I also tried NavigationViewList instead of my ListView but it is not helping.

Answer 1

But I also have a MenuItemHeader which disappears after using your solution

To get both NavigationViewItem and NavigationViewItemHeader dynamically from list. You need to set the IEnumerable type to their base class NavigationViewItemBase. It Worked fine for me

<NavigationView  MenuItemsSource="{x:Bind Items,Mode=OneWay}"/>

//C# Code

 public sealed partial class MainPage : Page
 {
        public  IEnumerable<NavigationViewItemBase> Items { get; set; }
        private readonly NavigationViewItem Item1 = new NavigationViewItem() { Icon = new FontIcon() { Glyph = "\uEC06" }, Content = "Item1" };
        private readonly NavigationViewItem Item2 = new NavigationViewItem() { Icon = new FontIcon() { Glyph = "\uE13C" }, Content = "Item2" };
        private readonly NavigationViewItemHeader Header1 = new NavigationViewItemHeader() { Content = "Header1" };
        private readonly NavigationViewItem Item3 = new NavigationViewItem() { Icon = new FontIcon() { Glyph = "\uEC06" }, Content = "Item3" };
        private readonly NavigationViewItem Item4 = new NavigationViewItem() { Icon = new FontIcon() { Glyph = "\uE13C" }, Content = "Item4" };
        private readonly NavigationViewItemHeader Header2 = new NavigationViewItemHeader() { Content = "Header2" };
        public MainPage()
        {
            Items = GetItems();
            this.InitializeComponent();            
        }
        private IEnumerable<NavigationViewItemBase> GetItems()
        {
            yield return Header1;
            yield return Item1;
            yield return Item2;
            yield return Header2;
            yield return Item3;
            yield return Item4;
        }
  }

Answer 2

Check out MenuItemsSource dependency property, that its defined on the NavigationView class.

MainPage.cs :

public sealed partial class MainPage : Page
{
    public MainPage()
    {
        this.InitializeComponent();

        myItems = new List<string> { "item1", "item2", "item3" };
    }

    List<string> myItems { get; set; }
}

MainPage.xaml:

<NavigationView
    x:Name="NavView"
    MenuItemsSource="{x:Bind myItems}">
</NavigationView>

For the sake of simplicity, performed binding with x:Bind, and using the default OneTime mode seems appropriate.