现在如果想打造一款专业的App，UI的设计和操作的简便性相当重要。UI设计可以借助Photoshop或者AI等设计工具，之前了解到WPF设计工具Expression Blend可以直接导入PSD文件或者AI设计文件（当然不是全部特征支持），最近研究了一下，也费了一番周折，好在最后实现了预期的效果。下面将step by step用示例说明如何先用PS构建一个矢量图形模板，然后用Expression Blend导入PSD文件，并获取PATH的Data值，为打造一款炫酷的个性进度条控件构建美观UI。

1、打开Photoshop,新建一个空白图层，点选PS的图案图章工具：

2、选择画笔，选用喜欢的笔刷（可以到网站上下载免费的笔刷），如下图：

在合适位置点击后，如下图所示。

3、按住CTRL，选中图层，切换到路径面板，点击 【从选取创建工作路径】 按钮，如下图：

注意上图的红框按钮，就是【从选取创建工作路径】，点击后出现下图：

4、这是最关键的一步，创建矢量蒙板，切换到图层面板，点选【钢笔】工具，在图形上右键菜单中选择【创建矢量蒙板】项，如下图所示：

然后PS中可以看到下图的效果，说明创建成功。

保存PS文件为进度条.PSD文件待用。

5、打开Expression Blend 4新建一个WPF项目，然后导入PSD文件，如下图：

导入成功后，可以复制该图形的clip数据，这就是WPF中PATH所需要的Data值。

下面来创建一个炫酷的WPF进度条控件。

6、在VS2010中重新打开该项目，并添加一个WPF自定义控件库,如下图：

17 编写控件UI和后台代码，如下所示：

1 
     
       5      6     
      47 48 
     

