56

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

Dave Clemmer
  • 3,741
  • 12
  • 49
  • 72
Vytas
  • 1,271
  • 4
  • 18
  • 26

3 Answers3

167

How something along the lines of:

<ContextMenu>
    <MenuItem Header="Reports">
        <MenuItem.Icon>
            <Image Source="/XSoftArt.WPFengine;component/Images/export32x32xp.png"/>
        </MenuItem.Icon>
    </MenuItem>
</ContextMenu>
vines
  • 5,160
  • 1
  • 27
  • 49
DanielE
  • 1,768
  • 2
  • 10
  • 4
  • 1
    This is the correct answer, thanks! The solution provided by Ray Burns draws the picture in the wrong position. – Mar May 30 '16 at 05:49
  • 2
    If needed also set Build Action property of an image to "Content" and Copy to Ouptut Directory to "Copy if newer" or "Always". – Aleksei Mialkin May 12 '18 at 11:48
  • 2
    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. – Maurits van Beusekom Jun 05 '19 at 12:22
54

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.

Ray Burns
  • 62,163
  • 12
  • 140
  • 141
  • 19
    The answer below is easier and uses the Icon property? – Alex Hope O'Connor Aug 31 '12 at 03:57
  • 7
    @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. – Rand Random Apr 09 '15 at 10:58
  • 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. – DanW Aug 25 '15 at 19:05
  • 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. – Alex Telon May 22 '18 at 09:04
  • 1
    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. – namg_engr Oct 22 '19 at 00:54
  • @RandRandom Where did the op provide any code?! Say NO to DRUGS ;-)! – Sebastian Oct 30 '19 at 07:48
  • 1
    @Sebastian - 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. – Rand Random Oct 30 '19 at 11:02
  • @RandRandom Accepted :-). – Sebastian Oct 30 '19 at 11:46
4

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.

Konrad Viltersten
  • 36,151
  • 76
  • 250
  • 438
tridy
  • 51
  • 2