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?

Solution 1

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

1. Open "Properties" for your project
2. Select Vertical-tab Resources
3. Choose Images from the left ComboBox
4. Choose "Add Resource -> Add Existing File..." from the right ComboBox
5. 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)
6. Select properties on your newly added Resource Image
7. In properties, set Build Action to Resource
8. 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 symbol on the Source Property and all available Image resources will be displayed.

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.

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>

Solution 2

You could add this, to the Menu.Icon.

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