Как правильно создать подменю для пункта меню в WPF

Question

В настоящее время я пытаюсь стилизовать свои объекты MenuItem в WPF / XAML, и я не могу понять, как вывести подменю для MenuItem.Чтобы быть ясным, это то, что мне нужно:

И вот как я в настоящее время стилизовал мой MenuItem:

<Style TargetType="{x:Type MenuItem}">
    <Setter Property="Background" Value="{StaticResource GridLightColour}"/>
    <Setter Property="Foreground" Value="White"/>
    <Setter Property="BorderBrush" Value="Transparent"/>
    <Setter Property="FontSize" Value="15"/>
    <Setter Property="FontFamily" Value="{StaticResource Exo2Light}"/>
    <Setter Property="BorderThickness" Value="0"/>
    <Setter Property="ScrollViewer.PanningMode" Value="Both"/>

    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type MenuItem}">
                <Grid SnapsToDevicePixels="true">
                    <DockPanel>
                        <Border x:Name="ContentBorder" BorderThickness="1" BorderBrush="{StaticResource GridLightColour}" Background="{StaticResource GridLightColour}">
                            <ContentPresenter x:Name="Content" ContentSource="Header" Margin="7,0,0,0" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
                        </Border>
                    </DockPanel>
                    <Popup x:Name="Popup" AllowsTransparency="true" Focusable="false" HorizontalOffset="0" IsOpen="{Binding IsSubmenuOpen, RelativeSource={RelativeSource TemplatedParent}}" PopupAnimation="{DynamicResource {x:Static SystemParameters.MenuPopupAnimationKey}}" Placement="Bottom" VerticalOffset="-1">
                        <Border BorderThickness="0" BorderBrush="{StaticResource ButtonColour}" Background="{StaticResource GridLightColour}">
                            <ScrollViewer x:Name="SubMenuScrollViewer" CanContentScroll="true" Style="{DynamicResource {ComponentResourceKey ResourceId=MenuScrollViewer, TypeInTargetAssembly={x:Type FrameworkElement}}}">
                                <Grid RenderOptions.ClearTypeHint="Enabled">
                                    <ItemsPresenter x:Name="ItemsPresenter" Grid.Column="0" KeyboardNavigation.DirectionalNavigation="Cycle" Grid.IsSharedSizeScope="true" Margin="3" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" KeyboardNavigation.TabNavigation="Cycle"/>
                                </Grid>
                            </ScrollViewer>
                        </Border>
                    </Popup>
                </Grid>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsMouseOver" Value="True">
                        <Setter Property="Background" Value="{StaticResource MenuButtonMouseOverColour}" TargetName="ContentBorder"/>
                    </Trigger>
                    <Trigger Property="IsChecked" Value="True">
                        <Setter Property="Foreground" Value="{StaticResource ButtonMouseOverColour}"/>
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

Каков наилучший способ сделать это?

Answer 1

Если вы не ниндзя XAML, лучший способ работы с любым шаблоном - начать с извлечения шаблона по умолчанию.

Поскольку очень легко полностью сломать элементы управления, когда вы начинаете делать этот видвещей.Шаблон полностью заменяет все, что находится под вашим контролем.В частности, будьте очень внимательны, чтобы убедиться, что контент-презентатор или именованная часть все еще находятся там после завершения.

Шаг за шагом:

Добавьте элемент управления нужного типа (menuitem) кview.

Выберите его.

В окне свойств найдите группу Разное.

Прокрутите вниз до шаблона.

Нажмите на маленькое поле навправо.

Выберите Преобразовать в новый ресурс.

Вы можете добавить ссылки на материалы для некоторых шаблонов.

В любом случае убедитесь, что это работает.

Теперь вы начинаете с рабочего (а не сломанного) шаблона.

Сделайте небольшое изменение и протестируйте.

Повторите.

Поднимитесь наВаше требование - маленький крошечный шаг за шагом.

Кроме того.

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

Answer 2

По умолчанию MenuItem уже обрабатывает этот вид вложений по умолчанию.Для этого не нужно переопределять шаблон элемента управления.

<DockPanel>
    <Menu DockPanel.Dock="Top">
        <MenuItem Header="File">
            <MenuItem Header="Open">
                <MenuItem Header="aaaaaaa" />
                <MenuItem Header="bbbbbbbb" />
                <MenuItem Header="ccccc" />
            </MenuItem>
            <MenuItem Header="Close" />
            <MenuItem Header="quit" />
        </MenuItem>
        <MenuItem Header="Edit">
            <MenuItem Header="Cut" />
            <MenuItem Header="Copy" />
            <MenuItem Header="Paste" />
        </MenuItem>
    </Menu>
    <Grid />
</DockPanel>

Создает этот результат:

Вы можете взятьэто так далеко, как вы хотите, просто продолжайте вкладывать предметы ...