[UWP]做个调皮的BusyIndicator

1. 前言

最近突然想要个BusyIndicator。做过WPF开发的程序员对BusyIndicator应该不陌生，Extended WPF Toolkit 提供了BusyIndicator的开源实现，Silverlight Toolkit也有一个，这次想要把这个控件移植到UWP中。

2. 先说点正经的

2.1 BusyIndicator的功能

BusyIndicator的功能很简单，就是提示正在执行操作并遮挡不能被修改的内容。通常它派生自ContentControl并提供public bool IsBusy{ get; set; }属性，当设置IsBusy=True时将Content.IsEnabled设置成False，并显示Overlay、BusyContent和一个ProgressBar。在Silverlight中，它的UI如下：

38937-20180228155216436-1444379714.gif

2.2 移植

Extended WPF Toolkit和Silverlight Toolkit中的BusyIndicator实现基本一致，由于Silverlight和各个XAML平台的兼容性都比较好，我选择了Silverlight Toolkit中的BusyIndicator用于移植。事实证明这是个正确的选择，只改动了几行代码就完美移植成功了。

2.3 改进

既然UWP有ProgressRing，我就不想用ProgressBar来展示Busy的状态。另外，虽然BusyIndicator的ControlTemplate已经够精简了，为了方便将来修改我再进一步简化了XAML，结果如下：

<ContentControl x:Name="content"Content="{TemplateBinding Content}"ContentTemplate="{TemplateBinding ContentTemplate}"ContentTransitions="{TemplateBinding ContentTransitions}"HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}" />
<Rectangle x:Name="overlay"Style="{TemplateBinding OverlayStyle}" />
<ContentPresenter x:Name="busycontent"><Grid HorizontalAlignment="Center"VerticalAlignment="Center"><Grid.RowDefinitions><RowDefinition /><RowDefinition Height="Auto" /></Grid.RowDefinitions><ProgressRing x:Name="ProgressRing"IsActive="True"Style="{TemplateBinding ProgressRingStyle}" /><ContentPresenter Content="{TemplateBinding BusyContent}"ContentTemplate="{TemplateBinding BusyContentTemplate}"Grid.Row="1"FontSize="15"HorizontalAlignment="Center"Foreground="{ThemeResource SystemControlHighlightAccentBrush}" /></Grid>
</ContentPresenter>

和Silverlight/WPF不同的是，需要在ContentControl上绑定ContentTransitions属性。

UWP可以使用VisualState.Setters代替VisualState.Storyboard，这简化了大量XAML，为什么微软早十年没想到这个做法。

Silverlight的BusyIndicator：

<VisualStateManager.VisualStateGroups><VisualStateGroup x:Name="VisibilityStates"><VisualState x:Name="Hidden"><Storyboard><ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.001" Storyboard.TargetName="busycontent" Storyboard.TargetProperty="(UIElement.Visibility)"><DiscreteObjectKeyFrame KeyTime="00:00:00"><DiscreteObjectKeyFrame.Value><Visibility>Collapsed</Visibility></DiscreteObjectKeyFrame.Value></DiscreteObjectKeyFrame></ObjectAnimationUsingKeyFrames><ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.001" Storyboard.TargetName="overlay" Storyboard.TargetProperty="(UIElement.Visibility)"><DiscreteObjectKeyFrame KeyTime="00:00:00"><DiscreteObjectKeyFrame.Value><Visibility>Collapsed</Visibility></DiscreteObjectKeyFrame.Value></DiscreteObjectKeyFrame></ObjectAnimationUsingKeyFrames></Storyboard></VisualState><VisualState x:Name="Visible"><Storyboard><ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.001" Storyboard.TargetName="busycontent" Storyboard.TargetProperty="(UIElement.Visibility)"><DiscreteObjectKeyFrame KeyTime="00:00:00"><DiscreteObjectKeyFrame.Value><Visibility>Visible</Visibility></DiscreteObjectKeyFrame.Value></DiscreteObjectKeyFrame></ObjectAnimationUsingKeyFrames><ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.001" Storyboard.TargetName="overlay" Storyboard.TargetProperty="(UIElement.Visibility)"><DiscreteObjectKeyFrame KeyTime="00:00:00"><DiscreteObjectKeyFrame.Value><Visibility>Visible</Visibility></DiscreteObjectKeyFrame.Value></DiscreteObjectKeyFrame></ObjectAnimationUsingKeyFrames></Storyboard></VisualState></VisualStateGroup><VisualStateGroup x:Name="BusyStatusStates"><VisualState x:Name="Idle"><Storyboard><ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.001" Storyboard.TargetName="content" Storyboard.TargetProperty="(Control.IsEnabled)"><DiscreteObjectKeyFrame KeyTime="00:00:00"><DiscreteObjectKeyFrame.Value><sys:Boolean>True</sys:Boolean></DiscreteObjectKeyFrame.Value></DiscreteObjectKeyFrame></ObjectAnimationUsingKeyFrames></Storyboard></VisualState><VisualState x:Name="Busy"><Storyboard><ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.001" Storyboard.TargetName="content" Storyboard.TargetProperty="(Control.IsEnabled)"><DiscreteObjectKeyFrame KeyTime="00:00:00"><DiscreteObjectKeyFrame.Value><sys:Boolean>False</sys:Boolean></DiscreteObjectKeyFrame.Value></DiscreteObjectKeyFrame></ObjectAnimationUsingKeyFrames></Storyboard></VisualState></VisualStateGroup>
</VisualStateManager.VisualStateGroups>

