[UWP]创建一个进度按钮

1. 前言

最近想要一个进度按钮。

传统上UWP上处理进度可以这样实现，首先是XAML，包括一个ProgressBar和一个按钮：

<StackPanel Orientation="Horizontal" Margin="0,30" >

    <ProgressBar x:Name="ProgressBar" Maximum="1" Width="230"/>

    <Button x:Name="Button" Content="Download"

            Click="OnStartProgress" Margin="20,0,0,0"/>

</StackPanel>

然后是服务端，假设我有这样一个服务：

public class TestService

{

    public event EventHandler<double> ProgressChanged;

    public async Task Start(bool throwException = false)

    {

        IsStarted = true;

        try

        {

            ProgressChanged?.Invoke(this, _progress);

            await Task.Delay(1000);

            while (_progress < 1)

            {

                await Task.Delay(100);

                _progress += 0.03;

                ProgressChanged?.Invoke(this, _progress);

                if (_progress > 0.7 && throwException)

                    throw new Exception("test");

                if (IsPaused)

                    return;

            }

            IsCompleted = true;

        }

        finally

        {

            IsStarted = false;

        }

    }

}

接下来就是用代码处理：

private async void OnStartProgress(object sender, Windows.UI.Xaml.RoutedEventArgs e)

{

    Button.Visibility = Windows.UI.Xaml.Visibility.Collapsed;

    try

    {

        var uiSettings = new Windows.UI.ViewManagement.UISettings();

        Windows.UI.Color color = uiSettings.GetColorValue(UIColorType.Accent);

        var brush = new SolidColorBrush(color);

        ProgressBar.Foreground = brush;

        var testService = new TestService();

        testService.ProgressChanged += (s, args) => { ProgressBar.Value = args; };

        await testService.Start(ThrowExceptionElement.IsOn);

    }

    catch (Exception ex)

    {

        var brush = new SolidColorBrush(Colors.PaleVioletRed);

        ProgressBar.Foreground = brush;

    }

    finally

    {

        Button.Visibility = Windows.UI.Xaml.Visibility.Visible;

    }

}

点击按钮开始进度，隐藏按钮；进度完成后重新显示按钮。运行效果如下：

出错的时候将ProgressBar的Foreground设置成红色。这里偷懒用代码处理，其实用VisualState处理会更好。效果如下：

基本上这样就够用了，Windows 10里通常也是几个按钮配合ProgressBar来实现进度的控制。但这样做XAML部分不能复用，同时管理Button和ProgressBar也比较复杂，在空间有局限的地方也不能使用。

结果还是自己做了个ProgressButton来用。

2. 成果

ProgressButton实现了上述UI的功能：

如上图所示，ProgressButton只在几种状态间转换：

Ready，普通的状态，因为“Normal”已经被“CommonStates”占用，用“Ready”还算比较合适。
Started，开始的状态（说不定“InProgress”比较合适）。
Completed，完成的状态。
Faulted，出错的状态。

本来还应该有Paused状态，但还没想好UI上应该怎么呈现，因为Paused状态下应该有Cancel和Restart两种动作（可以参考下图应用商店的下载页面），在一个按钮上不容易同时呈现这两种动作。而且暂时还不需要这个功能，这次就不实现了。

3. 实现

通常我建议先写完所有代码，再用Blend实现UI，这样会比在代码和UI间交错地工作更高效。

3.1 处理代码

ProgressButton 的基本代码如下（不包含依赖属性和const string等内容）：

[TemplateVisualState(GroupName = ProgressStatesGroupName, Name = ReadyStateName)]

[TemplateVisualState(GroupName = ProgressStatesGroupName, Name = StartedStateName)]

[TemplateVisualState(GroupName = ProgressStatesGroupName, Name = CompletedStateName)]

[TemplateVisualState(GroupName = ProgressStatesGroupName, Name = FaultedStateName)]

public partial class ProgressButton : Button

{

    public ProgressButton()

    {

        this.DefaultStyleKey = typeof(ProgressButton);

        this.Click += OnClick;

    }

    public ProgressState State

    {

        get { return (ProgressState)GetValue(StateProperty); }

        set { SetValue(StateProperty, value); }

    }

    public double Progress

    {

        get { return (double)GetValue(ProgressProperty); }

        set { SetValue(ProgressProperty, value); }

    }

    public event EventHandler StateChanged;

    public event EventHandler<ProgressStateChangingEventArgs> StateChanging;

    protected override void OnApplyTemplate()

    {

        base.OnApplyTemplate();

        UpdateVisualStates(false);

    }

    protected virtual void OnStateChanged(ProgressState oldValue, ProgressState newValue)

