[UWP]创建一个ProgressControl

原文:[UWP]创建一个ProgressControl

1. 前言

博客园终于新增了UWP的分类，我来为这个分类贡献第一篇博客吧。

UWP有很多问题，先不说生态的事情，表单、验证、输入、设计等等一堆基本问题缠身。但我觉得最应该首先解决的绝对是Blend，那个随随便便就崩溃、报错、比Silverlight时代还差、不能用的Blend For Visal Studio。不过无论Blend怎么坏都不能让我写漂亮控件的心屈服，毕竟写了这么多年XAML，只靠Visual Studio勉勉强强还是可以写样式的，这篇文章介绍的控件就几乎全靠Visual Studio写了全部样式（其实VisalStudio的设计器也一直报错）。

在之前写的文章创建一个进度按钮中我实现了一个ProgressButton，它主要有以下几个功能：

有Ready、Started、Completed、Faulted四种状态；
从Ready状态切换到Started状态按钮会从方形变成圆形；
在Started状态下使用Ellipse配合StrokeDashArray显示进度；
完成后可切换到Completed状态；
出错后可切换到Faulted状态；

运行效果如下：

无论是实现过程还是结果都很有趣，但还是有几个问题：

没有Paused状态；
Progress限定在0到1之间，其实应该参考ProgressBar可以Minimum和Maximum；
除了可以点击这点好像和Button关系不大，所以也不应该命名为-Button；

因为以上理由决定做个新的控件。

2. 改进的结果

新控件名就叫ProgressControl---因为无奈真的想不到叫什么名字了。运行效果如下：

它有Ready、Started、Completed、Faulted和Paused五个状态。其中Paused即暂停状态，在Started状态点击控件将可进入Paused状态，并且显示CancelButton，这时候点击CancelButton将回到Ready状态；当然点击继续的图标就回到Started状态。

3. 实现

由于ProgressControl的Control Template已经十分复杂，所以将它拆分成两个部分：

ProgressStateIndicator，主要用于显示各种状态，功能和以前的ProgressButton相似，还是直接继承自Button；
CancellButton，外观上模仿progressStateIdicator，在Paused状态下显示；
懒得为它命名的Ellipse，用于在Started状态下显示进度；

ProgressControl由以上三部分组成，Ready状态（默认状态）下只显示ProgressStateIndicator，点击ProgressStateIndicator触发EventHandler StateChanging和EventHandler StateChanged事件并转换状态；Started状态下同时显示Ellipse；Paused状态下隐藏Ellipse并显示CancelButton。

3.1处理代码

和之前强调的一样，先完成代码部分再完成UI部分会比较高效。而且UI部分怎么呈现、怎么做动画都是它的事，代码部分完成后就可以甩手不管由得XAML去折腾了。

首先完成ProgressStateIndicator，继承Button，提供一个public ProgressState State { get; set; }属性，并在State改变时改变VisualState。它的功能仅此而已，之所以把它独立出来是因为清楚知道它的ControlTemplate比较复杂，如果不把它独立出来ProgressControl的ControlTemplate就复杂到没法维护了。代码如下：


[TemplateVisualState(GroupName = ProgressStatesGroupName, Name = ReadyStateName)]
[TemplateVisualState(GroupName = ProgressStatesGroupName, Name = StartedStateName)]
[TemplateVisualState(GroupName = ProgressStatesGroupName, Name = CompletedStateName)]
[TemplateVisualState(GroupName = ProgressStatesGroupName, Name = FaultedStateName)]
[TemplateVisualState(GroupName = ProgressStatesGroupName, Name = PausedStateName)]
public partial class ProgressStateIndicator : Button
{public ProgressStateIndicator(){this.DefaultStyleKey = typeof(ProgressStateIndicator);}/// <summary>/// 获取或设置State的值/// </summary>  public ProgressState State{get { return (ProgressState)GetValue(StateProperty); }set { SetValue(StateProperty, value); }}/// <summary>/// 标识 State 依赖属性。/// </summary>public static readonly DependencyProperty StateProperty =DependencyProperty.Register("State", typeof(ProgressState), typeof(ProgressStateIndicator), new PropertyMetadata(ProgressState.Ready, OnStateChanged));private static void OnStateChanged(DependencyObject obj, DependencyPropertyChangedEventArgs args){ProgressStateIndicator target = obj as ProgressStateIndicator;ProgressState oldValue = (ProgressState)args.OldValue;ProgressState newValue = (ProgressState)args.NewValue;if (oldValue != newValue)target.OnStateChanged(oldValue, newValue);}protected override void OnApplyTemplate(){base.OnApplyTemplate();UpdateVisualStates(false);}protected virtual void OnStateChanged(ProgressState oldValue, ProgressState newValue){UpdateVisualStates(true);}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;case ProgressState.Paused:progressState = PausedStateName;break;default:progressState = ReadyStateName;break;}VisualStateManager.GoToState(this, progressState, useTransitions);}
}

代码是很普通的模板化控件的做法，记住OnApplyTemplate()中的UpdateVisualStates(false)参数一定要是False。

接下来完成ProgressControl。ProgressControl继承RangeBase，只是为了可以使用它的Maximum、Minimum和Value三个属性。为了可以显示内容模仿ContentControl实现了Content属性，因为不是直接继承ContentControl，所以要为控件添加[ContentProperty(Name = nameof(Content))]Attribute。模仿ContentControl的部分代码可见了解模板化控件(2)：模仿ContentControl 。

ProgressCotrol也提供了public ProgressState State { get; set; }属性，这部分和ProgressStateIndicator基本一致。

最后是两个TemplatePart：ProgressStateIndicator和CancelButton。点击这两个控件触发状态改变的事件并改变VisualState：