UWP的BusyIndicator

<VisualStateManager.VisualStateGroups><VisualStateGroup x:Name="VisibilityStates"><VisualState x:Name="Hidden"><VisualState.Setters><Setter Target="overlay.(UIElement.Visibility)"Value="Collapsed" /><Setter Target="busycontent.(UIElement.Visibility)"Value="Collapsed" /></VisualState.Setters></VisualState><VisualState x:Name="Visible" /></VisualStateGroup><VisualStateGroup x:Name="BusyStatusStates"><VisualState x:Name="Idle" /><VisualState x:Name="Busy"><VisualState.Setters><Setter Target="content.(Control.IsEnabled)"Value="False" /></VisualState.Setters></VisualState></VisualStateGroup>
</VisualStateManager.VisualStateGroups>

2.3 其它细节

<Setter Property="BusyContent"Value="Please wait..." />
<Setter Property="IsTabStop"Value="False" />
<Setter Property="OverlayStyle"><Setter.Value><Style TargetType="Rectangle"><Setter Property="Fill"Value="{ThemeResource ApplicationForegroundThemeBrush}" /><Setter Property="Opacity"Value="0.2" /></Style></Setter.Value>
</Setter>
<Setter Property="ProgressRingStyle"><Setter.Value><Style TargetType="ProgressRing"><Setter Property="Height"Value="50" /><Setter Property="Width"Value="50" /><Setter Property="Margin"Value="8,8,8,0" /></Style></Setter.Value>
</Setter>
<Setter Property="DisplayAfter"Value="00:00:00.1" />
<Setter Property="HorizontalAlignment"Value="Stretch" />
<Setter Property="VerticalAlignment"Value="Stretch" />
<Setter Property="HorizontalContentAlignment"Value="Stretch" />
<Setter Property="VerticalContentAlignment"Value="Stretch" />

上面是BusyIndicator DefaultStyle的Setters，有一些细节是实现模板化控件需要注意的：

BusyContent
BusyContent没有在依赖属性定义中的PropertyMetadata给出默认值，而是在Setter中给出，这是模板化控件中依赖属性的最佳做法。PropertyMetadata的默认值应该尽量做到：值类型使用值类型的默认值，引用类型使用Null。

IsTabStop
已经不厌其烦地提醒过复合类型控件要将IsTabStop设置为False，以便在使用键盘导航时其内容可以直接获得焦点。

OverlayStyle和ProgressRingStyle
复合类型控件通常都会像这样为里面某个元素提供Style的属性，代替提供一大堆OverlayBackground，OverlayOpacity等属性。为了使用户清楚这两个Style属性对应的TargetType，可以在BusyIndicator的类型声明上使用StyleTypedPropertyAttribute：

[StyleTypedProperty(Property = "OverlayStyle", StyleTargetType = typeof(Rectangle))]
[StyleTypedProperty(Property = "ProgressRingStyle", StyleTargetType = typeof(ProgressRing))]

