.net - 无法在 NavigationView MenuItemTemplate 中绑定(bind) Icon 属性

我尝试使用 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 在可视化树中被复制(一个嵌套到另一个中):



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

最佳答案

这让我发疯!可悲的是，似乎默认行为是 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，所以希望他们能更好地解释这种行为。

关于.net - 无法在 NavigationView MenuItemTemplate 中绑定(bind) Icon 属性，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/49255333/