How to define MenuItems with Icons as Templates in App.xaml - wpf

Question

In my apps, I have a lot context menus. Most of them contain a lot of standard entries such as menu items for the cut, copy and the paste command. Every menu has an attached icon.
How do I define a style for each type of MenuItem which is application wide available? The following xaml is principally what I’m looking for, however the declaration of the image is invalid (if by hazard an instance of the style is used at more than one position at the same time, the image will not be shown).
<Style x:Key="CutMenuItem_Style" TargetType="{x:Type MenuItem}" >
<Setter Property="Command" Value="Cut"/>
<Setter Property="Header" Value="Cut"/>
<Setter Property="Icon" >
<Setter.Value>
<Image Source="/image/cut_16_16.png" Stretch="None" />
</Setter.Value>
</Setter>
</Style>
How do you do this? Do you declare a ControlTemplate for each menu-type?
Please note: I understand why the above xaml does not work as expected. I’m interested in an alternative and reliable way to do the same as I have intended with the above code.

Answer 1

I'm not sure if this will work or not (haven't tested it), but I'm intrigued by the possibility that you could some something like this:
class MyMenuItem
{
public ICommand Command { get; set; }
public string Header { get; set; }
public ImageSource ImageSource { get; set; }
}
var cutMenuItem = new MyMenuItem()
{
Command = ...,
Header = "Cut",
ImageSource = ...
};
And then use DataTemplates:
<DataTemplate DataType="{x:Type local:MyMenuItem}">
<MenuItem Command="{Binding Command}" Header="{Binding Header}"
Icon="{Binding ImageSource}" />
</MenuItem>
</DataTemplate>
And then your menu:
<Menu ItemsSource="{Binding ListOfMyMenuItems}" />

Answer 2

A possibility is to use a IValueConverter which converts RoutedCommands to Images. The IValueConverter can be used then in the global styles.
The XAML looks as follows:
<Style x:Key="MenuItemBase_Style" TargetType="{x:Type MenuItem}">
<Setter Property="Icon" Value="{Binding Command,Converter={StaticResource CommandImage_ValueConverter},RelativeSource={RelativeSource Mode=Self}}"/>
</Style>
<Style x:Key="CutMenuItem_Style" BasedOn="{StaticResource MenuItemBase_Style}" TargetType="{x:Type MenuItem}" >
<Setter Property="Command" Value="Cut"/>
</Style>
<Style x:Key="CopyMenuItem_Style" BasedOn="{StaticResource MenuItemBase_Style}" TargetType="{x:Type MenuItem}" >
<Setter Property="Command" Value="Copy"/>
</Style>
<Style x:Key="AnotherMenuItem_Style" ... />
The IValueConverter is simple but can be extended also for other things. I have written it so, that you can provide a Style as a parameter. This is usefull if you want to manipulate the returned Image.
public class CommandImageValueConverter : IValueConverter{
public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture) {
if (value == null) return null;
var cmd = value as RoutedCommand;
if (null != cmd) {
var uri = new Uri("/YourComponent;component/Image/" + cmd.Name + "_16_16.png", UriKind.Relative);
return new Image() { Stretch = Stretch.None ,Source=Load(uri),Style=parameter as Style};
}
throw new NotImplementedException("Conversion from " + value.GetType().Name + " is currently not supported");
}
public static ImageSource Load(Uri uri) {
BitmapImage bi = new BitmapImage();
bi.BeginInit();
bi.UriSource = uri;
bi.EndInit();
return bi;
}
public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture) {
throw new NotImplementedException();
}
}
The IValueConverter must be also be declared once:
<yourNamespace:CommandImageValueConverter x:Key="CommandImage_ValueConverter"/>
Hope this helps someone else.