我正在尝试制作NavigationViewMenu,并且我需要一个菜单,其布局如下
静态首页项目
静态标题
数据库中的动态元素作为项目
静态标题
静态项目集
这是我尝试的:
<NavigationView.MenuItems>
<NavigationViewItem Icon="Home" Content="Home" Tag="home" />
<NavigationViewItemSeparator />
<NavigationViewItemHeader Content="My Stuff"/>
<NavigationViewList ItemsSource="{x:Bind MyStuff}">
<NavigationViewList.ItemTemplate>
<DataTemplate x:DataType="local:MyModel">
<NavigationViewItem Icon="Pictures" Content="{x:Bind Name}" Tag="{x:Bind Tag}" />
</DataTemplate>
</NavigationViewList.ItemTemplate>
</NavigationViewList>
<!-- Static equivalent to the above:
<NavigationViewItem Icon="Pictures" Content="Woop" Tag="foos"/>
<NavigationViewItem Icon="Pictures" Content="Doop" Tag="foos"/>
<NavigationViewItem Icon="Pictures" Content="Loop" Tag="foos"/>
-->
<NavigationViewItemHeader Content="Other Stuff"/>
<NavigationViewItem Icon="Pictures" Content="Foos" Tag="foos"/>
<NavigationViewItem Icon="ContactInfo" Content="Bars" Tag="bars"/>
<NavigationViewItem Icon="SwitchApps" Content="Bazes" Tag="bazes"/>
</NavigationView.MenuItems>
这就是我得到的:
这就是我想要的:
*ngFor
在UWP的XAML中,有什么像Angular一样好实用吗?
我遇到了相同的行为,并设法找到了解决方法。就我而言,我有两个菜单项列表(动态数据绑定项),并且我想在两个菜单项NavigationViewItemHeader
(静态项)的顶部使用。我尝试使用aNavigationViewList
并遇到了你的问题。
用C#代码创建菜单项列表。该列表的元素可以是视图模型和任何静态导航项(标题,分隔符等)的混合。然后,使用DataTemplateSelector将数据绑定到你的视图模型,或者将导航项保持不变。
在后面的C#代码中,创建菜单项的可枚举(或 Observable 的集合)。就我而言SomeCollection
,AnotherCollection
代表要绑定到NavigationView的数据源。我必须键入它,object
因为它是我的视图模型和内置的UWP导航项类型的混合。
private IEnumerable<object> MenuItems()
{
yield return new NavigationViewItemHeader { Content = "Some List" };
foreach (var some in SomeCollection)
{
yield return some;
}
yield return new NavigationViewItemHeader { Content = "Another List" };
foreach (var another in AnotherCollection)
{
yield return another;
}
}
// somewhere else, like in your Page constructor or a CollectionChanged handler
this.NavigationList = MenuItems().ToList();
其次,创建一个数据模板选择器以在模板和导航项目之间切换:
class NavigationItemTemplateSelector : DataTemplateSelector
{
public DataTemplate ViewModelTemplate{ get; set; }
public DataTemplate NavigationItemTemplate { get; set; }
protected override DataTemplate SelectTemplateCore(object item)
{
return item is MyViewModel
? ViewModelTemplate
: NavigationItemTemplate;
}
}
最后,更改你的名称NavigationView
以引用模板选择器和菜单项源。该NavigationItemTemplate
只是一个传递,和你ViewModelTemplate
将有正常的视图模型的项目绑定逻辑。
<Page.Resources>
<DataTemplate x:Key="ViewModelTemplate" x:DataType="local:MyViewModel">
<TextBlock Text="{x:Bind SomeProperty}" />
</DataTemplate>
<DataTemplate x:Key="NavigationItemTemplate">
</DataTemplate>
<local:NavigationItemTemplateSelector x:Key="NavigationItemTemplateSelector"
ViewModelTemplate="{StaticResource ViewModelTemplate}"
NavigationItemTemplate="{StaticResource NavigationItemTemplate}" />
</Page.Resources>
<NavigationView
MenuItemsSource="{x:Bind NavigationList, Mode=OneWay}"
MenuItemTemplateSelector="{StaticResource NavigationItemTemplateSelector}">
<Frame x:Name="ContentFrame"></Frame>
</NavigationView>