装订用MenuItemsSource
有型号的可以参考一下官方代码示例 https://github.com/Microsoft/Xaml-Controls-Gallery/blob/master/XamlControlsGallery/ControlPages/NavigationViewPage.xaml#L15。在最新版本中,我们添加了有关设置数据源的新功能MenuItemsSource
。如果您想启用或禁用NavigationViewItem
,你可以使IsEnabled
模型中的属性然后绑定它。请检查以下代码。
XAML代码
<Page.Resources>
<local:MenuItemTemplateSelector x:Key="selector">
<local:MenuItemTemplateSelector.ItemTemplate>
<DataTemplate x:DataType="local:Category" >
<NavigationViewItem Content="{x:Bind Name}"
ToolTipService.ToolTip="{x:Bind Tooltip}"
IsEnabled="{x:Bind IsEnabled}" >
<NavigationViewItem.Icon>
<SymbolIcon Symbol="{x:Bind Glyph}" />
</NavigationViewItem.Icon>
</NavigationViewItem>
</DataTemplate>
</local:MenuItemTemplateSelector.ItemTemplate >
</local:MenuItemTemplateSelector>
</Page.Resources>
<Grid>
<NavigationView x:Name="nvSample"
MenuItemTemplateSelector="{StaticResource selector}"
MenuItemsSource="{x:Bind Categories, Mode=OneWay}" />
</Grid>
代码隐藏
public sealed partial class MainPage : Page
{
public MainPage()
{
this.InitializeComponent();
Categories = new ObservableCollection<CategoryBase>();
Categories.Add(new Category { Name = "Category 1", Glyph = Symbol.Home, Tooltip = "This is category 1", IsEnabled = false });
Categories.Add(new Category { Name = "Category 2", Glyph = Symbol.Keyboard, Tooltip = "This is category 2", IsEnabled = true });
Categories.Add(new Category { Name = "Category 3", Glyph = Symbol.Library, Tooltip = "This is category 3" , IsEnabled = false });
Categories.Add(new Category { Name = "Category 4", Glyph = Symbol.Mail, Tooltip = "This is category 4", IsEnabled = true });
}
public ObservableCollection<CategoryBase> Categories { get; set; }
}
public class CategoryBase { }
public class Category : CategoryBase
{
public string Name { get; set; }
public string Tooltip { get; set; }
public Symbol Glyph { get; set; }
public bool IsEnabled { get; set; }
}
public class Separator : CategoryBase { }
public class Header : CategoryBase
{
public string Name { get; set; }
}
[ContentProperty(Name = "ItemTemplate")]
class MenuItemTemplateSelector : DataTemplateSelector
{
public DataTemplate ItemTemplate { get; set; }
protected override DataTemplate SelectTemplateCore(object item)
{
return item is Separator ? SeparatorTemplate : item is Header ? HeaderTemplate : ItemTemplate;
}
internal DataTemplate HeaderTemplate = (DataTemplate)XamlReader.Load(
@"<DataTemplate xmlns='http://schemas.microsoft.com/winfx/2006/xaml/presentation'>
<NavigationViewItemHeader Content='{Binding Name}' />
</DataTemplate>");
internal DataTemplate SeparatorTemplate = (DataTemplate)XamlReader.Load(
@"<DataTemplate xmlns='http://schemas.microsoft.com/winfx/2006/xaml/presentation'>
<NavigationViewItemSeparator />
</DataTemplate>");
}
更新一
问题的关键是我们不能使用DataTemplate
1803年。一般来说,为了创造NavigationViewItem
在1803年我们经常使用以下解决方案。
Xaml
<NavigationView x:Name="nvSample" MenuItemsSource="{x:Bind NavItems}" >
</NavigationView>
代码隐藏
public ObservableCollection<Category> Categories { get; set; }
public MainPage()
{
this.InitializeComponent();
Categories = new ObservableCollection<Category>();
Categories.Add(new Category { Name = "Category 1", Glyph = Symbol.Home, Tooltip = "This is category 1", IsEnabled = false });
Categories.Add(new Category { Name = "Category 2", Glyph = Symbol.Keyboard, Tooltip = "This is category 2", IsEnabled = true });
Categories.Add(new Category { Name = "Category 3", Glyph = Symbol.Library, Tooltip = "This is category 3", IsEnabled = true });
Categories.Add(new Category { Name = "Category 4", Glyph = Symbol.Mail, Tooltip = "This is category 4", IsEnabled = true });
}
public IEnumerable<NavigationViewItemBase> NavItems
{
get
{
return Categories.Select(
b => (new NavigationViewItem
{
Content = b.Name,
Icon = new SymbolIcon(b.Glyph),
IsEnabled = b.IsEnabled,
})
);
}
}
简而言之,我们需要将数据模型转换为NavigationViewItem
。但1803内不使用DataTemplate。请尝试这个。更详细的你也可以参考这个case https://stackoverflow.com/questions/51020208/how-to-programmatically-select-a-bound-navigationviewitem-of-navigationview/51037976#51037976.