带有图标的数据绑定菜单 [英] Databound menu with icons

问题描述

我在下面给出了一个简单的标记。

I have a simple markup given below. DataContext is assigned at run-time.

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto" />
        <RowDefinition Height="Auto" MinHeight="5" />
        <RowDefinition Height="*" />
        <RowDefinition Height="Auto" MinHeight="5" />
        <RowDefinition Height="Auto" />
    </Grid.RowDefinitions>

    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto" MinWidth="5" />
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="Auto" MinWidth="5" />
    </Grid.ColumnDefinitions>

    <Menu Name="GlobalMenu" Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="3">
        <Menu.ItemContainerStyle>
            <Style TargetType="MenuItem" BasedOn="{StaticResource {x:Type MenuItem}}">
                <Setter Property="Header" Value="{Binding Text}" />
                <Setter Property="Icon">
                    <Setter.Value>
                        <Image Source="{Binding Image}" />
                    </Setter.Value>
                </Setter>
                <Setter Property="ItemsSource" Value="{Binding Children}" />
            </Style>
        </Menu.ItemContainerStyle>
    </Menu>
</Grid>

问题在于菜单项图标仅在第一次淹没。因此，菜单项仍然存在，文本在那里，我可以通过更改绑定的DataContext对象来更改菜单项的文本，因此绑定通常有效，但是未绘制图标。由于图标要大一些，因此我注意到不仅没有绘制图标，而且菜单项的大小缩小了，就像根本没有图标一样。

The problem is that menu item icons are drwn only for the first time. So menu items still exist, text is there, I'm able to change menu item text by changing bound DataContext object, so binding generally works, but icon is not drawn. Since icons are a little bigger, I notice that not only icon is not drawn, but menu item shrinks in size, like there is no icon at all.

Icon属性绑定对象看起来像这样

Icon property on bound object looks like this

    public BitmapImage Image
    {
        get
        {
            byte[] image = _widget.CommandRelation.Command.Element.Image;

            if (image == null)
            {
                return null;
            }

            BitmapImage bitmapImage = new BitmapImage();

            using (MemoryStream stream = new MemoryStream(image))
            {
                bitmapImage.BeginInit();
                bitmapImage.CacheOption = BitmapCacheOption.OnLoad;
                bitmapImage.StreamSource = stream;
                bitmapImage.EndInit();
            }

            return bitmapImage;
        }
    }

推荐答案

如果您以 Style 创建对象时，只会为使用该样式的所有对象创建一个实例，这不会这样做，因为UI元素不能在多个地方使用

If you create objects in a Style only one instance is created for all objects which use the style, this won't do as UI-elements can not be used in more than one place.

您可以将Image声明放在一些（已编译的）资源字典中，该字典可从 Style 所在的位置访问。使用（未编译 Style.Resources ，因此很遗憾，该方法不起作用）并设置 x：Shared 上的 false ，这样，当您通过 StaticResource 在 Setter.Value 中引用它时，每次且每个 MenuItem 获得自己的图标。

You can put the Image declaration in some (compiled) resource dictionary which is accessible from where the Style is used (Style.Resources are not compiled, so that will unfortunately not work) and set x:Shared on it to false, that way when you reference it in the Setter.Value via StaticResource a new instance is created every time and every MenuItem gets its own icon.

例如试试这个：

<Menu Name="GlobalMenu" Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="3">
    <Menu.Resources>
        <Image x:Key="Icon" x:Shared="False" Source="{Binding Image}" />
    </Menu.Resources>
    <Menu.ItemContainerStyle>
        <Style TargetType="MenuItem" BasedOn="{StaticResource {x:Type MenuItem}}">
            <Setter Property="Header" Value="{Binding Text}" />
            <Setter Property="Icon" Value="{StaticResource Icon}"/>
            <Setter Property="ItemsSource" Value="{Binding Children}" />
        </Style>
    </Menu.ItemContainerStyle>
</Menu>

这篇关于带有图标的数据绑定菜单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！