WPF 中的进度控件

• 下载源代码 - 36.19 KB

引言

这提供了一个免费的用户控件，用于指示应用程序中任何项目的进度。您可以使用WPF提供的进度条，但这是另一种显示进度的不同方式。

背景

我使用此控件来显示服务器上异步查询的进度。“执行查询”按钮被点击时，此进度环控件开始旋转。如果查询失败，则此控件显示红色，否则在成功的情况下显示绿色。

我还使用此控件来显示大型服务器端处理的进度。因为我在我的两个应用程序中发现它很有用，所以我在这里粘贴了代码，以便您也可以使用它。

这还解释了在XAML中使用EventTriggers和动画。

Using the Code

让我们检查一下XAML。

环形

主环由一个路径构成，该路径有两个渐变色标。一个是深色，另一个是浅色。这是在Expression Blend中创建的，方法是组合两个同心圆，用渐变色填充它们，然后将它们组合成一个路径。很简单！

<Path Stretch="Fill" Stroke="#7F505096" Data="M100,63.5 ... 96.565479,0.5 100,0.5 z" 
	Name="ringPath" RenderTransformOrigin="0.5,0.5">
  <Path.RenderTransform>
    <TransformGroup>
      <ScaleTransform ScaleX="1" ScaleY="1"/>
      <SkewTransform AngleX="0" AngleY="0"/>
      <RotateTransform Angle="0"/>
      <TranslateTransform X="0" Y="0"/>
    </TransformGroup>
  </Path.RenderTransform>
  <Path.Fill>
    <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
      <GradientStop x:Name="GradientStop1" Color="Blue" Offset="0"/>
      <GradientStop x:Name="GradientStop2" Color="LightBlue" Offset="1"/>
    </LinearGradientBrush>
  </Path.Fill>
</Path> 

旋转动画

您看到的动画是因为我们将此路径从0旋转到360度，结果渐变颜色也会旋转，视觉上我们看到环的旋转。XAML的`Resources`部分中的`rotateAnimation`具有如下所示的旋转标记

<Storyboard x:Key="rotateAnimation">
    <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="ringPath" 
	Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)
	[2].(RotateTransform.Angle)" RepeatBehavior="Forever">
        <SplineDoubleKeyFrame KeyTime="00:00:00" Value="0"/>
        <SplineDoubleKeyFrame KeyTime="00:00:00.5000000" Value="360"/>
    </DoubleAnimationUsingKeyFrames>
</Storyboard>

颜色变化动画

对于每个状态，都定义了不同的颜色动画。颜色动画将环的渐变颜色色标更改为相应的颜色。每次状态更改时，都会触发不同的事件触发器。让我们以`ErrorState`动画为例

<Storyboard x:Key="errorStateAnimation">
    <ColorAnimation 
         Storyboard.TargetName="GradientStop1"
         Storyboard.TargetProperty="Color"
         From="White" To="Red" 
         Duration="0:0:0.5"
         BeginTime="0:0:0">
    </ColorAnimation>
    <ColorAnimation 
         Storyboard.TargetName="GradientStop2"
         Storyboard.TargetProperty="Color"
         From="White" To="DarkRed" 
         Duration="0:0:0.5"
         BeginTime="0:0:0" />
</Storyboard>

这将浅色渐变色标更改为浅红色，并将深色渐变色标更改为深红色。当错误事件触发器被触发时，颜色将因此以动画的方式更改为红色阴影。

事件触发器

当每个事件触发器被触发时，它都会启动相应的动画。让我们以执行状态事件为例

<EventTrigger RoutedEvent="local:QueryStatus.ExecutingEvent">
    <BeginStoryboard Storyboard="{StaticResource executingStateAnimation}"/>
    <BeginStoryboard Name="rotateAnimation" 
	Storyboard="{StaticResource rotateAnimation}"/>            
</EventTrigger>

这将启动执行状态动画，该动画将颜色转换为绿色。然后它启动旋转事件，该事件开始旋转环。让我们来看一下成功状态事件

<EventTrigger RoutedEvent="local:QueryStatus.SuccessEvent">
    <StopStoryboard BeginStoryboardName="rotateAnimation"/>
    <BeginStoryboard Storyboard="{StaticResource successStateAnimation}"/>
</EventTrigger>

这（以及所有其他状态事件）将首先停止旋转，并将颜色更改为绿色（表示成功）。

代码后置

它公开了一些`public`方法，可以使用此方法的任何客户端都可以使用这些方法。这些`public`方法将触发相应的事件。我已经附加了同步和异步版本的客户端，以演示在两种模式下使用该控件。请注意，在异步模式下，控件的使用不会改变。只有客户端的代码不同。如果代码无法编译（因为您可能没有.NET SP1），只需修复_AsynchronouosWindow.xaml_客户端代码或将其从项目中排除。我已经附加了示例代码，使用进度条控件非常简单。只需添加命名空间，然后包含它即可。如果您设置`height = width`，则它将是一个完美的圆形旋转圆圈，否则它将是一个旋转的椭圆。尽情享受！

历史

• 2009年10月26日：初始发布