WPF Loading

背景：WPF项目中，经常会处理一个或者多个耗时很久的任务，比如调用服务的数据查询然后把N条数据加载到列表控件。这种情况下如果采用一般的方式同步处理那么WPF的UI就会失去响应，卡死在那个地方，整个系统可能都无法操作，这对用户来说简直就是太不友好了，也得傻傻的等待任务完成才能干其他事件......

这个问题的解决方法都是采用多线程来处理，一般是开起一个后台线程去完成这些任务，这样UI线程仍然可以响应用户的其它操作，等待后台把任务处理完毕了在通知UI、通知用户。这样不仅提高了效率、也让系统的体验更好。

WPF的WPFToolKit、WPFToolKitExtended里面给我提供了一个BusyIndicator的控件（具体用法这里不讲了，有兴趣的朋友自己去查吧）。使用它可以很好的提示用户系统正在处理的任务和进度等。。。但是它的样式外观个人觉得不大好，还是比较喜欢那种转圈的。于是自己模仿它重新写了一个控件，用法和BusyIndicator一样，在这里分享一下，希望对大家有用。下面是效果图：

 

下面贴出控件后台代码及其实现动画的代码仅供参考： 

 using System;
 using System.Windows;
 using System.Windows.Controls;
 using System.Windows.Shapes;
 using System.Windows.Threading;
 using System.Windows.Media;
 using System.Windows.Media.Animation;
 
 namespace BusyIndicator
 {
     /// <summary>
     /// A control to provide a visual indicator when an application is busy.
     /// </summary>
     [TemplateVisualState(Name = VisualStates.StateIdle, GroupName = VisualStates.GroupBusyStatus)]
     [TemplateVisualState(Name = VisualStates.StateBusy, GroupName = VisualStates.GroupBusyStatus)]
     [TemplateVisualState(Name = VisualStates.StateVisible, GroupName = VisualStates.GroupVisibility)]
     [TemplateVisualState(Name = VisualStates.StateHidden, GroupName = VisualStates.GroupVisibility)]
     [StyleTypedProperty(Property = "OverlayStyle", StyleTargetType = typeof(Rectangle))]
     [StyleTypedProperty(Property = "ProgressBarStyle", StyleTargetType = typeof(ProgressBar))]
     public class BusyIndicator : ContentControl
     {
         /// <summary>
         /// Gets or sets a value indicating whether the BusyContent is visible.
         /// </summary>
         protected bool IsContentVisible { get; set; }
 
         /// <summary>
         /// Timer used to delay the initial display and avoid flickering.
         /// </summary>
         private DispatcherTimer _displayAfterTimer;
 
         /// <summary>
         /// Instantiates a new instance of the BusyIndicator control.
         /// </summary>
         public BusyIndicator()
         {
             DefaultStyleKey = typeof(BusyIndicator);
             _displayAfterTimer = new DispatcherTimer();
             _displayAfterTimer.Tick += new EventHandler(DisplayAfterTimerElapsed);
             this.BusyContent = InitBusyContent();
         }
 
         /// <summary>
         /// Overrides the OnApplyTemplate method.
         /// </summary>
         public override void OnApplyTemplate()
         {
             base.OnApplyTemplate();
             ChangeVisualState(false);
         }
 
         /// <summary>
         /// Handler for the DisplayAfterTimer.
         /// </summary>
         /// <param name="sender">Event sender.</param>
         /// <param name="e">Event arguments.</param>
         private void DisplayAfterTimerElapsed(object sender, EventArgs e)
         {
             _displayAfterTimer.Stop();
             IsContentVisible = true;
             ChangeVisualState(true);
         }
 
         /// <summary>
         /// Changes the control's visual state(s).
         /// </summary>
         /// <param name="useTransitions">True if state transitions should be used.</param>
         protected virtual void ChangeVisualState(bool useTransitions)
         {
             VisualStateManager.GoToState(this, IsBusy ? VisualStates.StateBusy : VisualStates.StateIdle, useTransitions);
             VisualStateManager.GoToState(this, IsContentVisible ? VisualStates.StateVisible : VisualStates.StateHidden, useTransitions);
         }
 
         /// <summary>
         /// Gets or sets a value indicating whether the busy indicator should show.
         /// </summary>
         public bool IsBusy
         {
             get { return (bool)GetValue(IsBusyProperty); }
             set { SetValue(IsBusyProperty, value); }
         }
 
         /// <summary>
         /// Identifies the IsBusy dependency property.
         /// </summary>
         public static readonly DependencyProperty IsBusyProperty = DependencyProperty.Register(
             "IsBusy",
             typeof(bool),
             typeof(BusyIndicator),
             new PropertyMetadata(false, new PropertyChangedCallback(OnIsBusyChanged)));
 
         /// <summary>
         /// IsBusyProperty property changed handler.
         /// </summary>
         /// <param name="d">BusyIndicator that changed its IsBusy.</param>
         /// <param name="e">Event arguments.</param>
         private static void OnIsBusyChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
         {
             ((BusyIndicator)d).OnIsBusyChanged(e);
         }
 
         /// <summary>
         /// IsBusyProperty property changed handler.
         /// </summary>
         /// <param name="e">Event arguments.</param>
         protected virtual void OnIsBusyChanged(DependencyPropertyChangedEventArgs e)
         {
             if (IsBusy)
             {
                 if (DisplayAfter.Equals(TimeSpan.Zero))
                 {
                     // Go visible now
                     IsContentVisible = true;
                 }
                 else
                 {
                     // Set a timer to go visible
                     _displayAfterTimer.Interval = DisplayAfter;
                     _displayAfterTimer.Start();
                 }
             }
             else
             {
                 // No longer visible
                 _displayAfterTimer.Stop();
                 IsContentVisible = false;
             }
             ChangeVisualState(true);
         }
 
         /// <summary>
         /// Gets or sets a value indicating the busy content to display to the user.
         /// </summary>
         public object BusyContent
         {
             get { return (object)GetValue(BusyContentProperty); }
             set { SetValue(BusyContentProperty, value); }
         }
 
         /// <summary>
         /// Identifies the BusyContent dependency property.
         /// </summary>
         public static readonly DependencyProperty BusyContentProperty = DependencyProperty.Register(
             "BusyContent",
             typeof(object),
             typeof(BusyIndicator),
             new PropertyMetadata(null));
 
         /// <summary>
         /// Gets or sets a value indicating the template to use for displaying the busy content to the user.
         /// </summary>
         public DataTemplate BusyContentTemplate
         {
             get { return (DataTemplate)GetValue(BusyContentTemplateProperty); }
             set { SetValue(BusyContentTemplateProperty, value); }
         }
 
         /// <summary>
         /// Identifies the BusyTemplate dependency property.
         /// </summary>
         public static readonly DependencyProperty BusyContentTemplateProperty = DependencyProperty.Register(
             "BusyContentTemplate",
             typeof(DataTemplate),
             typeof(BusyIndicator),
             new PropertyMetadata(null));
 
         /// <summary>
         /// Gets or sets a value indicating how long to delay before displaying the busy content.
         /// </summary>
         public TimeSpan DisplayAfter
         {
             get { return (TimeSpan)GetValue(DisplayAfterProperty); }
             set { SetValue(DisplayAfterProperty, value); }
         }
 
         /// <summary>
         /// Identifies the DisplayAfter dependency property.
         /// </summary>
         public static readonly DependencyProperty DisplayAfterProperty = DependencyProperty.Register(
             "DisplayAfter",
             typeof(TimeSpan),
             typeof(BusyIndicator),
             new PropertyMetadata(TimeSpan.FromSeconds(0.1)));
 
         /// <summary>
         /// Gets or sets a value indicating the style to use for the overlay.
         /// </summary>
         public Style OverlayStyle
         {
             get { return (Style)GetValue(OverlayStyleProperty); }
             set { SetValue(OverlayStyleProperty, value); }
         }
 
         /// <summary>
         /// Identifies the OverlayStyle dependency property.
         /// </summary>
         public static readonly DependencyProperty OverlayStyleProperty = DependencyProperty.Register(
             "OverlayStyle",
             typeof(Style),
             typeof(BusyIndicator),
             new PropertyMetadata(null));
 
         /// <summary>
         /// Gets or sets a value indicating the style to use for the progress bar.
         /// </summary>
         public Style ProgressBarStyle
         {
             get { return (Style)GetValue(ProgressBarStyleProperty); }
             set { SetValue(ProgressBarStyleProperty, value); }
         }
 
         /// <summary>
         /// Identifies the ProgressBarStyle dependency property.
         /// </summary>
         public static readonly DependencyProperty ProgressBarStyleProperty = DependencyProperty.Register(
             "ProgressBarStyle",
             typeof(Style),
             typeof(BusyIndicator),
             new PropertyMetadata(null));
 
         #region BusyContent
 
         private Grid InitBusyContent()
         {
             var g = new Grid();  
             #region AddPaths
             int counter = 12;
             for (int i = 0; i < counter; i++)
             {
                 Path path = new Path();
                 path.Data = Geometry.Parse("M 0,0 L -1,0 L -1,-12 L 0,-13 L 1,-12 L 1,0 Z");
                 path.Stroke = new SolidColorBrush(Colors.SkyBlue);
                 path.Fill = new SolidColorBrush(Colors.SkyBlue);
                 path.Opacity = 0.1;
 
                 TransformGroup tg = new TransformGroup();
                 path.RenderTransform = tg;
                 TranslateTransform tt = new TranslateTransform();
                 tt.Y = -8; tt.X = 1;
 
                 RotateTransform rt = new RotateTransform();
                 rt.Angle = i * 30;
                 tg.Children.Add(tt);
                 tg.Children.Add(rt);  
 
                 DoubleAnimation da = new DoubleAnimation();
                 da.From = 1.0;
                 da.To = 0.1;
                 da.Duration = new Duration(TimeSpan.FromSeconds(1));
 
                 da.BeginTime = TimeSpan.FromMilliseconds(i * 1000 / counter);
                 da.RepeatBehavior = RepeatBehavior.Forever;
 
                 path.VerticalAlignment = System.Windows.VerticalAlignment.Center;
                 path.HorizontalAlignment = System.Windows.HorizontalAlignment.Center;
                 g.Children.Add(path); 
                 path.BeginAnimation(Path.OpacityProperty, da);
             }
             return g;
 
             #endregion
         }
 
         #endregion
     }
 }

 

 下面是实现的整个工程代码：

/Files/rpoplar/BusyIndicator.zip