WPF menu item with image

Question

How to define MenuItem.Icon so that the MenuItemHeader text would be placed below the menu item image?Thanks for help!

Caesar

Answer 1

The easy way way is to not use the Icon property but to instead put the icon in the Header:

<Menu>
  <MenuItem>
    <MenuItem.Header>
      <StackPanel>
        <Image Width="20" Height="20" Source="/XSoftArt.WPFengine;component/Images/export32x32xp.png" />
        <ContentPresenter Content="Reports" />
      </StackPanel>
    </MenuItem.Header>
  </MenuItem>
  <MenuItem Header="Export" />
  <MenuItem Header="New record" />
</Menu>

For this simple case the <ContentPresenter Content="Reports" /> can be replaced with a <TextBlock Text="Reports" /> because that's what ContentPresenter would use to present the string anyway. For more complex Header=, you could use the ContentPresenter as shown.

Chopper

The answer below is easier and uses the Icon property? – Coverture

@AlexHopeO'Connor the answer below is also wrong, if you would read the question the OP asked in text and not title. Additional you could have noticed that the answer below isn't any different than the code the OP provided himself. He clearly asked how to display text below the image and not that the image is next to it, BELOW. That's why this answer sets a stackpanel inside the header with its default Orientation of vertical. – Mosera

I tried this and get an error along the lines of "object belongs to another object in the visual tree". The straight assigning an image to the icon below worked for me. – Avra

This answers OPs question, but if you are like me you just want to know how to add an icon/image to a menuItem then see the answer from DanielE below. – Lieberman

This is a good solution since it combines an image and text in the header which leaves the menu checkmark (in the menu on the left side) still visible. The solution below doesn't allow this. – Cropeared

@RandRandom Where did the op provide any code?! Say NO to DRUGS ;-)! – Mongrel

@Mongrel - after 4 years, I can only make an assumption of what I meant at that day, I tried to say that OP mentions he is using MenuItem.Icon and the below answer just shows the usage of MenuItem.Icon so its basically what OP said is is currently using but he doesn't want the Image to be on the left side of the text, but below of it. so the high voted answer is simply wrong for OP's actual question. – Mosera

@RandRandom Accepted :-). – Mongrel

Answer 2

How something along the lines of:

<ContextMenu>
    <MenuItem Header="Reports">
        <MenuItem.Icon>
            <Image Source="/XSoftArt.WPFengine;component/Images/export32x32xp.png"/>
        </MenuItem.Icon>
    </MenuItem>
</ContextMenu>

Riehl

This is the correct answer, thanks! The solution provided by Ray Burns draws the picture in the wrong position. – Smolensk

If needed also set Build Action property of an image to "Content" and Copy to Ouptut Directory to "Copy if newer" or "Always". – Kolnick

I have downvoted this answer since the OP clearly states he wants to display the text below the image (vertically). This will display the icon in front of the text. – Raddled

Answer 3

In the case of StackPanel use Label and not the TextBlock since only Label will allow you to have the mnemonics on the menu, like _Reports.

Harrelson

Answer 4

This works for me:

<Menu Height="22" Grid.Row="0">
    <MenuItem Header="View">
        <MenuItem Header="Form"/>
    </MenuItem>
    <MenuItem Header="Tools">
        <MenuItem Header="Options...">
            <MenuItem.Icon>
                <Image Source="./Images/Menu/settings.png"/>
            </MenuItem.Icon>
        </MenuItem>
    </MenuItem>
</Menu>

And you must change the build type of the image to Resource.

Nakano