超炫酷的WPF实现Loading控件效果

Win8系统的Loading效果还是很不错的，网上也有人用CSS3等技术实现，研究了一下，并打算用WPF自定义一个Loading控件实现类似的效果，并可以让用户对Loading的颗粒（Particle）背景颜色进行自定义，话不多说，直接上代码：

1、用VS2012新建一个WPF的用户控件库项目WpfControlLibraryDemo，VS自动生成如下结构：

2、删除UserControl1.xaml，并新建一个Loading的CustomControl(不是UserControl),如下图所示：

3、如果报错找不到Loading类型，请编译，下面在Generic.xaml主题文件中对Loading的样式和内容进行定义（注意添加

xmlns:system = "clr-namespace:System;assembly=mscorlib"），代码如下：



 
 
  
  
   
   
    
    
    
    
    
    
    1
    5

    0
    -20

    0.5
    0.5

    
    00:00:00.000
    00:00:00.100
    00:00:00.200
    00:00:00.300
    00:00:00.400
    00:00:01.800

    
    0
    -10
    -20
    -30
    -40

    
    0
    90
    00:00:00.000
    00:00:00.750

    
    90
    270
    00:00:00.751
    00:00:00.300

    
    270
    360
    00:00:01.052
    00:00:00.750

    
     
     
     
     
     
    
    
    
    
     
     
      
      



      
      
      
      




      
      
      
      




      
      

      
      




      
      

      
      




      
      
     
     
    
    
     
     
     
     
     
     
     
     
      
      
      
      
     
     
    
    
     
     
     
     
     
     
     
     
      
      
      
      
     
     
    
    
     
     
     
     
     
     
     
     
      
      
      
      
     
     
    
    
     
     
     
     
     
     
     
     
      
      
      
      
     
     
    
    
     
     
     
     
     
     
     
     
      
      
      
      
     
     
    
    
   



   
  
  
 
 
 
 
 

在构建中发现，一开始在设定绑定时，写成一直都无法绑定成功，后来查了资料，改成 后成功。

4、编辑Loading.cs文件，对自定义属性FillColor和逻辑进行编码：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;

namespace WpfControlLibraryDemo
{
 using System.ComponentModel;
 /// 

 /// 按照步骤 1a 或 1b 操作，然后执行步骤 2 以在 XAML 文件中使用此自定义控件。
 ///
 /// 步骤 1a) 在当前项目中存在的 XAML 文件中使用该自定义控件。
 /// 将此 XmlNamespace 特性添加到要使用该特性的标记文件的根 
 /// 元素中:
 ///
 /// xmlns:MyNamespace="clr-namespace:WpfControlLibraryDemo"
 ///
 ///
 /// 步骤 1b) 在其他项目中存在的 XAML 文件中使用该自定义控件。
 /// 将此 XmlNamespace 特性添加到要使用该特性的标记文件的根 
 /// 元素中:
 ///
 /// xmlns:MyNamespace="clr-namespace:WpfControlLibraryDemo;assembly=WpfControlLibraryDemo"
 ///
 /// 您还需要添加一个从 XAML 文件所在的项目到此项目的项目引用，
 /// 并重新生成以避免编译错误:
 ///
 /// 在解决方案资源管理器中右击目标项目，然后依次单击
 /// “添加引用”->“项目”->[浏览查找并选择此项目]
 ///
 ///
 /// 步骤 2)
 /// 继续操作并在 XAML 文件中使用控件。
 ///
 /// 
 ///
 /// 
 public class Loading : Control
 {
 static Loading()
 {
  //重载默认样式
  DefaultStyleKeyProperty.Overridemetadata(typeof(Loading), new frameworkPropertymetadata(typeof(Loading)));
  //DependencyProperty 注册 FillColor
  FillColorProperty = DependencyProperty.Register("FillColor",
  typeof(Color),
  typeof(Loading),
  new UIPropertymetadata(Colors.DarkBlue,
  new PropertyChangedCallback(OnUriChanged))
  );
  //Colors.DarkBlue为控件初始化默认值

 }
 //属性变更回调函数
 private static void onUriChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
 {
  //Border b = (Border)d;
  //MessageBox.Show(e.NewValue.ToString());

 }
 #region 自定义Fields
 // DependencyProperty属性定义 FillColorProperty=FillColor+Property组成
 public static readonly DependencyProperty FillColorProperty;
 #endregion
 //VS设计器属性支持
 [Description("背景色"), Category("个性配置"), DefaultValue("#FF668899")]
 public Color FillColor
 {
  //GetValue,SetValue为固定写法，此处一般不建议处理其他逻辑
  get { return (Color)GetValue(FillColorProperty); }
  set { SetValue(FillColorProperty, value); }
 }
 }
}

 5、编译，如果无误后，可以添加WPF应用程序WpfAppLoadingTest进行测试（添加项目引用）。

打开MainWindow.xaml，将Loading控件拖放到设计界面上，如下图所示：

 6、控件颜色修改，选中控件，在属性栏中进行配置即可：

 7.总结

可以看到WPF自定义控件还是比较容易的，但是难点在于UI的设计，如果需要做的美观，需要美工的参与，而且需要转换成XAML。

以上就是WPF实现炫酷Loading控件的全部内容，希望对大家的学习有所帮助。