IsTabStop和StyleTypedPropertyAttribute的介绍都可见我另一篇文章：了解模板化控件(9)：UI指南

HorizontalContentAlignment和VerticalContentAlignment
使用ContentControl时几乎每次都要设置HorizontalContentAlignment和VerticalContentAlignment为Stretch，SilverlightToolkit中BusyIndicator的作者就很清楚这点。

这两个属性和BusyContent不同，并不是BusyIndicator定义的，而是从父类继承而来。像这种从父类继承而来的属性通常不会在构造函数中设置默认值，而是在DefaultStyle的Setter中设置默认值。

2.4 运行效果

就这样一个BusyIndicator就移植成功了。由于代码部分基本没有改变（除了ProgressBarStyle改成ProgressRingStyle），应该不会出什么大问题。运行效果如下：

38937-20180228221503614-816429547.gif

<busyIndicatorSample:BusyIndicator x:Name="BusyIndicator"><Button HorizontalAlignment="Center"VerticalAlignment="Center"Content="Login"Click="Button_Click"Margin="0,0,0,150" />
</busyIndicatorSample:BusyIndicator>

private async void Button_Click(object sender, RoutedEventArgs e)
{BusyIndicator.IsBusy = true;await Task.Delay(TimeSpan.FromSeconds(3));BusyIndicator.IsBusy = false;
}

3. 来点调皮的

突然来了点兴致，于是就派生出新的控件ExtendBusyIndicator并新增public object BusyInformation{ get; set; }和public object IdleInformation{ get; set; }两个属性，运行效果如下：

38937-20180228224245574-624096409.gif

XAML:

<busyIndicatorSample:ExtendBusyIndicator x:Name="BusyIndicator"Background="White"><busyIndicatorSample:ExtendBusyIndicator.BusyInformation><StackPanel><TextBlock Text="十年后"HorizontalAlignment="Center" /><TextBlock Text="10 years later"HorizontalAlignment="Center"Margin="0,2,0,0" /></StackPanel></busyIndicatorSample:ExtendBusyIndicator.BusyInformation><busyIndicatorSample:ExtendBusyIndicator.IdleInformation><StackPanel><TextBlock Text="这个网页终于加载完了"HorizontalAlignment="Center" /><TextBlock Text="the Web page finally finished loading."HorizontalAlignment="Center"Margin="0,2,0,0" /></StackPanel></busyIndicatorSample:ExtendBusyIndicator.IdleInformation><Button Style="{StaticResource ButtonRevealStyle}"Padding="0"HorizontalAlignment="Center"Background="Transparent"Margin="0,0,0,150"Click="Button_Click"><Image Source="logo1.png"Width="80" /></Button>
</busyIndicatorSample:ExtendBusyIndicator>

4. 莓良心的

38937-20180228222453445-1755781402.gif

5. 结语

BusyIndicator十分实用，毕竟已经经过多年的考验而代码基本没有更改，应该可以使用在UWP的实际项目中。

其实我个人不是很喜欢IsBusy就将Content.IsEnabled设置成False这么简单粗暴，因为这样内容会变成灰色。而且busyContent显示的过程应该是个透明度渐变的过程。这两个点使得执行很快的操作会令UI闪烁一下。而且ControlTemplate中ProgressRing和Overlay的父元素是一个叫busyContent的Grid，但BusyContent（注意大小些）是BusyIndicator的一个属性，内容是Busy状态下显示的文字内容，这样很容易让人混淆。幸运的是模板化控件最大的特色就是对修改UI是开放的，将来可以想办法修改。

ExtendBusyIndicator就算了，闹着玩的。

6. 参考

Extended WPF Toolkit
Silverlight Toolkit - CodePlex Archive
UWP BusyIndicator · telerik UI For UWP

7. 源码

BusyIndicatorSample

转载于:https://www.cnblogs.com/dino623/p/BusyIndicator.html

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/466576.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

STM32——I2C

STM32——I2C

STM32——I2C 宗旨&#xff1a;技术的学习是有限的&#xff0c;分享的精神是无限的。 一、I2C协议 I 2 C &#xff08;Inter-Integrated Circuit&#xff09;协议是由 Philips 公司开发的&#xff0c;由于它具备引脚少、硬件实现简单、可扩展性强、不需要如 USART、CAN 的外部…
阅读更多...
C语言发展简史