1 using System;  2 using System.Collections.Generic;  3 using System.Linq;  4 using System.Text;  5 using System.Windows;  6 using System.Windows.Controls;  7 using System.Windows.Data;  8 using System.Windows.Documents;  9 using System.Windows.Input; 10 using System.Windows.Media; 11 using System.Windows.Media.Imaging; 12 using System.Windows.Navigation; 13 using System.Windows.Shapes; 14  15 namespace WpfCustomProgressControl 16 { 17  18     [TemplatePart(Name = "PART_mask", Type = typeof(Rectangle))] 19     [TemplatePart(Name = "PART_container", Type = typeof(Grid))] 20     [TemplatePart(Name = "PART_percentage_text", Type = typeof(TextBlock))] 21     [TemplatePart(Name = "PART_foreground_P", Type = typeof(Path))] 22     [TemplatePart(Name = "PART_outline_P", Type = typeof(Path))] 23  24     public class CustomProgressControl : ProgressBar 25     { 26         static CustomProgressControl() 27         { 28             DefaultStyleKeyProperty.OverrideMetadata(typeof(CustomProgressControl), new FrameworkPropertyMetadata(typeof(CustomProgressControl))); 29  30         } 31  32         Rectangle mask; 33         Grid container; 34         TextBlock percentageText; 35         Path foreground_P; 36         Path outline_P; 37  38         #region TextForeground 文本 39         public SolidColorBrush TextForeground 40         { 41             get { return (SolidColorBrush)GetValue(TextForegroundProperty); } 42             set { SetValue(TextForegroundProperty, value); } 43         } 44  45         public static readonly DependencyProperty TextForegroundProperty = 46             DependencyProperty.Register("TextForeground", typeof(SolidColorBrush), 47                                 typeof(CustomProgressControl), 48                                 new FrameworkPropertyMetadata(new SolidColorBrush(Colors.DarkGray))); 49         #endregion 50  51         public override void OnApplyTemplate() 52         { 53             base.OnApplyTemplate(); 54  55  56             foreground_P = this.Template.FindName("PART_foreground_P", this) as Path; 57             outline_P = this.Template.FindName("PART_outline_P", this) as Path; 58             mask = this.Template.FindName("PART_mask", this) as Rectangle; 59             container = this.Template.FindName("PART_container", this) as Grid; 60             percentageText = this.Template.FindName("PART_percentage_text", this) as TextBlock; 61             if (foreground_P != null) 62             { 63                 foreground_P.Visibility = Visibility.Visible; 64                 outline_P.Visibility = Visibility.Visible; 65             } 66             Width = double.IsNaN(Width) ? 50 : Width; 67             Height = double.IsNaN(Height) ? 135 : Height; 68  69             Minimum = double.IsNaN(Minimum) ? 0 : Minimum; 70             Maximum = double.IsNaN(Maximum) ? 100 : Maximum; 71  72             if (mask != null) 73             { 74                 var percentageValue = Value / Maximum; 75                 var awayMargin = percentageValue * Height; 76                 var percentageString = string.Empty; 77  78                 if (percentageValue > 0) 79                     percentageString = (percentageValue * 100).ToString("##"); 80                 else if (percentageValue == 0) 81                     percentageString = "0"; 82  83                 percentageText.Text = string.Format("{0}%", string.IsNullOrEmpty(percentageString) ? "0" : percentageString); 84  85                 mask.Margin = new Thickness(0, 0, 0, awayMargin); 86             } 87  88             container.Clip = new RectangleGeometry 89             { 90                 Rect = new Rect(0, 0, Width, Height) 91             }; 92  93             mask.Width = Width; 94             mask.Height = Height; 95         } 96  97         protected override void OnValueChanged(double oldValue, double newValue) 98         { 99             base.OnValueChanged(oldValue, newValue);100 101             if (Value < Minimum)102             {103                 Value = Minimum;104             }105 106             if (Value > Maximum)107             {108                 Value = Maximum;109             }110 111             if (mask != null)112             {113                 var percentageValue = Value / Maximum;114                 var awayMargin = percentageValue * Height;115                 var percentageString = string.Empty;116 117                 if (percentageValue > 0)118                     percentageString = (percentageValue * 100).ToString("##");119                 else if (percentageValue == 0)120                     percentageString = "0";121 122                 percentageText.Text = string.Format("{0}%", string.IsNullOrEmpty(percentageString) ? "0" : percentageString);123                 //蒙板来变更进度124                 mask.Margin = new Thickness(0, 0, 0, awayMargin);125 126             }127         }128     }129 }

18 在WpfPSDemo的主界面上拖入控件，并定制属性，代码如下：

1 
     
       9     
      10 
     

1 using System; 2 using System.Collections.Generic; 3 using System.Text; 4 using System.Windows; 5 using System.Windows.Controls; 6 using System.Windows.Data; 7 using System.Windows.Documents; 8 using System.Windows.Input; 9 using System.Windows.Media;10 using System.Windows.Media.Imaging;11 using System.Windows.Shapes;12 using System.Threading;13 namespace WpfPSDemo14 {15     /// 
16     /// MainWindow.xaml 的交互逻辑17     /// 
18     public partial class MainWindow : Window19     {20         Thread timeThread;21         int i = 0;22         public MainWindow()23         {24             this.InitializeComponent();25             this.customProgressControl1.Value = 0;26             this.Background = Brushes.Yellow;27             timeThread = new Thread(new ThreadStart(DispatcherThread));28             timeThread.Start();29 30         }31         public void DispatcherThread()32         {33             //可以通过循环条件来控制UI的更新34             while (true)35             {36                 ///线程方法委托（无参方法）37                 this.customProgressControl1.Dispatcher.BeginInvoke(new Action(UpdateTime));38                 Thread.Sleep(200);39             }40         }41 42         private void UpdateTime()43         {44 45             if (i < 100)46             {47                 i++;48                 this.customProgressControl1.Value = i;49             }50             else51             {52                 timeThread.Abort();53             }54 55         }56     }57 }

运行代码，效果如下：