Menu Icons in WPF
As part of my WPF experiments, in the last one I posted how to Add shortcuts in WPF menus. I this post I am adding Icons to WPF menu.
Upto .Net 2.0, to display icons in menus, we need add a menu strip to the form, right click on the menuitem and select “Set Image”, it will popup a window, where we can select the Image and it will automatically updated in menu.
But in WPF there is not “Set Image” menu item in the right click and the properties window, it is a Textbox. After few googling I found a solution.
<Grid>
<Grid.Resources>
<!-- Here I am loading all the Images -->
<Image x:Key="folder" Source="Icons/folder.ico" Height="16" Width="16" />
<Image x:Key="Open" Source="Icons/Open16x16.ico" Height="16" Width="16" />
<Image x:Key="Save" Source="Icons/Save16x16.ico" Height="16" Width="16" />
</Grid.Resources>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Menu Grid.Row="0" >
<MenuItem Header="_File">
<MenuItem Header="_Open" Icon="{StaticResource Open}" />
<MenuItem Header="Open _Folder" Icon="{StaticResource folder}" />
<Separator />
<MenuItem Header="_Save" Icon="{StaticResource Save}" />
</MenuItem>
</Menu>
<Image Grid.Row="1" />
</Grid>
Screenshot, which displaying Icons on menu items
Please not if you not set the Height and Width properties, in Resources, the Icons will grow automatically, to the full window 
Update : You can set the application Icon or the Window Icon by simple markup like this
<window x:Class="Window1" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:winfx="http://schemas.microsoft.com/winfx/2006/xaml" Title="Icons in Menu" Height="300" Width="300" Icon="Icons/folder.ico">
No Responses to “Menu Icons in WPF”
RSS feed for comments on this post. TrackBack URL
I considered it a hassle to define a Resource first somewhere else, then use a Binding for something as basic as displaying an icon for a MenuItem.
So, I created a custom markup extension for myself for this purpose, and am sharing it here, as it might be useful to others:
_
Public Class MenuIconExtension
Inherits MarkupExtension
Private _source As ImageSource
Private _width As Nullable(Of Double)
Private _height As Nullable(Of Double)
Public Sub New(ByVal source As ImageSource)
Me._source = source
End Sub
Public Overrides Function ProvideValue(ByVal serviceProvider As System.IServiceProvider) As Object
Dim img As New Image
img.Source = Me.source
img.Stretch = Stretch.Fill
img.Width = Me.width
img.Height = Me.height
Return (img)
End Function
Public Property source() As ImageSource
Get
Return (Me._source)
End Get
Set(ByVal value As ImageSource)
Me._source = value
End Set
End Property
Public Property width() As Double
Get
Return (If(Me._width Is Nothing, 16, Me._width.Value))
End Get
Set(ByVal value As Double)
Me._width = value
End Set
End Property
Public Property height() As Double
Get
Return (If(Me._height Is Nothing, 16, Me._height.Value))
End Get
Set(ByVal value As Double)
Me._height = value
End Set
End Property
End Class
To use it:
Comment by Rahul Singla — February 4, 2009 @ 2:18 pm
To use the above Markup extension:
Comment by Rahul Singla — February 4, 2009 @ 2:19 pm
Thanks Rahul. Thanks for the information. I will try to update the post with your code.
Regards
Anuraj
Comment by anuraj — February 4, 2009 @ 2:36 pm
thanks it is usefully for beginner.
Comment by anhduc.bkhn — September 16, 2009 @ 5:27 pm
Thank you
Comment by anuraj — September 17, 2009 @ 6:43 pm
How about:
Comment by Jeroen Wernsen — September 21, 2009 @ 11:50 am
(Second attempt)
How about:
<MenuItem Header=”Edit”>
<MenuItem.Icon>
<Image Source=”Icons\Small\edit.png”/>
</MenuItem.Icon>
</MenuItem>
Comment by Jeroen Wernsen — September 21, 2009 @ 12:23 pm
Thanks Jeroen
Comment by anuraj — September 21, 2009 @ 11:22 pm