动态绑定NavigationViewItem＆amp;＆amp; UWP XAML中的NavigationViewItemHeader

Question

我想在我的NavigationViewItem中动态填充NavigationViewItemHeader和NavigationView。但是，我无法使其发挥作用。看起来我的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，但它没有帮助。

Answer 1

签出MenuItemsSource依赖属性，它在NavigationView类上定义。

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模式似乎是合适的。

Answer 2

  

但是我还有一个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;
        }
  }