    {

        if (newValue == ProgressState.Ready)

            Progress = 0;

        UpdateVisualStates(true);

        StateChanged?.Invoke(this, EventArgs.Empty);

    }

    protected virtual void OnProgressChanged(double oldValue, double newValue)

    {

        if (newValue < 0)

            Progress = 0;

        if (newValue > 1)

            Progress = 1;

    }

    private void OnClick(object sender, RoutedEventArgs e)

    {

        switch (State)

        {

            case ProgressState.Ready:

                ChangeStateCore(ProgressState.Started);

                break;

            case ProgressState.Started:

                ChangeStateCore(ProgressState.Ready);

                break;

            case ProgressState.Completed:

                ChangeStateCore(ProgressState.Ready);

                break;

            case ProgressState.Faulted:

                ChangeStateCore(ProgressState.Ready);

                break;

        }

    }

    private void UpdateVisualStates(bool useTransitions)

    {

        string progressState;

        switch (State)

        {

            case ProgressState.Ready:

                progressState = ReadyStateName;

                break;

            case ProgressState.Started:

                progressState = StartedStateName;

                break;

            case ProgressState.Completed:

                progressState = CompletedStateName;

                break;

            case ProgressState.Faulted:

                progressState = FaultedStateName;

                break;

            default:

                progressState = ReadyStateName;

                break;

        }

        VisualStateManager.GoToState(this, progressState, useTransitions);

    }

    private void ChangeStateCore(ProgressState newstate)

    {

        var args = new ProgressStateChangingEventArgs(this.State, newstate);

        if (args.OldValue == ProgressState.Started && args.NewValue == ProgressState.Ready)

            args.Cancel = true;

        OnStateChanging(args);

        StateChanging?.Invoke(this, args);

        if (args.Cancel)

            return;

        State = newstate;

    }

    protected virtual void OnStateChanging(ProgressStateChangingEventArgs args)

    {

    }

}

ProgressButton直接继承Button，并且包含如下功能：

包含 public ProgressState State和public double Progress两个属性。
使用TemplateVisualState声明了控件模板对应四种状态的VisualState。
处理Click事件在各个状态之间切换，通过EventHandler StateChanged通知用户State改变的结果，并且使用EventHandler StateChanging为用户提供了控制这个过程的途径。

基本使用方式如下：

private async void OnStateChanged(object sender, EventArgs e)

{

    switch (ProgressButton.State)

    {

        case ProgressState.Started:

            try

            {

                var testService = new TestService();

                testService.ProgressChanged += (s, args) => { ProgressButton.Progress = args; };

                await testService.Start(ThrowExceptionElement.IsOn);

                ProgressButton.State = ProgressState.Completed;

            }

            catch (Exception)

            {

                ProgressButton.State = ProgressState.Faulted;

            }

            break;

    }

}

ProgressButton的代码量不多，功能上已满足我目前的需求。

3.2 处理UI

接来下处理UI，处理UI的原则是不要为了UI上的任何功能修改ProgressButton.cs，避免UI和代码间的耦合。

3.2.1 原理

如前所示，ProgressButton将一个矩形的按钮转变成圆形，再在圆形的边框上显示进度。这两个功能的实现方式在以前的文章中有介绍过。

在实用的Shape指南中介绍了Rectangle的public System.Double RadiusX { get; set; }和public System.Double RadiusY { get; set; }分别用于指定用于使矩形的角变圆的椭圆的x轴和 y轴半径。只要把Rectangle的宽高设成一致，RadiusX和RadiusY设成宽高的一半，Rectangle看上去就成了一个普通的Ellipse。下图展示了 RadiusX="50" RadiusY="20"的Rectangle的圆角和Width="100" Height="40"的Ellipse(x轴半径50，y轴半径20)基本重合在一起。：

在用Shape做动画中介绍了怎么使用StrokeDashArray做进度提示动画：

在理解及扩展Expander中介绍了怎么对StackPanel做拉伸动画，只是这次为了让内容可以变形将StackPanel换成Grid：

在ProgressButton的ControlTemplate中这三个功能都用Behavior做成动画了，同样在用Shape做动画介绍了怎么使用Behavior。（最近常常用Behavior，简直走火入魔。）

这么看来ProgressButton完全是以前介绍过的技术的组合应用，几乎没有新知识。

3.2.2 假装成普通Button

UWP的Button的ControlTemplate中只有一个ContentPresenter，边框、背景等都由这个ContentPresenter呈现。ProgressButton为了对边框和背景变形，移除了ContentPresenter的这部分内容，改为由一个Rectangle呈现：

