让 WPF 的 RadioButton 支持再次点击取消选中的功能

独立观察员 2022 年 01 月 16 日

零、前言

众所周知，RadioButton 是一种单选框，一般是放置好几个在同一面板中以组成一组；使用时，初始时可能一个都没被选中，或者是设置了一个默认选中项；然后，用户可以在这一组单选框中切换选择其中一个，不能多选，也不能取消选中（也就是不能重新回到一个都没选的状态）。

最近公司软件中有个界面，UI 给出的样式就是单选框的形式，所以就使用了一组 RadioButton 来实现，初始是一个都没选，之后用户可以在其中选择一项。可是后来需求说选中的项再次点击需要取消选中，摔！这个功能 RadioButton 是办不到的，CheckBox 是可以的，不过如果换成 CheckBox，一方面样式要改，另一方面，只能选择一项这个需求也要写代码实现（CheckBox 好像可以设置为单选？算了，不要在意这些细节），所以还是找找方法，看能不能让 RadioButton 支持取消选中吧。

一、方法一：后台直接处理

网上找到的方法就是在后台新增一个 bool 变量，用来记录上次（或者说点击前）RadioButton 是选中还是未选中，然后在点击事件中进行判断处理：

来看看效果吧（动图）：

上面的动图先演示了 RadioButton 默认是不支持取消选中的；然后演示了通过上面代码实现的支持取消选中的 RadioButton。

这样确实是可以的，但是只适用于只有单个 RadioButton 的情况，因为如果有好几个 RadioButton，那么就要为每个 RadioButton 新建一个布尔变量以及一个点击事件方法，最多是把事件方法整合一下，总之是很奇怪的。

当然，这个战略（引入一个布尔变量来记录上次的选择情况）是没问题，只不过战术（直接在后台处理）有点问题。那么我们使用这个战略的话，还能形成什么战术呢？大致可以想到两种方法，接下来容我一一道来。

二、方法二：提取为自定义控件（用户控件）

我们新建一个名为 RadioButtonUncheck 的用户控件（UserControl），将继承关系改为 RadioButton，并把上一节所示的处理逻辑添加进去：

前台直接改为实例化一个 RadioButton 即可：

然后在界面上使用这个用户控件：

看看效果（动图）：

很明显，有一些 Bug，这是为什么呢？原因就是，我们新建的那个用来记录上次选中状态的变量，在用户选中其它项，同时 WPF 框架自动取消选中本项时，没有进行记录。

所以我们需要在 Checked 和 Unchecked 这两个事件中分别对 _lastChecked 进行相应的赋值：

然后，由于触发了 Click 事件后（也有可能是 PreviewMouseDown 后 Click 前的某个事件，比如 PreviewMouseUp），WPF 框架（或者说是 RadioButton 内部）就会把 IsChecked 设为 true（这就是前面的代码中需要另外新建变量来判断的原因），所以需要换为 PreviewMouseDown 事件，并在处理完成后调用 “e.Handled = true;” 阻止事件继续传递：

现在，当 RadioButtonUncheck 控件通过点击由未选切换为选中时，事件执行顺序为 PreviewMouseDown--Checked：

或：

而由选中切换为未选时，事件执行顺序为 PreviewMouseDown--Unchecked：

而如果没有 “e.Handled = true;”，则由未选切换为选中时，事件执行顺序如下：

或：

 

由选中切换为未选时（切换失败），事件执行顺序如下：

至此，用户控件法圆满完成任务（动图）：

完整代码：

using System;
using System.Windows;
using System.Windows.Controls;

namespace WPFPractice.UserControls
{
    /// <summary>
    /// 支持点击取消选中的 RadioButton;
    /// </summary>
    public partial class RadioButtonUncheck : RadioButton
    {
        /// <summary>
        /// 上次的选中状态
        /// </summary>
        private bool _lastChecked;

        /// <summary>
        /// 内容字符串
        /// </summary>
        private string ContentStr => Content + "";

        public RadioButtonUncheck()
        {
            InitializeComponent();

            Click += RadioButtonUncheck_Click; ;
            PreviewMouseDown += RadioButtonUncheck_PreviewMouseDown; ;
            Checked += RadioButtonUncheck_Checked;
            Unchecked += RadioButtonUncheck_Unchecked;
        }

        /// <summary>
        /// 点击事件处理方法
        /// </summary>
        private void RadioButtonUncheck_Click(object sender, RoutedEventArgs e)
        {
            Console.WriteLine($"[{ContentStr}]触发 Click 事件");
            //SwitchStatus();
        }

        /// <summary>
        /// 鼠标按下事件处理方法
        /// </summary>
        private void RadioButtonUncheck_PreviewMouseDown(object sender, System.Windows.Input.MouseButtonEventArgs e)
        {
            Console.WriteLine($"[{ContentStr}]触发 PreviewMouseDown 事件");
            SwitchStatus();
            e.Handled = true;
        }

        /// <summary>
        /// 切换状态
        /// </summary>
        private void SwitchStatus()
        {
            if (_lastChecked)
            {
                IsChecked = false;
                //_lastChecked = false;
            }
            else
            {
                IsChecked = true;
                //_lastChecked = true;
            }
        }

        /// <summary>
        /// 选中事件 处理方法
        /// </summary>
        private void RadioButtonUncheck_Checked(object sender, RoutedEventArgs e)
        {
            Console.WriteLine($"[{ContentStr}]触发 Checked 事件");
            _lastChecked = true;
        }

