无法在 NavigationView MenuItemTemplate 中绑定 Icon 属性

Question

我尝试使用 a 是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.

问题是如何？

我已经尝试过这个（使用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（将 aNavigationViewItem放在 内DataTemplate），NavigationViewItem在可视化树中复制（一个嵌套在另一个中）：

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

Answer 1

这让我发疯！可悲的是，它似乎默认行为是内容MenuItemTemplate放在里面NavigationViewItem的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和添加两个Grid.Column属性设置负边距。

我已经在 Docs GitHub 上打开了一个问题，所以希望他们能更好地解释这种行为。