无法在NavigationView MenuItemTemplate中绑定Icon属性

Question

我尝试使用NavigationView，因为它看起来非常有用，但我很难让它与MVVM模式一起使用。

我已经附加了MenuItemsSource属性，就像在此代码段中一样：

<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属性来用它来装饰文本。

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

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

问题是如何？

我已经尝试过这个（使用MenuItemContainerStyle），但它不起作用：

<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在可视树中重复显示（一个嵌套到另一个）：

这不是解决方案。而且，它看起来很糟糕。请查看建议解决方案的快照：

Answer 1

这让我很生气！遗憾的是，似乎默认行为是MenuItemTemplate的内容放在NavigationViewItem的{​​{1}}内。

我解决这个问题的方法是复制ContentPresenter的默认样式的相关部分，并稍微修改它：

NavigationViewItem

修改包括为<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属性。

我已经打开了an issue on the Docs GitHub，所以希望他们会更好地解释这种行为。

Answer 2

你声明你不想手动添加图标作为// Controls whether the editor should render indent guides "editor.renderIndentGuides": false, 的一部分，因为它不是它认为的方式（这是绝对正确的），但你实际上是设置菜单项的文本完全相同（手动添加MenuItemTemplate而不是设置菜单项的TextBlock属性）。

Content会覆盖自动创建的任何TextBlock，因此不会显示图标元素（NavigationItemView只包含文字，没有图标）。

尝试简单地使用TextBlock作为模板：

NavigationViewItem