UWP - 有两个不同来源的导航视图

Question

我有一个 ObservableCollection<Category> 绑在 NavigationView，其中 Category 是一个自定义类，实现了 INotifyPropertyChanged. 我创建了一个 DataTemplate 来显示该集合的元素

<DataTemplate x:Key="CategoryTemplate">
    <NavigationViewItem  Icon="{Binding Icon}" RightTapped="CategoryItem_RightTapped">
        <local:CategoryViewItem CategoryItem="{Binding Mode=TwoWay}"/>
    </NavigationViewItem>
</DataTemplate>

现在我想添加一些默认的 NavigationViewItem 和a NavigationViewItemSeparator 榜首 DataTemplate 保持第二部分 "可观察 "和 "通知属性变化"。你可以在下面的图片中看到我的意思的一个例子。

Answer 1

对于你的需求，你需要使 MenuItemTemplateSelector 对于 NavigationView. 并通过不同的 DataTemplate 基于数据源。

默认的NavigationViewItem和NavigationViewItemSeparator数据模型。

public class CategoryBase { }

public class DefaultCategory: CategoryBase
{
    public string Name { get; set; }
    public string Tooltip { get; set; }
    public Symbol Glyph { get; set; }
}
public class CustomCategory : CategoryBase
{
    public SymbolIcon Icon { get; set; }
    public string Title { get; set; }
}

public class Separator : CategoryBase { }

MenuItemTemplateSelector

public class MenuItemTemplateSelector : DataTemplateSelector
{
    internal DataTemplate SeparatorTemplate = (DataTemplate)XamlReader.Load(
        @"<DataTemplate xmlns='http://schemas.microsoft.com/winfx/2006/xaml/presentation'>
                <NavigationViewItemSeparator />
              </DataTemplate>");
    public DataTemplate DefaultItemTemlate { get; set; }
    public DataTemplate CustomItemTemlate { get; set; }
    protected override DataTemplate SelectTemplateCore(object item)
    {
        return item is Separator ? SeparatorTemplate : item is CustomCategory ? CustomItemTemlate : DefaultItemTemlate;
    }
}

Xaml代码

<Page.Resources>
    <local:MenuItemTemplateSelector x:Key="selector">
        <local:MenuItemTemplateSelector.DefaultItemTemlate>
            <DataTemplate x:DataType="local:DefaultCategory">
                <NavigationViewItem Content="{x:Bind Name}">
                    <NavigationViewItem.Icon>
                        <SymbolIcon Symbol="{x:Bind Glyph}" />
                    </NavigationViewItem.Icon>
                </NavigationViewItem>
            </DataTemplate>
        </local:MenuItemTemplateSelector.DefaultItemTemlate>
        <local:MenuItemTemplateSelector.CustomItemTemlate>
            <DataTemplate>
                <NavigationViewItem Icon="{Binding Icon}">
                    <TextBlock Text="{Binding Title}" />
                </NavigationViewItem>
            </DataTemplate>
        </local:MenuItemTemplateSelector.CustomItemTemlate>
    </local:MenuItemTemplateSelector>
</Page.Resources>
<Grid>
    <NavigationView
        x:Name="nvSample"
        MenuItemTemplateSelector="{StaticResource selector}"
        MenuItemsSource="{x:Bind Categories, Mode=OneWay}"
        />
    <Button Click="Button_Click" Content="AddItem" />
</Grid>

使用方法

public MainPage()
{
    this.InitializeComponent();
    Categories = new ObservableCollection<CategoryBase>();
    Categories.Add(new CustomCategory { Title = "This is Titlte", Icon = new SymbolIcon(Symbol.Play) });
}
public ObservableCollection<CategoryBase> Categories { get; }

private void Button_Click(object sender, RoutedEventArgs e)
{
    Categories.Insert(0, new Separator());
    Categories.Insert(0, new DefaultCategory { Name = "Category 1", Glyph = Symbol.Home, Tooltip = "This is category 1" });

}

你可以找到 代码示例 此处 NavigationView 文件 你可以参考。