Checkable MenuItem 在 C# WPF 中看起来像 ToggleButton

Question

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

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

我知道常规CheckBox 具有属性Appearance，可以设置为Button，使CheckBox 看起来像ToggleButton。但是，MenuItem 对象没有这样的属性。

我也尝试将ToggleButton 添加到菜单中，但它的外观与我的预期不同。这是这次尝试的屏幕截图：

我希望它看起来像这样：

有没有办法在菜单栏中显示工具按钮控件（或类似的东西）？

附：如果你需要我当前的测试代码，这里是：

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