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!

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.

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>

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.