MenuItem with image as header ignores alignment - wpf

Question

First of all, I know there are lot of questions about alignment in wpf, and I've read some of them, but none seems to work in this case...
What do I have
I've a menu, where the third MenuItem doesn't have a text but an image. To be exact, this one:
I want this element to be right aligned, so after looking at some examples and problem with alignment questions in SO, I'm using the following code:
<MenuItem HorizontalAlignment="Right" HorizontalContentAlignment="Right">
<MenuItem.Header>
<StackPanel>
<Image Source="Resources/Img/donarBoton.gif" UseLayoutRounding="False" />
</StackPanel>
</MenuItem.Header>
</MenuItem>
Problem
As you can see, even whith the HorizontalAlignment set to right, it doesn't appear on the right side.
I've read about it and found that the Menu where it is, need to have the same property set to Stretch, what I've tried too with no success. I even tried it with the DockPanel where the menu is located (just to try, I'm not used to WPF yet), but it does nothing either.
I've tried to add a text element after my image element too, in order to see if the problem is the MenuItem or any other thing in my configuration, but it didn't move to the right side either.
What am I doing wrong?
There's the full DockPanel code:
<DockPanel x:Name="superiorDock" Height="25" LastChildFill="False" VerticalAlignment="Top" Width="307">
<Menu x:Name="superiorMenu" Width="307" Height="25" DockPanel.Dock="Top" HorizontalAlignment="Stretch" >
<MenuItem Header="{Binding XPath=#topMenu_1}">
<MenuItem Header="{Binding XPath=#topMenu_2}"/>
<MenuItem Header="{Binding XPath=#topMenu_3}"/>
<Separator/>
<MenuItem Header="{Binding XPath=#topMenu_4}"/>
<Separator/>
<MenuItem Header="{Binding XPath=#topMenu_5}"/>
</MenuItem>
<MenuItem Header="{Binding XPath=#topMenu_6}">
<MenuItem Header="{Binding XPath=#topMenu_7}"/>
<Separator/>
<MenuItem Header="{Binding XPath=#topMenu_8}"/>
</MenuItem>
<MenuItem HorizontalAlignment="Right" HorizontalContentAlignment="Right">
<MenuItem.Header>
<StackPanel>
<Image Source="Resources/Img/donarBoton.gif" UseLayoutRounding="False" />
</StackPanel>
</MenuItem.Header>
</MenuItem>
</Menu>
</DockPanel>
Thanks in advance

Answer 1

Use this:
<DockPanel x:Name="superiorDock" Height="25" LastChildFill="False" VerticalAlignment="Top" Width="307">
<Menu x:Name="superiorMenu" Width="307" Height="25" DockPanel.Dock="Top" HorizontalAlignment="Stretch">
<Menu.ItemsPanel>
<ItemsPanelTemplate>
<DockPanel HorizontalAlignment="Stretch" />
</ItemsPanelTemplate>
</Menu.ItemsPanel>
<MenuItem Header="{Binding XPath=#topMenu_1}">
<MenuItem Header="{Binding XPath=#topMenu_2}"/>
<MenuItem Header="{Binding XPath=#topMenu_3}"/>
<Separator/>
<MenuItem Header="{Binding XPath=#topMenu_4}"/>
<Separator/>
<MenuItem Header="{Binding XPath=#topMenu_5}"/>
</MenuItem>
<MenuItem Header="{Binding XPath=#topMenu_6}">
<MenuItem Header="{Binding XPath=#topMenu_7}"/>
<Separator/>
<MenuItem Header="{Binding XPath=#topMenu_8}"/>
</MenuItem>
<MenuItem HorizontalAlignment="Right">
<MenuItem.Header>
<StackPanel>
<Image Source="Resources/Img/donarBoton.gif" UseLayoutRounding="False" />
</StackPanel>
</MenuItem.Header>
</MenuItem>
</Menu>
</DockPanel>
The default ItemsPanel of the Menu uses a WrapPanel. The panel defined in the ItemsPanel will be used as the container of the MenuItems.
WrapPanel doesn't respect the HorizontalAlignment property of its children. That's why we change the ItemsPanel to one that does support this: DockPanel.