protected override void OnApplyTemplate()
{base.OnApplyTemplate();_progressStateIndicator = GetTemplateChild(ProgressStateIndicatorName) as ProgressStateIndicator;if (_progressStateIndicator != null)_progressStateIndicator.Click += OnGoToNextState;_cancelButton = GetTemplateChild(CancelButtonName) as Button;if (_cancelButton != null)_cancelButton.Click += OnCancel;UpdateVisualStates(false);
}private void OnGoToNextState(object sender, RoutedEventArgs e)
{switch (State){case ProgressState.Ready:ChangeStateCore(ProgressState.Started);break;case ProgressState.Started:ChangeStateCore(ProgressState.Paused);break;case ProgressState.Completed:ChangeStateCore(ProgressState.Ready);break;case ProgressState.Faulted:ChangeStateCore(ProgressState.Ready);break;case ProgressState.Paused:ChangeStateCore(ProgressState.Started);break;default:throw new ArgumentOutOfRangeException();}
}private void OnCancel(object sender, RoutedEventArgs e)
{if (ChangeStateCore(ProgressState.Ready))Cancelled?.Invoke(this, EventArgs.Empty);
}private bool ChangeStateCore(ProgressState newstate)
{var args = new ProgressStateEventArgs(State, newstate);OnStateChanging(args);StateChanging?.Invoke(this, args);if (args.Cancel)return false;State = newstate;return true;
}

至于Value属性不需要任何处理，只是给UI提供可绑定的属性就够了。

3.2 处理UI

大部分UI部分用到的技术都在上一篇文章创建一个进度按钮介绍过了，这次只做了一些改进。

3.2.1 ContentControlStyle

<Style TargetType="ContentControl"x:Key="ContentElementStyle"><Setter Property="Foreground"Value="White" /><Setter Property="Template"><Setter.Value><ControlTemplate TargetType="ContentControl"><Grid Margin="0"HorizontalAlignment="{TemplateBinding HorizontalAlignment}"VerticalAlignment="{TemplateBinding VerticalAlignment}"><control:DropShadowPanel OffsetX="0"OffsetY="0"BlurRadius="5"ShadowOpacity="0.3"VerticalContentAlignment="Stretch"HorizontalContentAlignment="Stretch"><Ellipse x:Name="CompletedRectangle"Fill="{TemplateBinding Background}" /></control:DropShadowPanel><FontIcon Glyph="{TemplateBinding Content}"Foreground="{TemplateBinding Foreground}"FontSize="{TemplateBinding FontSize}"VerticalAlignment="Center"HorizontalAlignment="Center"x:Name="CompletedIcon" /></Grid></ControlTemplate></Setter.Value></Setter>
</Style><Style TargetType="ContentControl"x:Key="CompltedElementStyle"BasedOn="{StaticResource ContentElementStyle}"><Setter Property="Background"Value="LightSeaGreen" /><Setter Property="Content"Value="" />
</Style><Style TargetType="ContentControl"x:Key="FaultElementStyle"BasedOn="{StaticResource ContentElementStyle}"><Setter Property="Background"Value="MediumVioletRed" /><Setter Property="Content"Value="" />
</Style><Style TargetType="ContentControl"x:Key="PausedElementStyle"BasedOn="{StaticResource ContentElementStyle}"><Setter Property="Background"Value="CornflowerBlue" /><Setter Property="Content"Value="" />
</Style><Style TargetType="ContentControl"x:Key="CancelElementStyle"BasedOn="{StaticResource ContentElementStyle}"><Setter Property="Background"Value="OrangeRed" /><Setter Property="Content"Value="" />
</Style>

之前的ProgressButton中ControlTemplate有些复杂，这次用于Started、Completed和Faulted等状态下显示的元素都使用样式并统一了它们的ContentTemplete，大大简化了ProgressStateIndicator的ControlTemplate。

3.2.2 AnimationSet

在Started到Paused之间有一个平移的过渡，为了使位移根据元素自身的宽度决定我写了个RelativeOffsetBehavior，里面用到了UWP Community Toolkit 的 AnimationSet ：

if (AssociatedObject != null)
{var offsetX = (float)(AssociatedObject.ActualWidth * OffsetX);var offsetY = (float)(AssociatedObject.ActualHeight * OffsetY);var animationSet = AssociatedObject.Offset(offsetX, offsetY, duration: 0, easingType: EasingType.Default);animationSet?.Start();
}

3.2.3 Implicit Composition Animations

由于有些动画是重复的，例如显示进度的Ellipse从Ready到Started及从Paused到Started都是从Collapsed变到Visible，并且Opacity从0到1。为了减轻VisualTransition的负担，在VisualTransition中只改变Ellipse的Visibility，Opacity的动画使用了UWP Community Toolkit 的 Implicit Composition Animations ：

<animations:Implicit.HideAnimations><animations:ScalarAnimation Target="Opacity"Duration="0:0:1"To="0.0"/>
</animations:Implicit.HideAnimations>
<animations:Implicit.ShowAnimations><animations:OpacityAnimation Duration="0:0:3"From="0"To="1.0" />
</animations:Implicit.ShowAnimations>

这段XML即当Ellipse的Visibility值改变时调用的动画。

4. 结语

ProgressControl已经很复杂了，只是这个控件XAML就多达800行，还有一些Behavior配合。如果可以使用Blend的话可能可以减少一些XAML，而且精力都放在XAML上，可能还有考虑不周的地方。

除了使用UWP Community Toolkit的部分基本上移植到WPF，而UWP Community Toolkit的部分应该也可以使用其它方法代替。

5. 参考

创建一个进度按钮
AnimationSet
Implicit Composition Animations

6. 源码

Progress-Control-Sample