在UWP XAML中动态绑定NavigationViewItem和NavigationViewItemHeader

Question

我想在我的NavigationView中动态地填充NavigationViewItem和NavigationViewItemHeader。然而，我无法使其工作。看起来我的ListView只占用了一个项的空间。我该如何动态地创建新的项目？

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>

我也尝试过使用NavigationViewList替换我的ListView，但并没有起到帮助作用。

- J.Carden

---

你是如何定义books和getBooks()方法以及NavigationListViewItemTemplate的？请提供你的C#代码，否则我无法给你更多帮助。 - Xie Steven

Answer 1

但我也有一个MenuItemHeader，在使用您的解决方案后消失了

为了从列表中动态获取NavigationViewItem和NavigationViewItemHeader，您需要将IEnumerable类型设置为它们的基类NavigationViewItemBase。对我来说效果很好。

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

//C# 代码

 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;
        }
  }

- Vignesh

Answer 2

请查看定义在NavigationView类上的MenuItemsSource依赖属性。

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>

为了简单起见，使用 x:Bind 进行绑定，并使用默认的 OneTime 模式似乎是合适的。

- André B

---

我猜这不是我要找的，因为我已经为所有的菜单项设置了源。但是我还有一个菜单项标题，在使用你的解决方案后消失了。 - J.Carden