如何正确地为 Mahapps DropDownButton 中的每个菜单项添加图标或图像
How to correctly add icon or image to each menu item inside Mahapp 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}"/>
这是我的:
使用
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}"/>