Checkable MenuItem在C＃WPF中显示为ToggleButton

Question

我正在尝试使用可检查的MenuItem创建菜单，但看起来像切换按钮。 当前，它看起来像这样：

您会同意，这看起来很丑陋，并且复选标记属于Views还是Actions并不直观。

我知道常规CheckBox属性Appearance可以设置为Button ，从而使CheckBox看起来像ToggleButton 。 但是， MenuItem对象没有此类属性。

我也尝试过将ToggleButton添加到菜单中，但是外观与我期望的有所不同。 这是此尝试的屏幕截图：

我希望它看起来像这样：

有没有一种方法可以在菜单栏中显示切换按钮控件（或类似的东西）？

PS如果您需要我当前的测试代码，则为：

<Menu Grid.Row="0" HorizontalAlignment="Stretch" IsHitTestVisible="True" x:Name="mnuMain">
    <MenuItem Header="File" x:Name="mnuFile">
        <MenuItem Header="Export List to Excel" x:Name="btnExportToExcel" Click="OnExportToExcel"/>
    </MenuItem>
    <MenuItem Header="Views" x:Name="mnuViews">
        <MenuItem Header="Item1" x:Name="chkItem1" IsCheckable="true" Click="OnChkItem1Click" />
        <MenuItem Header="Item2" x:Name="chkItem2" IsCheckable="true" Click="OnChkItem2Click" />
    </MenuItem>
    <MenuItem Header="Actions" x:Name="mnuActions" IsCheckable="true" >
        <!-- -->
    </MenuItem>
    <MenuItem Header="Analysis" x:Name="btnAnalysis" Click="OnAnalysisClick"/>
    <MenuItem Header="History" x:Name="btnHistory" Click="OnHistoryClick"/>
    <ToggleButton x:Name="tbTest" BorderThickness="0" Background="Transparent" HorizontalContentAlignment="Stretch" HorizontalAlignment="Stretch" Click="OnTbTestClick">Test</ToggleButton>
</Menu>

Answer 1

使用带有触发器的自定义样式，可以更改可检查项和已检查项的MenuItem模板。 这是模板的示例（它是从默认MenuItem样式中摘录的）

<SolidColorBrush x:Key="MenuItem.Highlight.Background" Color="#3D26A0DA"/>
<SolidColorBrush x:Key="MenuItem.Highlight.Border" Color="#FF26A0DA"/>
<SolidColorBrush x:Key="Menu.Disabled.Foreground" Color="#FF707070"/>

<Style x:Key="MenuItemToggleStyle" TargetType="{x:Type MenuItem}" BasedOn="{StaticResource {x:Type MenuItem}}">
    <Style.Triggers>
        <MultiTrigger>
            <MultiTrigger.Conditions>
                <Condition Property="IsChecked" Value="True"/>
                <Condition Property="IsCheckable" Value="True"/>
                <Condition Property="Role" Value="TopLevelItem"/>
            </MultiTrigger.Conditions>
            <MultiTrigger.Setters>
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="MenuItem">
                            <Border x:Name="templateRoot" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" SnapsToDevicePixels="true">
                                <Grid VerticalAlignment="Center">
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition Width="Auto"/>
                                        <ColumnDefinition Width="Auto"/>
                                    </Grid.ColumnDefinitions>
                                    <ContentPresenter x:Name="Icon" ContentSource="Icon" HorizontalAlignment="Center" Height="16" Margin="3" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="Center" Width="16"/>
                                    <ContentPresenter Grid.Column="1" ContentSource="Header" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
                                </Grid>
                            </Border>
                            <ControlTemplate.Triggers>
                                <Trigger Property="Icon" Value="{x:Null}">
                                    <Setter Property="Visibility" TargetName="Icon" Value="Collapsed"/>
                                </Trigger>
                                <Trigger Property="IsEnabled" Value="False">
                                    <Setter Property="TextElement.Foreground" TargetName="templateRoot" Value="{StaticResource Menu.Disabled.Foreground}"/>
                                    <Setter Property="BorderBrush" TargetName="templateRoot" Value="{StaticResource MenuItem.Highlight.Border}"/>
                                </Trigger>
                                <Trigger Property="IsEnabled" Value="True">
                                    <Setter Property="Background" TargetName="templateRoot" Value="{StaticResource MenuItem.Highlight.Background}"/>
                                    <Setter Property="BorderBrush" TargetName="templateRoot" Value="{StaticResource MenuItem.Highlight.Border}"/>
                                </Trigger>
                            </ControlTemplate.Triggers>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </MultiTrigger.Setters>
        </MultiTrigger>
    </Style.Triggers>
</Style>