Photoshop和WPF双剑配合，打造炫酷个性的进度条控件

现在如果想打造一款专业的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文件待用。

Smart Picture

Smart Picture 智能高效的图片处理工具

下载

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

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

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

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

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

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
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 WpfCustomProgressControl
{

    [TemplatePart(Name = "PART_mask", Type = typeof(Rectangle))]
    [TemplatePart(Name = "PART_container", Type = typeof(Grid))]
    [TemplatePart(Name = "PART_percentage_text", Type = typeof(TextBlock))]
    [TemplatePart(Name = "PART_foreground_P", Type = typeof(Path))]
    [TemplatePart(Name = "PART_outline_P", Type = typeof(Path))]

    public class CustomProgressControl : ProgressBar
    {
        static CustomProgressControl()
        {
            DefaultStyleKeyProperty.OverrideMetadata(typeof(CustomProgressControl), new FrameworkPropertyMetadata(typeof(CustomProgressControl)));

        }

        Rectangle mask;
        Grid container;
        TextBlock percentageText;
        Path foreground_P;
        Path outline_P;

        #region TextForeground 文本
        public SolidColorBrush TextForeground
        {
            get { return (SolidColorBrush)GetValue(TextForegroundProperty); }
            set { SetValue(TextForegroundProperty, value); }
        }

        public static readonly DependencyProperty TextForegroundProperty =
            DependencyProperty.Register("TextForeground", typeof(SolidColorBrush),
                                typeof(CustomProgressControl),
                                new FrameworkPropertyMetadata(new SolidColorBrush(Colors.DarkGray)));
        #endregion

        public override void OnApplyTemplate()
        {
            base.OnApplyTemplate();


            foreground_P = this.Template.FindName("PART_foreground_P", this) as Path;
            outline_P = this.Template.FindName("PART_outline_P", this) as Path;
            mask = this.Template.FindName("PART_mask", this) as Rectangle;
            container = this.Template.FindName("PART_container", this) as Grid;
            percentageText = this.Template.FindName("PART_percentage_text", this) as TextBlock;
            if (foreground_P != null)
            {
                foreground_P.Visibility = Visibility.Visible;
                outline_P.Visibility = Visibility.Visible;
            }
            Width = double.IsNaN(Width) ? 50 : Width;
            Height = double.IsNaN(Height) ? 135 : Height;

            Minimum = double.IsNaN(Minimum) ? 0 : Minimum;
            Maximum = double.IsNaN(Maximum) ? 100 : Maximum;

            if (mask != null)
            {
                var percentageValue = Value / Maximum;
                var awayMargin = percentageValue * Height;
                var percentageString = string.Empty;

                if (percentageValue > 0)
                    percentageString = (percentageValue * 100).ToString("##");
                else if (percentageValue == 0)
                    percentageString = "0";

                percentageText.Text = string.Format("{0}%", string.IsNullOrEmpty(percentageString) ? "0" : percentageString);

                mask.Margin = new Thickness(0, 0, 0, awayMargin);
            }

            container.Clip = new RectangleGeometry
            {
                Rect = new Rect(0, 0, Width, Height)
            };

            mask.Width = Width;
            mask.Height = Height;
        }

        protected override void OnValueChanged(double oldValue, double newValue)
        {
            base.OnValueChanged(oldValue, newValue);

            if (Value < Minimum)
            {
                Value = Minimum;
            }

            if (Value > Maximum)
            {
                Value = Maximum;
            }

            if (mask != null)
            {
                var percentageValue = Value / Maximum;
                var awayMargin = percentageValue * Height;
                var percentageString = string.Empty;

                if (percentageValue > 0)
                    percentageString = (percentageValue * 100).ToString("##");
                else if (percentageValue == 0)
                    percentageString = "0";

                percentageText.Text = string.Format("{0}%", string.IsNullOrEmpty(percentageString) ? "0" : percentageString);
                //蒙板来变更进度
                mask.Margin = new Thickness(0, 0, 0, awayMargin);

            }
        }
    }
}

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

using System;
using System.Collections.Generic;
using System.Text;
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.Shapes;
using System.Threading;
namespace WpfPSDemo
{
    /// 

    /// MainWindow.xaml 的交互逻辑
    /// 
    public partial class MainWindow : Window
    {
        Thread timeThread;
        int i = 0;
        public MainWindow()
        {
            this.InitializeComponent();
            this.customProgressControl1.Value = 0;
            this.Background = Brushes.Yellow;
            timeThread = new Thread(new ThreadStart(DispatcherThread));
            timeThread.Start();

        }
        public void DispatcherThread()
        {
            //可以通过循环条件来控制UI的更新
            while (true)
            {
                ///线程方法委托（无参方法）
                this.customProgressControl1.Dispatcher.BeginInvoke(new Action(UpdateTime));
                Thread.Sleep(200);
            }
        }

        private void UpdateTime()
        {

            if (i < 100)
            {
                i++;
                this.customProgressControl1.Value = i;
            }
            else
            {
                timeThread.Abort();
            }

        }
    }
}

运行代码，效果如下：

更多Photoshop和WPF双剑配合，打造炫酷个性的进度条控件相关文章请关注PHP中文网！