Как правильно выравнивать пункт меню "Справка" в WPF?

У меня есть следующий (упрощенный) раздел в моем файле XAML:

<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>

и это приводит к:

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

Что мне нужно сделать, если я хочу элемент меню Help в правой части:

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

Ответы

Ответ 1

В соответствии с тем же принципом, и на этот раз вам не нужна сетка, и поэтому вам не нужно знать количество предметов. Назначьте все элементы влево, кроме справки:)

<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>

Ответ 2

Еще один возможный ответ, если вы всегда знаете, сколько пунктов меню будет (и это делает этот хрупкий ответ), заключается в том, чтобы определить Menu.ItemsPanel как сетку, установить "Меню для растягивания", правильно настроить Grid.ColumnDefinitions, установите MenuItems в соответствующую Grid.Column и установите для параметра HorizontalAlignment последнего элемента меню значение "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>

Ответ 3

Изменение исходного ответа, поскольку (с помощью HorizontalAlignment = "Stretch" ) меню Edit растягивается полностью через панель меню в меню справки.

Также включает предложение выравнивания подменю Rokke...

<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>

Ответ 4

Я не думаю, что есть простой способ. Меню сохраняет все элементы на одной стороне и даже игнорирует HorizontalContentAlignment меню или HorizontalAlignment MenuItem.

Но вы можете сделать обходной путь. Свойство margin работает. Поэтому я думаю, что вы можете привязать край меню меню Help к ширине меню. Но вам нужно будет использовать конвертер для вычисления поля по ширине.

Я не знаю, хорошо ли это сделать. Я бы не стал. Но если вы действительно этого хотите, то это должно работать.

Ответ 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>

Просто небольшое дополнение к исходному ответу. Включение двух направлений потока заставляет подменю оставаться внутри окна.

Ответ 6

Есть один, возможно, два потенциальных недостатка использования DockPanel или Grid вместо WrapPanel по умолчанию.

  • Если окно слишком мало, чтобы отображать все пункты меню в одной строке, они не будут переноситься на следующий.
  • Если элементы меню будут использоваться для использования в другом контексте, например в ContextMenu, последний элемент будет выровнен по правому краю.