<Rectangle x:Name="Rectangle"

           StrokeThickness="{Binding RelativeSource={RelativeSource Mode=TemplatedParent},Path=BorderThickness,Converter={StaticResource BorderToStrokeThicknessConverter}}"

           Stroke="{TemplateBinding BorderBrush}"

           Fill="{TemplateBinding Background}">

由于Thickness BorderThickness和double StrokeThickness的类型不匹配，所以用BorderToStrokeThicknessConverter转换。

3.2.3 ControlTemplate结构

如上图所示，除了Rectangle，还另外添加了显示进度的Ellipse，显示Completed状态的CompletedElement和显示Faulted状态的FaultedElement。其实后面两个元素可以交由Rectangle处理，但我的Blend出了问题不能编辑ControlTemplate，ProgressButton所有动画都要手写，这样实现方式就有了很大限制，多了两个Element虽然结构变复杂，但控制它们只需要对Opacity做动画，还算比较轻松。反正Button只是小小的一块元素，就算结构再复杂对整体性能影响有限，我不会太介意这点复杂性。

3.2.4 FontIcon

<FontIcon Glyph=""

          Foreground="White"

          FontSize="{TemplateBinding FontSize}"

          x:Name="CompletedIcon" />

CompletedElement和FaultedElement中的图标（√和×）使用了FontIcon，并且FontSize通过TemplateBinding绑定了FontSize，这样的好处是这两个图标的大小可以和按钮的字体保持一致。其实反正是矢量元素，用Path再配合ViewBox也可以达到同样效果，但只是简单图案的话使用FontIcon明显简洁方便多了。

3.2.5 DropShadowPanel

CompletedElement和FaultedElement里都用上了DropShadowPanel，这样UI上好看一点点。UWP中的Ellipse常常能看到锯齿，使用带圆角的元素时要注意这点，适当使用DropShadow能让锯齿看上去不那么明显，这是我常用的小技巧。在WPF中阴影效果对性能影响很大，而且应用阴影效果的元素尺寸越大对性能的影响就越大。但Silverlight以后性能影响就变小了，我没测试过UWP的情况，应该不会比Silverlight差吧。何况按钮的尺寸基本都不大，就算再怎么乱来对性能影响都有限。

3.2.6 VisualState

如果Blend没出错应该可以看到上图的所有状态。其中FocusStates基本上不会去处理。ProgressButton在Button的ControlTemplate基础上添加了ProgressStates。虽然ProgressButton中按钮的基本功能不是重点，但还是需要细心处理CommonStates的各种状态。

4. 其它

由于UWP的元素基本是矢量元素，ProgressButton也得益于这个优点，在狭窄空间也能表现得很好，配合StateChanged和StateChanging事件可以扩展更多的用法：

另外，虽然没有Paused状态，但配合ProgressBar和StateChanging事件，还是可以实现Paused-Restar的基本功能：

<Grid >

    <Grid.ColumnDefinitions>

        <ColumnDefinition />

        <ColumnDefinition Width="Auto" />

    </Grid.ColumnDefinitions>

    <ContentControl Content="{Binding}"

                    Margin="5,0"

                    VerticalAlignment="Center" />

    <local:ProgressButton Content="download"

                          x:Name="ProgressButton"

                          Margin="5,0"

                          Grid.Column="1"

                          HorizontalAlignment="Right"

                          StateChanged="OnCase3StateChanged"

                          StateChanging="OnCase3StateChanging"

                         />

    <ProgressBar Grid.ColumnSpan="2"

                 Maximum="1"

                 ShowPaused="{Binding ElementName=ProgressButton,Path=State,Converter={StaticResource ProgressStateToPausedConverter}}"

                 Value="{Binding ElementName=ProgressButton,Path=Progress}"

                 Style="{StaticResource ProgressBarStyle1}"

                 Foreground="#1D0490FF"

                 VerticalContentAlignment="Stretch"

                 VerticalAlignment="Stretch"

                 IsHitTestVisible="False"/>

</Grid>

5. 结语

做完后才有点后悔，其实ProgressButton不应该继承Button，既然不是Button好像也不应该命名为-Button。如果继承自ProgressBar的话可以直接使用它的Minimum和Maximum，Progress也不用限定在0到1之间。

由于UWP没有Resizing动画，ProgressButton改变宽度的动画实现得不算很好，从上面可以看到即使内容从'download'变成'open'，ProgressButton的宽度还是'download'的宽度，这是ProgressButton的另一个遗憾。

顺便一提，虽然没有测试过但我想大部分代码可以兼容WPF。

6. 参考

How to Create a Circular Progress Button.htm

7. 源码

Progress Button Sample

巴特西