[WPF 自定义控件]在MenuItem上使用RadioButton

最新推荐文章于 2022-06-09 18:30:28 发布

Pitter_p

最新推荐文章于 2022-06-09 18:30:28 发布

阅读量881

点赞数

文章标签： wpf c#

原文链接：https://www.cnblogs.com/dino623/p/Uising_RadioButton_in_MenuItem.html

版权

1. 需求#

上图这种包含多选（CheckBox）和单选（RadioButton）的菜单十分常见，可是在WPF中只提供了多选的MenuItem。顺便一提，要使MenuItem可以多选，只需要将MenuItem的IsCheckable属性设置为True：

<MenuItem IsCheckable="True"/>

不知出于何种考虑，WPF没有为MenuItem提供单选的功能。为了在MenuItem中添加RadioButton，可以尝试修改样式并在CodeBehind找那个处理MenuItem的Click事件，但这种事做多了还是做成一个自定义控件比较方便。这篇文章将介绍如何自定义一个RadioButtonMenuItem控件实现MenuItem的单选功能。

2. 实现代码

RadioButtonMenuItem的代码比较简单（换言之，样式部分比较难），首先继承自MenuItem，然后模仿RadioButton添加一个GroupName属性:

public class RadioButtonMenuItem : MenuItem 
{
 /// <summary> 
 /// 标识 GroupName 依赖属性。
 /// </summary>
 public static readonly DependencyProperty GroupNameProperty =DependencyProperty.Register(nameof(GroupName), typeof(string), typeof(RadioButtonMenuItem), new PropertyMetadata(default(string))); 

static RadioButtonMenuItem() 
{ 
    DefaultStyleKeyProperty.OverrideMetadata(typeof(RadioButtonMenuItem), new FrameworkPropertyMetadata(typeof(RadioButtonMenuItem))); 
} 

/// <summary> 
/// 获取或设置GroupName的值 
/// </summary> 
public string GroupName 
{ 
    get { return (string)GetValue(GroupNameProperty); } 
    set { SetValue(GroupNameProperty, value); } 
}

RadioButtonMenuItem的分组规则很简单，只要同一个MenuItem下的RadioButtonMenuItem为一组，然后再根据GroupName分组。因为我很少会更改GroupName，所以就难得监视GroupName的改变了。

因为MenuItem派生自ItemsControl，所以需要重写GetContainerForItemOverride以确定它的Items也是用RadioButtonMenuItem作为默认的ItemContainer：

protected override DependencyObject GetContainerForItemOverride() 
{ 
    return new RadioButtonMenuItem(); 
}

然后重写OnClick，让RadioButtonMenuItem每次点击都被选中，这个行为和RadioButton一致：

protected override void OnClick() 
{ 
    base.OnClick(); 
    IsChecked = true; 
}

最后重写OnClick函数，在这个函数里面找出在同一个MenuItem下且GroupName一样的RadioButtonMenuItem，将他们的IsChecked全部设置为False，这样就实现了MenuItem的单选功能：