C语言发展简史

1、起源C 语言最早的原型是 ALGOL 60 1963 年&#xff0c;剑桥大学将其发展成为 CPL(Combined Programing Language)。1967 年&#xff0c;剑桥大学的 Matin Richards 对 CPL 语言进行了简化&#xff0c;产生了 BCPL 语言。1970 年&#xff0c;美国贝尔实验室(Bell Labs)的 Ken…
阅读更多...
Oracle 系统表大全

Oracle 系统表大全

数据字典dict总是属于Oracle用户sys的。 　　1、用户&#xff1a; 　　　select username from dba_users; 　　改口令 　　　alter user spgroup identified by spgtest; 　　2、表空间&#xff1a; 　　　select * from dba_data_files; 　　　select * from dba_tablespaces…
阅读更多...
Vim 命令

Vim 命令

Vim 命令 (建议可以看看: Practical vim 里面有很多实用的技巧, 据说已经有人翻译并出版了,英文的电子版自己网上搜索即可) 移动:(注意是移动,也就是所谓的剪切再粘贴) m 例如: 将第10至20行内容移动到50行处 进入 normal mod: 命令: : 10,20m50 Enter (注意" : ")…
阅读更多...
STM32——EEPROM

STM32——EEPROM

STM32——EEPROM 宗旨&#xff1a;技术的学习是有限的&#xff0c;分享的精神是无限的。 一、I2C接口读写EEPROM&#xff08;AT24C02&#xff09; ——主模式&#xff0c;分别用作主发送器和主接收器。通过查询事件的方式来确保正常通信。 1、I 2C接口初始化 与其他对GPIO 复用…
阅读更多...
Linus Torvalds谈ECC内存的重要性 痛斥英特尔正在扼杀它

Linus Torvalds谈ECC内存的重要性 痛斥英特尔正在扼杀它

新年假期&#xff0c;Linus Torvalds在邮件列表中发表的一篇火热的帖子引发技术社区关注&#xff0c;人们借此讨论ECC内存的重要性&#xff0c;Torvalds在文章中抨击了英特尔在这方面的”坏政策”&#xff0c;因为特定的市场细分使ECC内存不那么普及。Linus认为&#xff0c;纠错…
阅读更多...
加密和解密算法的兩個實現

加密和解密算法的兩個實現

最近一段時間,集團加強了資安方面的管理,所有敏感的配置字節都必須經過加密處理,把最近用到的幾個加解密類整理了一下,以做備忘. 其實這兩個類實現的方法差不多,只是有些細微區別: 對稱加密演算法類 SymmetricMethodHelperusing System;using System.IO;using System.Security.…
阅读更多...
47.leetcode36_valid_suduko

47.leetcode36_valid_suduko

