How to get an image from a resource file into an WPF menuitem.icon

Question

I have the following piece of code (XAML C#):

        <Menu IsMainMenu="True" DockPanel.Dock="Top">
            <MenuItem Name="fileMenu" Header="_File" />
            <MenuItem Name="editMenu" Header="_Edit" />
            <MenuItem Name="setupMenu" Header="_Setup">
                <MenuItem Header="_Language">
                    <MenuItem.Icon> 
                         //I want to insert image here
                    </MenuItem.Icon>
                </MenuItem>
            </MenuItem>
            <MenuItem Name="helpMenu" Header="_Help" />
        </Menu>

And a resource file named images.resx containing an image called lang.png. How can I insert the image as an icon for the Menu-Item? Is there a better way?

@UuDdLrLrSs thank you! I've been waiting 10 years for this exact moment! Finally I am free from my flesh prison! — Gilad Naaman, Feb 08 '20 at 17:21
If you are referring to the"does this answer your question" text, the system puts that in there automatically when a question is flagged as a potential duplicate. I didn't write that myself. — StayOnTarget, Feb 09 '20 at 21:44

score 37 · Accepted Answer · answered Nov 26 '10 at 15:28

As Jason said, it's better to add your images as Resources to your project.

Open "Properties" for your project
Select Vertical-tab Resources
Choose Images from the left ComboBox
Choose "Add Resource -> Add Existing File..." from the right ComboBox
Locate the Image you would like to use, e.g "C1.png" (it will automatically be copied to the Resources folder in the root of your project)
Select properties on your newly added Resource Image
In properties, set Build Action to Resource
Open the designer for the .xaml file containing the Menu and add an Image in MenuItem.Icon and then place the cursor on Image.

xaml

<Menu IsMainMenu="True" DockPanel.Dock="Top"> 
    <MenuItem Name="fileMenu" Header="_File" /> 
    <MenuItem Name="editMenu" Header="_Edit" /> 
    <MenuItem Name="setupMenu" Header="_Setup"> 
        <MenuItem Header="_Language"> 
            <MenuItem.Icon>  
                 <Image/>
            </MenuItem.Icon> 
        </MenuItem> 
    </MenuItem> 
    <MenuItem Name="helpMenu" Header="_Help" /> 
</Menu>

From properties you can now select the alt text symbol on the Source Property and all available Image resources will be displayed.

alt text

From this dialog you can also choose "Add", locate an image file on the disk and all the above steps will be made for you by Visual Studio.

alt text

The resulting uri for the Image.Source in xaml will look something like this (which ofcourse also can be added by hand)

<Menu IsMainMenu="True" DockPanel.Dock="Top">
    <MenuItem Name="fileMenu" Header="_File" />
    <MenuItem Name="editMenu" Header="_Edit" />
    <MenuItem Name="setupMenu" Header="_Setup">
        <MenuItem Header="_Language">
            <MenuItem.Icon>
                <Image Source="/MenuIconImage;component/Resources/C1.png" />
            </MenuItem.Icon>
        </MenuItem>
    </MenuItem>
    <MenuItem Name="helpMenu" Header="_Help" />
</Menu>

Thanks for both of you! got it! – Gilad Naaman Nov 26 '10 at 23:15 — Gilad Naaman, Nov 26 '10 at 23:15
Thanks for the detail here! – Kevin Moore Apr 25 '19 at 19:51 — Kevin Moore, Apr 25 '19 at 19:51

score 2 · Answer 2 · answered Nov 26 '10 at 12:19

2

You could add this, to the Menu.Icon.

<Image>
  <Image.Source>
    <BitmapImage UriSource="/ASSEMBLYNAME;component/PATH/IMAGE.png" />
  </Image.Source>
<Image>

answered Nov 26 '10 at 12:19

Jason

1,799
15
19

What is the path? the name of the resource file? or the resource directory? – Gilad Naaman Nov 26 '10 at 12:21
Sorry, I didn't explain better. I think the better way is to not place the images in the RESX file and just add them to your project as resources. This will allow you to use the code above. – Jason Nov 26 '10 at 13:02

How to get an image from a resource file into an WPF menuitem.icon

2 Answers2

Linked

Related