带图标的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.

然后打开下拉菜单...

And opening the dropdown menu ...

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

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屋！