无法在 NavigationView MenuItemTemplate 中绑定 Icon 属性 [英] Cannot bind Icon property in NavigationView MenuItemTemplate

问题描述

我尝试使用 NavigationView 因为它看起来非常有用，但我正在努力使其与 MVVM 模式一起工作.

I've tried to use a NavigationView because it looks very useful, but I'm struggling to make it work with the MVVM pattern.

我已经在这个片段中附加了 MenuItemsSource 属性:

I've attached the MenuItemsSource property like in this snippet:

<Page x:Class="App5.MainPage"
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      xmlns:local="using:App5"
      ...>

    <Page.DataContext>
        <local:MainViewModel></local:MainViewModel>
    </Page.DataContext>

    <NavigationView MenuItemsSource="{Binding Items}">
        <NavigationView.MenuItemTemplate>
            <DataTemplate>
                <TextBlock Text="{Binding Name}" />
            </DataTemplate>
        </NavigationView.MenuItemTemplate>
    </NavigationView>
</Page>

我得到的只是这个:

这很酷，但是 NavigationViewItem 有一个 Icon 属性来装饰文本.

That's cool, but NavigationViewItem has a Icon property to decorate the text with it.

如何根据绑定到每个NavigationViewItem的项目设置图标?

How do I set the icon depending on the item bound to each NavigationViewItem?

注意:我真的不想手动添加图标作为 MenuItemTemplate 的一部分，因为它不是它应该的方式.我需要的是绑定隐式生成的 NavigationViewItems 的 Icon 属性.

NOTICE: I really don't want to manually add the icon as part of the MenuItemTemplate because it's not the way it's supposed to be. What I need is to BIND the Icon property of the implicitly generated NavigationViewItems.

问题是如何?

我已经尝试过这个(使用MenuItemContainerStyle)，但它不起作用:

I've tried with this (using the MenuItemContainerStyle), but it doesn't work:

<NavigationView MenuItemsSource="{Binding Items}">
    <NavigationView.MenuItemContainerStyle>
        <Style TargetType="NavigationViewItem">
            <Setter Property="Icon" Value="{Binding Converter={StaticResource ItemToIconConverter}}" />
        </Style>
    </NavigationView.MenuItemContainerStyle>
    <NavigationView.MenuItemTemplate>
        <DataTemplate>
            <TextBlock Text="{Binding Name}" />
        </DataTemplate>
    </NavigationView.MenuItemTemplate>
</NavigationView>

注意:使用下面的答案中建议的 XAML(将 NavigationViewItem 放在 DataTemplate 中)，NavigationViewItem 在可视化树中重复(一个嵌套在另一个中):

NOTE: With the XAML suggested in the answer below (putting a NavigationViewItem inside the DataTemplate), the NavigationViewItem is duplicated in the visual tree (one nested into another):

这不是解决方案.此外，它的外观和行为都很糟糕.查看建议解决方案的快照:

It's not a solution. Moreover, it looks and behaved badly. Take a look to this snapshot of the suggested solution:

推荐答案

这让我很生气！可悲的是，似乎默认行为是 MenuItemTemplate 的内容放在 NavigationViewItem 的 ContentPresenter 中.

This was driving me mad! Sadly, it seems the default behaviour is that the contents of MenuItemTemplate are placed inside the NavigationViewItem's ContentPresenter.

我解决这个问题的方法是复制NavigationViewItem的默认样式的相关部分，并稍微修改一下:

The way I got around this was to copy the relevant part of the default style for NavigationViewItem, and modify it slightly:

<NavigationView.MenuItemTemplate>
    <DataTemplate>
        <Grid HorizontalAlignment="Left"
              Height="40"
              Margin="-16,0,0,0">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="48" />
                <ColumnDefinition Width="*" />
            </Grid.ColumnDefinitions>
            <Viewbox Grid.Column="0"
                     Margin="16,12">
                <SymbolIcon Symbol="{x:Bind Icon}" />
            </Viewbox>
            <ContentPresenter Content="{x:Bind Name}"
                              Grid.Column="1"
                              VerticalAlignment="Center"/>
        </Grid>
    </DataTemplate>
</NavigationView.MenuItemTemplate>

修改包括为 Grid 设置负边距并添加两个 Grid.Column 属性.

The modification has included setting negative margin for the Grid and adding the two Grid.Column properties.

我已经在 Docs GitHub 上打开了一个问题，希望他们会更好地解释行为.

I've opened an issue on the Docs GitHub so hopefully they will explain the behaviour better.

这篇关于无法在 NavigationView MenuItemTemplate 中绑定 Icon 属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！