        /// <summary>
        /// 取消选中事件 处理方法
        /// </summary>
        private void RadioButtonUncheck_Unchecked(object sender, RoutedEventArgs e)
        {
            Console.WriteLine($"[{ContentStr}]触发 Unchecked 事件");
            _lastChecked = false;
        }
    }
}

三、方法三：附加行为法

关于附加行为，是通过附加属性来实现的，可以参考我之前的翻译文章《【翻译】WPF 中附加行为的介绍 Introduction to Attached Behaviors in WPF》：

在一个元素上设置一个附加属性，那么你就可以从暴露这个附加属性的类中获得该元素的访问。一旦那个类有权限访问那个元素，它就能在其上挂钩事件，响应这些事件的触发，使该元素做出它本来不会做的事情。

下面直接进入正题，首先在一个新建类 RadioButtonAttached 中添加一个 bool 类型的附加属性 IsCanUncheck，当其被设置为 true 时，会给设置的元素附加 PreviewMouseDown、Checked、Unchecked 三个事件，和上一节一样：

注意，附加属性还需要两个包装方法：

由于附加属性的变动处理方法要求是静态方法：

所以导致三个事件的处理方法也要是静态方法，不然就会报错：

进而导致之前引入成员变量 _lastChecked 的方式行不通了：

所以这个状态存储的地方需要另外寻找。对于这种情况，我经常使用的是元素的 Tag 属性，这次也是这样干的，也就是说使用单选框的 Tag 来存储上次的选中与否状态。

Checked 和 Unchecked 中还是换汤不换药：

主要是 PreviewMouseDown 事件处理方法中，当第一次点击，Tag 中还没有存储时，bool 会转换失败，所以 Tag 中应该存储 true 供下次使用；而转换成功则将转换出的值（存在 lastChecked 变量中）取反存入 Tag 中供下次使用。（这样看来两种情况好像都可以直接使用 rb.Tag = !lastChecked; 哈哈，懒得改了）。之后就是依据 lastChecked 来决定（取反）IsChecked 的值：

完整代码：

using System.Windows;
using System.Windows.Controls;

namespace WPFTemplateLib.Attached;

/// <summary>
/// RadioButton 附加属性类
/// </summary>
public class RadioButtonAttached : DependencyObject
{
    #region IsCanUncheck

    public static bool GetIsCanUncheck(FrameworkElement item)
    {
        return (bool)item.GetValue(IsCanUncheckProperty);
    }

    public static void SetIsCanUncheck(FrameworkElement item, bool value)
    {
        item.SetValue(IsCanUncheckProperty, value);
    }

    /// <summary>
    /// 是否能取消选中(启用此功能会占用 Tag 属性)
    /// </summary>
    public static readonly DependencyProperty IsCanUncheckProperty =
        DependencyProperty.RegisterAttached(
            "IsCanUncheck",
            typeof(bool),
            typeof(RadioButtonAttached),
            new UIPropertyMetadata(false, OnIsCanUncheckChanged));

    static void OnIsCanUncheckChanged(DependencyObject depObj, DependencyPropertyChangedEventArgs e)
    {
        FrameworkElement item = depObj as FrameworkElement;

        if (item == null)
            return;

        switch (depObj)
        {
            case RadioButton radioButton:
            {
                if ((bool) e.NewValue)
                {
                    radioButton.PreviewMouseDown += RadioButton_PreviewMouseDown;
                    radioButton.Checked += RadioButton_Checked;
                    radioButton.Unchecked += RadioButton_Unchecked;
                }
                else
                {
                    radioButton.PreviewMouseDown -= RadioButton_PreviewMouseDown;
                    radioButton.Checked -= RadioButton_Checked;
                    radioButton.Unchecked -= RadioButton_Unchecked;
                }

                break;
            }
            default:
                break;
        }
    }

    private static void RadioButton_Unchecked(object sender, RoutedEventArgs e)
    {
        var rb = sender as RadioButton;
        if (rb == null)
        {
            return;
        }

        rb.Tag = false;
    }

    private static void RadioButton_Checked(object sender, RoutedEventArgs e)
    {
        var rb = sender as RadioButton;
        if (rb == null)
        {
            return;
        }
        
        rb.Tag = true;
    }

    private static void RadioButton_PreviewMouseDown(object sender, RoutedEventArgs e)
    {
        var rb = sender as RadioButton;
        if (rb == null)
        {
            return;
        }

        //使用 RadioButton 的 Tag 来存储上次选中的状态，之后可以从中获取来进行判断;
        bool parseSuccess = bool.TryParse(rb.Tag + "", out bool lastChecked);
        if (!parseSuccess)
        {
            //转换失败，说明是第一次点击，也就是本次本勾选了，所以应该把 true 存起来;
            rb.Tag = true;
        }
        else
        {
            rb.Tag = !lastChecked;
        }

        if (lastChecked)
        {
            rb.IsChecked = false;
            //lastChecked = false;
        }
        else
        {
            rb.IsChecked = true;
            //lastChecked = true;
        }

        e.Handled = true;
    }

    #endregion
}

使用时只需要在普通 RadioButton 元素上加上这个附加属性并将值置为 True 即可：

效果和上一节的一样（实际上方法三是先写成的），就不再演示了，来个全家福吧：

最后是源码地址：https://gitee.com/dlgcy/DLGCY_WPFPractice/tree/Blog20220116 

原创文章，转载请注明： 转载自 独立观察员

本文链接地址: 让 WPF 的 RadioButton 支持再次点击取消选中的功能 [http://dlgcy.com/wpf-radiobutton-support-click-again-to-unchecked/]