 protected override void OnChecked(RoutedEventArgs e)
        {
            base.OnChecked(e);

            if (this.Parent is MenuItem parent)
            {
                foreach (var menuItem in parent.Items.OfType<RadioButtonMenuItem>())
                {
                    if (menuItem != this && menuItem.GroupName == GroupName && (menuItem.DataContext == parent.DataContext || menuItem.DataContext != DataContext))
                    {
                        menuItem.IsChecked = false;
                    }
                }
            }
        }

3. 实现样式

MenuItem有一个Role属性，它的类型为MenuItemRole，定义如下：

//
// 摘要:
//     Defines the different roles that a System.Windows.Controls.MenuItem can have.
public enum MenuItemRole
{
    //
    // 摘要:
    //     Top-level menu item that can invoke commands.
    TopLevelItem = 0,
    //
    // 摘要:
    //     Header for top-level menus.
    TopLevelHeader = 1,
    //
    // 摘要:
    //     Menu item in a submenu that can invoke commands.
    SubmenuItem = 2,
    //
    // 摘要:
    //     Header for a submenu.
    SubmenuHeader = 3
}

根据MenuItem所处的位置，它的Role会有不同的值，大致上如下面例子所示：

下图中Header 的值对应样式<Trigger> 执行的内容块，层层递进，挪用不同的样式

<Menu x:Name="Men">
    <MenuItem Header="TopLevelItem" />
    <MenuItem Header="TopLevelHeader">
        <MenuItem Header="SubMenuHeader">
            <MenuItem Header="SubMenuItem" />
        </MenuItem>
        <MenuItem Header="SubMenuItem" />
    </MenuItem>
</Menu>

MenuItem的样式麻烦之处就在这里。因为微软并没有在文档中提供Aero2的样式，所以在以前要获取一个控件的样式标准的做法是使用Blend选中控件后编辑控件的模板，但因为MenuItem会有不同的Role，所以它当前的模板会不一样，用Blend很难获取到它的全部的模板。大致上它的样式定义如下：

<ControlTemplate x:Key="{ComponentResourceKey TypeInTargetAssembly={x:Type MenuItem}, ResourceId=TopLevelItemTemplateKey}"
                 TargetType="{x:Type 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"
                                  Content="{TemplateBinding Icon}"
                                  ContentSource="Icon"
                                  HorizontalAlignment="Center"
                                  Height="16"
                                  Margin="3"
                                  SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
                                  VerticalAlignment="Center"
                                  Width="16" />
<!--此处根据使用者需要替换成相应icon-->
                <Ellipse x:Name="GlyphPanel"
                         Visibility="Collapsed"
                         Fill="#FF212121"
                         Width="10"
                         Stretch="Uniform"
                         Height="6"
                         Margin="3" />
                <ContentPresenter ContentTemplate="{TemplateBinding HeaderTemplate}"
                                  Content="{TemplateBinding Header}"
                                  Grid.Column="1"
                                  ContentStringFormat="{TemplateBinding HeaderStringFormat}"
                                  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="IsChecked"
                     Value="True">
                <Setter Property="Visibility"
                        TargetName="GlyphPanel"
                        Value="Visible" />
                <Setter Property="Visibility"
                        TargetName="Icon"
                        Value="Collapsed" />
            </Trigger>
            <Trigger Property="IsHighlighted"
                     Value="True">
                <Setter Property="Background"
                        TargetName="templateRoot"
                        Value="#3D26A0DA" />
                <Setter Property="BorderBrush"
                        TargetName="templateRoot"
                        Value="#FF26A0DA" />
            </Trigger>
            <Trigger Property="IsEnabled"
                     Value="False">
                <Setter Property="TextElement.Foreground"
                        TargetName="templateRoot"
                        Value="#FF707070" />
                <Setter Property="Fill"
                        TargetName="GlyphPanel"
                        Value="#FF707070" />
            </Trigger>
            <MultiTrigger>
                <MultiTrigger.Conditions>
                    <Condition Property="IsHighlighted"
                               Value="True" />
                    <Condition Property="IsEnabled"
                               Value="False" />
                </MultiTrigger.Conditions>
                <Setter Property="Background"
                        TargetName="templateRoot"
                        Value="#0A000000" />
                <Setter Property="BorderBrush"
                        TargetName="templateRoot"
                        Value="#21000000" />
            </MultiTrigger>
        </ControlTemplate.Triggers>
</ControlTemplate>
<ControlTemplate x:Key="{ComponentResourceKey TypeInTargetAssembly={x:Type MenuItem}, ResourceId=TopLevelHeaderTemplateKey}"
                 TargetType="{x:Type MenuItem}">
  
</ControlTemplate>

<ControlTemplate x:Key="{ComponentResourceKey TypeInTargetAssembly={x:Type MenuItem}, ResourceId=SubmenuItemTemplateKey}"
                 TargetType="{x:Type MenuItem}">
</ControlTemplate>

<ControlTemplate x:Key="{ComponentResourceKey TypeInTargetAssembly={x:Type MenuItem}, ResourceId=SubmenuHeaderTemplateKey}"
                 TargetType="{x:Type MenuItem}">
</ControlTemplate>

<Style x:Key="{x:Type local:RadioButtonMenuItem}"
       TargetType="{x:Type local:RadioButtonMenuItem}">
    <Setter Property="Control.Template"
            Value="{StaticResource {ComponentResourceKey TypeInTargetAssembly={x:Type MenuItem}, ResourceId=SubmenuItemTemplateKey}}" />
    <Style.Triggers>
        <Trigger Property="MenuItem.Role"
                 Value="TopLevelHeader">
            <Setter Property="Control.Template"
                    Value="{StaticResource {ComponentResourceKey TypeInTargetAssembly={x:Type MenuItem}, ResourceId=TopLevelHeaderTemplateKey}}" />
            <Setter Property="Control.Padding"
                    Value="6,0" />
        </Trigger>
        <Trigger Property="MenuItem.Role"
                 Value="TopLevelItem">
            <Setter Property="Control.Template"
                    Value="{StaticResource {ComponentResourceKey TypeInTargetAssembly={x:Type MenuItem}, ResourceId=TopLevelItemTemplateKey}}" />
            <Setter Property="Control.Padding"
                    Value="6,0" />
        </Trigger>
        <Trigger Property="MenuItem.Role"
                 Value="SubmenuHeader">
            <Setter Property="Control.Template"
                    Value="{StaticResource {ComponentResourceKey TypeInTargetAssembly={x:Type MenuItem}, ResourceId=SubmenuHeaderTemplateKey}}" />
        </Trigger>
    </Style.Triggers>
</Style>

除了使用Blend，以前还可以使用ILSpy反编译出它的资源文件获取控件的样式。幸好现在WPF开元了，Aero2的样式也可以在 Github 上找到。大概500行的样子，虽然大致上只需要将CheckBox的✔换成一个圆点，但分别搞四次加上些细微的调整把我搞糊涂了。因为它只提供了Aero2的样式，如果要用在Win7最好再定义一个Aero的样式，或者直接将全局样式改为Aero2，我在这篇文章里介绍了如何在Win7使用Aero2的样式，可供参考。

修改完模板后效果就如文章开头的图片一样了，使用方法如下：

<kino:RadioButtonMenuItem Header="MoreOptions">
                <kino:RadioButtonMenuItem Header="Option 1"
                                          GroupName="GroupA" />
                <kino:RadioButtonMenuItem Header="Option 2"
                                          GroupName="GroupA" />
                <kino:RadioButtonMenuItem Header="Option 3"
                                          GroupName="GroupA" />
                <Separator />
                <kino:RadioButtonMenuItem Header="Option 4"
                                          GroupName="GroupB" />
                <kino:RadioButtonMenuItem Header="Option 5"
                                          GroupName="GroupB" />
                <kino:RadioButtonMenuItem Header="Option 6"
                                          GroupName="GroupB" />


                <Separator />
                <kino:RadioButtonMenuItem Header="Options ">
                    <kino:RadioButtonMenuItem Header="Option 7"
                                              GroupName="GroupC" />
                    <kino:RadioButtonMenuItem Header="Option 8"
                                              GroupName="GroupC" />
                    <kino:RadioButtonMenuItem Header="Option 9"
                                              GroupName="GroupC" />
                </kino:RadioButtonMenuItem>
                <Separator />
                <MenuItem IsCheckable="True"
                          Header="Option X" />
                <MenuItem IsCheckable="True"
                          Header="Option Y" />
                <MenuItem IsCheckable="True"
                          Header="Option Z" />
            </kino:RadioButtonMenuItem>

Pitter_p

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
[WPF 自定义控件]在MenuItem上使用RadioButton

1. 需求#上图这种包含多选（CheckBox）和单选（RadioButton）的菜单十分常见，可是在WPF中只提供了多选的MenuItem。顺便一提，要使MenuItem可以多选，只需要将MenuItem的IsCheckable属性设置为True：<MenuItem IsCheckable="True"/>不知出于何种考虑，WPF没有为MenuItem提供单选的功能。...
复制链接

扫一扫