如何右对齐WPF中的“帮助”菜单项？

Question

I have the following (simplifed) section in my XAML file:

<Menu Width="Auto" Height="20" Background="#FFA9D1F4" DockPanel.Dock="Top">
    <MenuItem Header="File">
        <MenuItem Header="Exit"/>
    </MenuItem>
    <MenuItem Header="Edit">
        <MenuItem Header="Cut"/>
    </MenuItem>
    <MenuItem Header="Help">
        <MenuItem Header="About"/>
    </MenuItem>
</Menu>

and it results in:

+-------------------------------------------+
| File Edit Help                            |
+-------------------------------------------+
|                                           |

What do I need to do if I want the Help menu item on the right-hand side:

+-------------------------------------------+
| File Edit                            Help |
+-------------------------------------------+
|                                           |

Answer 1

Alng the same principle and this time you dont need the grid and therefore dont need to know the number of items. Assign all items to the left except the help :)

<Menu Height="20" Background="#FFA9D1F4">
    <Menu.ItemsPanel>
        <ItemsPanelTemplate>
            <DockPanel HorizontalAlignment="Stretch"/>
        </ItemsPanelTemplate>
    </Menu.ItemsPanel>
    <MenuItem Header="File">
        <MenuItem Header="Exit"/>
    </MenuItem>
    <MenuItem Header="Edit">
        <MenuItem Header="Cut"/>
    </MenuItem>
    <MenuItem Header="Help" HorizontalAlignment="Right">
        <MenuItem Header="About"/>
    </MenuItem>
</Menu>

Answer 2

Another possible answer, if you always know how many menu items there will be (and that makes this answer fragile), is to define the Menu.ItemsPanel as a grid, set the Menu to Stretch, set the Grid.ColumnDefinitions appropriately, set the MenuItems to the appropriate Grid.Column, and set the HorizontalAlignment of the last menu item as Right.

   <Menu  Height="20" Background="#FFA9D1F4" DockPanel.Dock="Top" HorizontalAlignment="Stretch">
        <Menu.ItemsPanel>
            <ItemsPanelTemplate>
                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="Auto" />
                        <ColumnDefinition Width="Auto" />
                        <ColumnDefinition Width="*" />
                    </Grid.ColumnDefinitions>
                </Grid>
            </ItemsPanelTemplate>
        </Menu.ItemsPanel>
        <MenuItem Header="File" Grid.Column="0">
            <MenuItem Header="Exit"/>
        </MenuItem>
        <MenuItem Header="Edit" Grid.Column="1">
            <MenuItem Header="Cut"/>
        </MenuItem>
        <MenuItem Header="Help" Grid.Column="2" HorizontalAlignment="Right">
            <MenuItem Header="About"/>
        </MenuItem>
    </Menu>

Answer 3

Alteration to the original answer, since as it is (with HorizontalAlignment="Stretch") the Edit menu will stretch all the way across the menu bar to the Help menu.

Also incorporating Rokke's submenu alignment suggestion...

<Menu Height="20" Background="#FFA9D1F4">
        <Menu.ItemsPanel>
            <ItemsPanelTemplate>
                <DockPanel/>
            </ItemsPanelTemplate>
        </Menu.ItemsPanel>
        <MenuItem Header="File">
            <MenuItem Header="Exit"/>
        </MenuItem>
        <MenuItem Header="Edit">
            <MenuItem Header="Cut"/>
        </MenuItem>
        <MenuItem Header="_Help" HorizontalAlignment="Right" FlowDirection="RightToLeft">
            <MenuItem Header="About..." FlowDirection="LeftToRight"/>
        </MenuItem>
    </Menu>

Answer 4

I don't think there is an easy way. Menu keeps all Items on one side and even ignores HorizontalContentAlignment of the Menu or HorizontalAlignment of the MenuItem.

But you could do a workaround. The margin property works. So i think you could bind the margin of the Help MenuItem to the width of the Menu. But you would have to use a Converter to calculate the margin from the width.

I dont know if its good to do something like that. I wouldn't. But if you really want it, thats a way that should work.

Answer 5

<Menu DockPanel.Dock="Top">
  <Menu.ItemsPanel>
    <ItemsPanelTemplate>
      <DockPanel HorizontalAlignment="Stretch"/>
    </ItemsPanelTemplate>
  </Menu.ItemsPanel>
  <MenuItem Header="_File">
    <MenuItem Click="Exit_Clicked" Header="E_xit" />
  </MenuItem>
  <MenuItem Header="_User">
    <MenuItem Click="ChangePassword_Clicked" Header="_Change Password..." />
  </MenuItem>
  <!-- Right adjusted help menu with sub menu keeping inside the main window -->
  <MenuItem Header="_Help" HorizontalAlignment="Right" FlowDirection="RightToLeft">
    <MenuItem Click="About_Clicked" Header="_About..." FlowDirection="LeftToRight" />
  </MenuItem>
</Menu>

Just a small addition to the original answer. Including the two flow directions make the sub menu stay inside the window.

Answer 6

There are one, perhaps two, potential drawbacks to using either a DockPanel or a Grid, instead of the default WrapPanel.

1. If the window is too small to show all the menu items on one line, they won't wrap to the next.
2. If the menuitems will be shared for use in a different context, such as in a ContextMenu, the last item will be right-aligned