19

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?

Gilad Naaman
  • 6,390
  • 15
  • 52
  • 82
  • @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

2 Answers2

38

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 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>
Fredrik Hedblad
  • 83,499
  • 23
  • 264
  • 266
2

You could add this, to the Menu.Icon.

<Image>
  <Image.Source>
    <BitmapImage UriSource="/ASSEMBLYNAME;component/PATH/IMAGE.png" />
  </Image.Source>
<Image>
Jason
  • 1,879
  • 16
  • 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