如何正确地将图标或图像添加到 Mahapp DropDownButton 内的每个菜单项 [英] How to correctly add icon or image to each menu item inside Mahapp DropDownButton

问题描述

我正在使用

如何将对象转换为图像?

解决方案

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

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

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

I am using Mahapp's DropDownButton

Here is what I have:

using

 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>

First I tried using:

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

But that code does not show any image. So then I tried:

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

Initializing the Object 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"}
};

having:

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

This shows image only for the last value on menu, I can´t figure out what I am missing. Why is it showing only image for last record?

I tested with all images and they are written correctly, they also do exist, so issue is not finding the image file .

Update

So I have tried using @mm8 solution and changed definition Class to:

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

    }

having 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>

and code behind:

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}
};

Result is:

How to convert object to Image?

解决方案

"This shows image only for the last value on menu" - Setter creates only one instance of Image, which can only be displayed in one place.

As a workaround you can declare Image as a non-shared resource, and use it via StaticResource in Setter:

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

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

这篇关于如何正确地将图标或图像添加到 Mahapp DropDownButton 内的每个菜单项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！