1.题目分析 Determine if a Sudoku is valid, according to: Sudoku Puzzles - The Rules. The Sudoku board could be partially filled, where empty cells are filled with the character .. A partially filled sudoku which is valid. Note: A valid Sudoku board (partia…
阅读更多...
STM32——SPI接口

STM32——SPI接口

STM32——SPI接口 宗旨&#xff1a;技术的学习是有限的&#xff0c;分享的精神是无限的。 一、SPI协议【SerialPeripheral Interface】 串行外围设备接口&#xff0c;是一种高速全双工的通信总线。在ADC/LCD等与MCU间通信。 1、SPI信号线 SPI 包含 4 条总线&#xff0c;SPI 总…
阅读更多...
这两种printf()函数重定向方法，太实用了

这两种printf()函数重定向方法，太实用了

作者&#xff1a;echobright原文链接&#xff1a;https://blog.csdn.net/qq_29344757/article/details/75363639在前面学习了STM32的串口编程&#xff0c;通过USART1向计算机的串口调试助手打印数据&#xff0c;或者接收计算机串口调试助手的数据&#xff0c;接下来我们可以实现…
阅读更多...
小时级的进度监控工具

小时级的进度监控工具

一直在找具体到小时级别的进度监控工具&#xff0c;MS Project甘特图出现也都是天为单位&#xff0c;试用GVCGantt也不行。由于小时级别也适用于个人管理。找了些个人管理模板&#xff0c;不是很理想。直到最近接触到scrum中的burn down chart才忽然明白&#xff0c;这就是我想…
阅读更多...
【转】oracle数据库中varchar2陷阱

【转】oracle数据库中varchar2陷阱

转自&#xff1a;http://www.cnblogs.com/iyangyuan/p/3491215.html oracle数据库相信大家都比较熟悉&#xff0c;数据库中有一种非常常用的数据类型&#xff1a;字符串型。 对应该类型&#xff0c;在oracle中有三种比较常用的类型&#xff1a;varchar2(byte)、varchar2(char)、…
阅读更多...
浅析Linux 64位系统虚拟地址和物理地址的映射及验证方法

浅析Linux 64位系统虚拟地址和物理地址的映射及验证方法

前言有好久没更新了&#xff0c;这段时间发生了挺多大喜事哈。但是也还是有挺久没更新了&#xff0c;不得不意识到自己是个小菜鸡&#xff0c;就算是小菜鸡也要做一只快乐小菜鸡。就算更新慢但是我依然会持续更新&#xff0c;因为更文使我快乐。虚拟内存先简单介绍一下操作系统…
阅读更多...
SPI、I2C、UART三种串行总线协议的区别

SPI、I2C、UART三种串行总线协议的区别

SPI、I2C、UART三种串行总线协议的区别 宗旨&#xff1a;技术的学习是有限的&#xff0c;分享的精神是无限的。 第一个区别当然是名字&#xff1a; SPI(Serial Peripheral Interface&#xff1a;串行外设接口); I2C(INTER IC BUS&#xff1a;意为IC之间总线) UART(…
阅读更多...
FLEX组件AnyChart实例教程.

FLEX组件AnyChart实例教程.

自己看吧&#xff0c;十分详细. 这是其中一个例子&#xff1a; http://www.anychart.com/products/anychart/docs/platforms/flex/samples/gauge_tank/GaugeTank.swf http://www.anychart.com/products/anychart/docs/platforms/flex/
阅读更多...
C语言指针：从底层原理到花式技巧，用图文和代码帮你讲解透彻

C语言指针：从底层原理到花式技巧，用图文和代码帮你讲解透彻

一、前言二、变量与指针的本质三、指针的几个相关概念四、指向不同数据类型的指针五、总结一、前言如果问C语言中最重要、威力最大的概念是什么&#xff0c;答案必将是指针&#xff01;威力大&#xff0c;意味着使用方便、高效&#xff0c;同时也意味着语法复杂、容易出错。指针…
阅读更多...
软件过程改进

软件过程改进

对于软件企业来说&#xff0c;软件过程是整个企业最复 杂、最重要的业务流程&#xff0c;软件产品就是软件企业的生命&#xff0c;改进整个企业的业务流程&#xff0c;最重要的还是要改进它的软件过程。多年以来&#xff0c;人们认识到要想高效率、高质量 和低成本地开发软件&a…
阅读更多...
ARM

ARM

ARM 宗旨&#xff1a;技术的学习是有限的&#xff0c;分享的精神是无限的。 1 、ARM处理器的特点 ARM 处理器具有耗电少&#xff0c;功能强大&#xff0c;16 位/32 位双指令集等众多优点。主要有以下六个主要特点&#xff1a; ① 体积小、低功耗&#xff0c;低成本和高性能&am…
阅读更多...
Linux下精准踢掉登录用户-pkill命令

Linux下精准踢掉登录用户-pkill命令

pkill -kill -t 用户的TTY pkill -9 用户的TTY 转载于:https://www.cnblogs.com/setart/p/8496165.html
阅读更多...
解决一个I2C读写问题

解决一个I2C读写问题

之前写关于I2C相关的文章排查一个触摸屏驱动问题MTK 平台TP调试遇坑1、问题今天遇到一个问题&#xff0c;我们有一个芯片&#xff0c;I2C读写失败&#xff0c;导致录音有问题&#xff0c;而且是偶现的。log提示看到是返回 -6<3>[ 730.336308] (3)[2085:tinycap]es7243_…
阅读更多...
最新文章

Copyright @ 2022~2023