WPF menu item with image

Question

Hello, I have a WPF menu:

   <Menu Height="22" Margin="0,109,102,0" Name="menu1" VerticalAlignment="Top">
        <MenuItem Header="Reports">
            <MenuItem.Icon>
                <Image Width="20" Height="20" Source="/XSoftArt.WPFengine;component/Images/export32x32xp.png" />
            </MenuItem.Icon>
        </MenuItem>
        <MenuItem Header="Export" />
        <MenuItem Header="New record" />
    </Menu>

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"></Image>
                    </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".