如何正确地为 Mahapps DropDownButton 中的每个菜单项添加图标或图像

How to correctly add icon or image to each menu item inside Mahapp DropDownButton

我正在使用Mahapp's DropDownButton

这是我的:

使用

 xmlns:mah="http://metro.mahapps.com/winfx/xaml/controls"

<mah:DropDownButton 
    Content="my button" 
    Icon="{DynamicResource appbar_projector_screen}"
    ItemsSource="{Binding Path=MySource}">
    <mah:DropDownButton.ItemContainerStyle>
        <Style TargetType="MenuItem">
            <Setter Property="Header" Value="{Binding Path=Title}"/>
            <Setter Property="Command" Value="{Binding Path=Command}"/>
            <Setter Property="CommandParameter" Value="{Binding Path=Id }"/>
            <Setter Property="Icon">
                <Setter.Value>
                    <Image Width="25" Height="25" Source="{Binding IconPath}" />
                </Setter.Value>
            </Setter>
        </Style>
    </mah:DropDownButton.ItemContainerStyle>
</mah:DropDownButton>

首先我尝试使用:

<Setter Property="Header">
    <Setter.Value>
        <StackPanel>
            <Image Width="20" Height="20" Source="{Binding IconPath}" />
            <TextBlock Text="{Binding Path=Title}" />
        </StackPanel>
    </Setter.Value>
</Setter>
                        

但是该代码不显示任何图像。然后我尝试了:

<Setter Property="Icon">
    <Setter.Value>
        <Image Width="25" Height="25" Source="{Binding IconPath}" />
    </Setter.Value>
</Setter>

正在初始化对象MySource:

public List<SomeDefinition> MySource{ get; private set; }

MySource= new List<SomeDefinition>
{
    new SomeDefinition{Id=1, Title= $@"1", Command = new RelayCommand<object>(SomeMethod1), IconPath = "D:\ico1.png"},
    new SomeDefinition{Id=2, Title= $@"2", Command = new RelayCommand<object>(SomeMethod2), IconPath = "D:\ico2.png"},
    new SomeDefinition{Id=3, Title= $@"3", Command = new RelayCommand<object>(SomeMethod3), IconPath = "D:\ico3.png"},
    new SomeDefinition{Id=4, Title= $@"4", Command = new RelayCommand<object>(SomeMethod4), IconPath = "D:\ico4.png"},
    new SomeDefinition{Id=5, Title= $@"5", Command = new RelayCommand<object>(SomeMethod5), IconPath = "D:\ico5.png"}
};

拥有:

public class SomeDefinition
    {
        public int Id { get; set; }
        public string Title{ get; set; }
        public ICommand Command { get; set; }
        public string IconPath { get; set; }
    }

这显示图像 仅针对菜单上的最后一个值 ,我不知道我遗漏了什么。为什么它只显示最后一条记录的图像?

我测试了所有图像,它们都正确写入,它们也确实存在,所以问题是找不到图像文件。

更新

所以我尝试使用@mm8 解决方案并将定义 Class 更改为:

public class SomeDefinition
    {
        public int Id { get; set; }
        public string Title{ get; set; }
        public ICommand Command { get; set; }
        public Image IconImage { get; set; }

    }

拥有xaml:

<mah:DropDownButton 
    Content="my button" 
    Icon="{DynamicResource appbar_projector_screen}"
    ItemsSource="{Binding Path=MySource}">
    <mah:DropDownButton.ItemContainerStyle>
        <Style TargetType="MenuItem">
            <Setter Property="Header" Value="{Binding Path=Title}"/>
            <Setter Property="Command" Value="{Binding Path=Command}"/>
            <Setter Property="CommandParameter" Value="{Binding Path=Id }"/>
            <Setter Property="Icon" Value="{Binding IconImage}" />          
        </Style>
    </mah:DropDownButton.ItemContainerStyle>
</mah:DropDownButton>

和后面的代码:

var Image = new Bitmap(@"D:\1.png");



MySource = new List<SomeDefinition>
{
    new SomeDefinition{Id=1, Title= $@"1", Command = Command1, IconImage = Image},
    new SomeDefinition{Id=2, Title= $@"2", Command = Command2, IconImage = Image},
    new SomeDefinition{Id=3, Title= $@"3", Command = Command3, IconImage = Image},
    new SomeDefinition{Id=4, Title= $@"4", Command = Command4, IconImage = Image},
    new SomeDefinition{Id=5, Title= $@"5", Command = Command5, IconImage = Image}
};

结果是:

如何将对象转换为图像?

"This shows image only for the last value on menu" - Setter只创建一个Image实例,只能显示在一个地方

作为解决方法,您可以将图像声明为非共享资源,并通过 Setter 中的 StaticResource 使用它:

<Image x:Key="StdIcon" x:Shared="False" Width="25" Height="25" Source="{Binding IconPath}" />

<Setter Property="Icon" Value="{StaticResource StdIcon}"/>