带图标的 MenuItem 样式仅创建一个图标 [英] MenuItem style with icon creates only one icon

问题描述

我在为使用视图模型作为 ItemsSource 的动态菜单呈现图标时遇到问题.
此处概述了我使用的解决方案与 ViewModel 绑定的 MVVM 动态菜单 UI

Im having a problem rendering icons for a dynamic menu which uses viewmodels as an ItemsSource.
The solution I've used is outlined here MVVM Dynamic Menu UI from binding with ViewModel

基本布局如下

<Grid>
  <Grid.Resources>
    <HierarchicalDataTemplate DataType="{x:Type ViewModels:HeaderedItemViewModel}"
        ItemsSource="{Binding Path=Children}">
      <ContentPresenter RecognizesAccessKey="True"></ContentPresenter>
    </HierarchicalDataTemplate>
    <Style TargetType="{x:Type MenuItem}">
      <Setter Property="Header" Value="{Binding Path=Header}" />
      <Setter Property="InputGestureText" Value="{Binding Path=InputGestureText}" />
      <Setter Property="Command" Value="{Binding Path=Command}" />
      <Setter Property="Icon">
        <Setter.Value>
          <Image Source="{Binding Path=Icon}" Height="16px" Width="16px" />
        </Setter.Value>
      </Setter>
    </Style>
  </Grid.Resources>
  <Menu Grid.Row="0" ItemsSource="{Binding Path=Shell.Navigation.Menus}" />
</Grid>

在上述样式中，绑定Icon"是ImageSource".设置如下.

In the above style the binding 'Icon' is 'ImageSource'. This is set up as follows.

        BitmapImage image = null;

        if (!string.IsNullOrEmpty(imagePath))
        {
            image = new BitmapImage(new Uri(imagePath, UriKind.Relative));
            image.CacheOption = BitmapCacheOption.OnLoad;
            image.CreateOptions = BitmapCreateOptions.IgnoreImageCache;
        }
        var menu = new HeaderedItemViewModel
                       {
                           Header = header,
                           InputGestureText = inputGesture,
                           ImagePath = imagePath,
                           Icon = image,
                           Command = command,
                           IsEnabled = isEnabled
                       };

我遇到的问题是图标.
似乎一次只能渲染一个图标?这就是我的意思.

The problem I'm having is with the icons.
It seems only one icon will render at a time? Heres what I mean.

并打开下拉菜单...

一旦渲染了另一个图像，第一个图像就会消失?换句话说，只有最后一个图像是可见的.菜单中的所有图像都会发生这种情况.有什么想法吗?

As soon as another image is rendered the first one disappears? In other words only the last image is visible. This happens with all the images in the menu. Any ideas?

推荐答案

为您的 Icon 值添加 x:Shared=false.为此，您应该在资源中声明 Image:

Add x:Shared=false for your Icon value. To do that you should declare Image in resources:

<Grid>
  <Grid.Resources>

   <Image x:Key="imgCTX" x:Shared="false"
         Source="{Binding Path=Icon}" Height="16px" Width="16px"/>
    <HierarchicalDataTemplate DataType="{x:Type ViewModels:HeaderedItemViewModel}"
        ItemsSource="{Binding Path=Children}">
      <ContentPresenter RecognizesAccessKey="True"></ContentPresenter>
    </HierarchicalDataTemplate>
    <Style TargetType="{x:Type MenuItem}">
      <Setter Property="Header" Value="{Binding Path=Header}" />
      <Setter Property="InputGestureText" Value="{Binding Path=InputGestureText}" />
      <Setter Property="Command" Value="{Binding Path=Command}" />
      <Setter Property="Icon" Value="{StaticResource imgCTX}" />
    </Style>
  </Grid.Resources>
  <Menu Grid.Row="0" ItemsSource="{Binding Path=Shell.Navigation.Menus}" />
</Grid>

这篇关于带图标的 MenuItem 样式仅创建一个图标的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！