.net - 无法在 NavigationView MenuItemTemplate 中绑定(bind) 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属性来装饰文本。

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

通知:我真的不想手动添加图标作为 MenuItemTemplate 的一部分因为这不是它应该的方式。我需要的是绑定(bind)隐式生成 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 内的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特性。

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