WPF自定义控件与样式(11)-等待/忙/正在加载状态-控件实现
Posted ljdong7
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了WPF自定义控件与样式(11)-等待/忙/正在加载状态-控件实现相关的知识,希望对你有一定的参考价值。
一.前言
申明:WPF自定义控件与样式是一个系列文章,前后是有些关联的,但大多是按照由简到繁的顺序逐步发布的等,若有不明白的地方可以参考本系列前面的文章,文末附有部分文章链接。
本文主要有三种实现方式:
- 简单忙碌状态控件BusyBox;
- Win8/win10效果忙碌状态控件ProgressRing;
- 弹出异步等待框WaitingBox;
二.简单忙碌状态控件BusyBox
效果图:
通过属性"IsActive"控制控件是否启用,后台C#代码:
/// <summary>
/// BusyBox.xaml 的交互逻辑
/// </summary>
public partial class BusyBox : UserControl
{
public static readonly DependencyProperty IsActiveProperty = DependencyProperty.Register("IsActive", typeof(bool), typeof(BusyBox), new PropertyMetadata(false));
/// <summary>
/// 是否启用
/// </summary>
public bool IsActive
{
get { return (bool)GetValue(IsActiveProperty); }
set { SetValue(IsActiveProperty, value); }
}
static BusyBox()
{
DefaultStyleKeyProperty.OverrideMetadata(typeof(BusyBox), new FrameworkPropertyMetadata(typeof(BusyBox)));
}
}
使用了一个字体图标,触发器中实现动画显示的控制,样式代码:
<Style TargetType="{x:Type local:BusyBox}">
<Setter Property="Foreground" Value="{StaticResource TextForeground}"></Setter>
<Setter Property="Width" Value="32"></Setter>
<Setter Property="Height" Value="32"></Setter>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type local:BusyBox}">
<Grid VerticalAlignment="Center" HorizontalAlignment="Center" >
<Viewbox Stretch="Uniform" VerticalAlignment="Center" HorizontalAlignment="Center">
<TextBlock Text="" x:Name="FIcon" FontSize="36" Style="{StaticResource FIcon}" RenderTransformOrigin="0.5,0.5"
Foreground="{TemplateBinding Foreground}">
<TextBlock.RenderTransform>
<RotateTransform x:Name="TransFIcon" Angle="0"/>
</TextBlock.RenderTransform>
</TextBlock>
</Viewbox>
</Grid>
<ControlTemplate.Triggers>
<!--激活状态-->
<Trigger Property="IsActive" Value="true">
<Setter Property="Visibility" Value="Visible" TargetName="FIcon"/>
<Trigger.EnterActions>
<BeginStoryboard >
<Storyboard >
<DoubleAnimation RepeatBehavior="Forever" Storyboard.TargetName="TransFIcon"
Storyboard.TargetProperty="Angle" To="360" Duration="0:0:2.5"/>
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
<Trigger.ExitActions>
<BeginStoryboard >
<Storyboard >
<DoubleAnimation RepeatBehavior="Forever" Storyboard.TargetName