[UWP] 模仿哔哩哔哩的一键三连

什么是一键三连？

哔哩哔哩弹幕网中用户可以通过长按点赞键同时完成点赞、投币、收藏对UP主表示支持，后UP主多用“一键三连”向视频浏览者请求对其作品同时进行点赞、投币、收藏。

去年在云之幻大佬的 哔哩 项目里看到一键三连的 UWP 实现，觉得挺有趣的，这次参考它的代码重新实现一次，最终成果如下：

下面这些是一键三连的核心功能：

• 可以控制并显示进度
• 有普通状态和完成状态
• 可以点击或长按
• 当切换到完成状态时弹出写泡泡
• 点击切换状态
• 长按 2 秒钟切换状态，期间有进度显示

这篇文章将介绍如何使用自定义控件实现上面的功能。写简单的自定义控件的时候，我推荐先写完代码，然后再写控件模板，但这个控件也适合一步步增加功能，所以这篇文章用逐步增加功能的方式介绍如何写这个控件。

2. ProgressButton

万事起头难，做控件最难的是决定控件名称。不过反正也是玩玩的 Demo，就随便些用 ProgressButton 吧，因为有进度又可以点击。

第二件事就是决定这个按钮继承自哪个控件，可以选择继承 Button 或 RangeBase 以减少需要自己实现的功能。因为长按这个需求破坏了点击这个行为，所以还是放弃 Button 选择 RangeBase 比较好。然后再加上 Content 属性，控件的基础代码如下：

[ContentProperty(Name = nameof(Content))]
public partial class ProgressButton : RangeBase
{
    public ProgressButton()
    {
        DefaultStyleKey = typeof(ProgressButton);
    }

    public object Content
    {
        get => (object)GetValue(ContentProperty);
        set => SetValue(ContentProperty, value);
    }
}

在控件模板中用一个 CornerRadius 很大的 Border 模仿圆形边框，ContentControl 显示 Content，RadialProgressBar 显示进度，控件模板的大致结构如下：

<ControlTemplate TargetType="local:ProgressButton">
    <Grid x:Name="RootGrid">
        <Border x:Name="RootBorder"
                        Margin="{TemplateBinding Padding}"
                        Background="{TemplateBinding Background}"
                        BorderBrush="{TemplateBinding BorderBrush}"
                        BorderThickness="1"
                        CornerRadius="100">
            <ContentControl x:Name="ContentControl"
                                    HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                    VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                                    Content="{TemplateBinding Content}"
                                    Foreground="{TemplateBinding Foreground}" />
        </Border>
        <control:RadialProgressBar x:Name="PressProgressBar"