Photoshop和WPF雙劍配合，打造炫酷個性的進(jìn)度條控件

來源：懂視網(wǎng) 責(zé)編：小采時間：2020-11-27 14:49:47

Photoshop和WPF雙劍配合，打造炫酷個性的進(jìn)度條控件

Photoshop和WPF雙劍配合，打造炫酷個性的進(jìn)度條控件:現(xiàn)在如果想打造一款專業(yè)的App，UI的設(shè)計和操作的簡便性相當(dāng)重要。UI設(shè)計可以借助Photoshop或者AI等設(shè)計工具，之前了解到WPF設(shè)計工具Expression Blend可以直接導(dǎo)入PSD文件或者AI設(shè)計文件（當(dāng)然不是全部特征支持），最近研究了一下，也費了一番周折，好在最后實

推薦度：

點擊下載本文 文檔為doc格式

導(dǎo)讀Photoshop和WPF雙劍配合，打造炫酷個性的進(jìn)度條控件:現(xiàn)在如果想打造一款專業(yè)的App，UI的設(shè)計和操作的簡便性相當(dāng)重要。UI設(shè)計可以借助Photoshop或者AI等設(shè)計工具，之前了解到WPF設(shè)計工具Expression Blend可以直接導(dǎo)入PSD文件或者AI設(shè)計文件（當(dāng)然不是全部特征支持），最近研究了一下，也費了一番周折，好在最后實

現(xiàn)在如果想打造一款專業(yè)的App，UI的設(shè)計和操作的簡便性相當(dāng)重要。UI設(shè)計可以借助Photoshop或者AI等設(shè)計工具，之前了解到WPF設(shè)計工具Expression Blend可以直接導(dǎo)入PSD文件或者AI設(shè)計文件（當(dāng)然不是全部特征支持），最近研究了一下，也費了一番周折，好在最后實現(xiàn)了預(yù)期的效果。下面將step by step用示例說明如何先用PS構(gòu)建一個矢量圖形模板，然后用Expression Blend導(dǎo)入PSD文件，并獲取PATH的Data值，為打造一款炫酷的個性進(jìn)度條控件構(gòu)建美觀UI。

1、打開Photoshop,新建一個空白圖層，點選PS的圖案圖章工具：

Photoshop和WPF雙劍配合，打造炫酷個性的進(jìn)度條控件

2、選擇畫筆，選用喜歡的筆刷（可以到網(wǎng)站上下載免費的筆刷），如下圖：

Photoshop和WPF雙劍配合，打造炫酷個性的進(jìn)度條控件

在合適位置點擊后，如下圖所示。

Photoshop和WPF雙劍配合，打造炫酷個性的進(jìn)度條控件

3、按住CTRL，選中圖層，切換到路徑面板，點擊【從選取創(chuàng)建工作路徑】按鈕，如下圖：

Photoshop和WPF雙劍配合，打造炫酷個性的進(jìn)度條控件

注意上圖的紅框按鈕，就是【從選取創(chuàng)建工作路徑】，點擊后出現(xiàn)下圖：

Photoshop和WPF雙劍配合，打造炫酷個性的進(jìn)度條控件

4、這是最關(guān)鍵的一步，創(chuàng)建矢量蒙板，切換到圖層面板，點選【鋼筆】工具，在圖形上右鍵菜單中選擇【創(chuàng)建矢量蒙板】項，如下圖所示：

Photoshop和WPF雙劍配合，打造炫酷個性的進(jìn)度條控件

然后PS中可以看到下圖的效果，說明創(chuàng)建成功。

Photoshop和WPF雙劍配合，打造炫酷個性的進(jìn)度條控件

保存PS文件為進(jìn)度條.PSD文件待用。

5、打開Expression Blend 4新建一個WPF項目，然后導(dǎo)入PSD文件，如下圖：

Photoshop和WPF雙劍配合，打造炫酷個性的進(jìn)度條控件

導(dǎo)入成功后，可以復(fù)制該圖形的clip數(shù)據(jù)，這就是WPF中PATH所需要的Data值。

Photoshop和WPF雙劍配合，打造炫酷個性的進(jìn)度條控件

下面來創(chuàng)建一個炫酷的WPF進(jìn)度條控件。

6、在VS2010中重新打開該項目，并添加一個WPF自定義控件庫,如下圖：

Photoshop和WPF雙劍配合，打造炫酷個性的進(jìn)度條控件

17 編寫控件UI和后臺代碼，如下所示：

<ResourceDictionary
 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
 xmlns:local="clr-namespace:WpfCustomProgressControl">
 
 <Style TargetType="{x:Type local:CustomProgressControl}">
 <Setter Property="Template">
 <Setter.Value>
 <ControlTemplate TargetType="{x:Type local:CustomProgressControl}">
 <Grid x:Name="PART_container"
 Background="{TemplateBinding Background}"
 Width="{TemplateBinding Width}"
 Height="{TemplateBinding Height}">
 <Path x:Name="PART_foreground_P"
 Visibility="Collapsed"
 Stretch="Fill"
 Stroke="Transparent"
 Fill="{TemplateBinding Foreground}"
 StrokeThickness="2"
 Data="F1M56,33C58,33 60,33 62,33 61.667,33.667 61.333,34.333 61,35 57.794,34.859 53.856,36.079 56,33z M49,24C54.364,24.735 53.554,24.821 56,28 53.807,30.696 55.287,29.902 51,31 50,30 49,29 48,28 48.333,26.667 48.667,25.333 49,24z M62,22C63.666,22.333 65.333,22.667 67,23 66.333,27.571 65.935,27.376 64,30 63,29.333 62,28.667 61,28 61,27.667 61,27.333 61,27 61.333,25.333 61.667,23.666 62,22z M46,15C46.667,15 47.333,15 48,15 47.333,17.333 46.667,19.667 46,22 45.333,22 44.667,22 44,22 44.667,19.667 45.333,17.333 46,15z M63,13C64.923,14.392 63.599,13.101 65,15 64.333,14.333 63.667,13.667 63,13z M55,12C56.666,12.667 58.333,13.333 60,14 60,15.333 60,16.667 60,18 59.333,18 58.667,18 58,18 54.722,21.928 52.838,16.561 52,14 53,13.333 54,12.667 55,12z M128,1C128.667,1 129.333,1 130,1 128.882,10.058 122.793,12.326 122,23 126.364,22.028 126.876,21.206 131,22 130,23.333 129,24.667 128,26 110.659,32.752 112.704,45.252 103,59 95.769,69.245 82.761,82.131 72,89 72.621,101.092 82.373,112.463 90,118 90.333,118 90.667,118 91,118 93.274,107.421 107.464,106.386 104,92 101.667,87.667 99.333,83.333 97,79 98,78 99,77 100,76 122.812,77.152 112.786,100.488 115,114 116.666,115.666 118.333,117.333 120,119 127.359,142.373 118.776,160.626 106,168 110.337,176.877 114.918,188.188 121,197 127.441,206.332 140.794,210.508 148,220 146.506,223.067 146.885,223.215 144,225 113.08,236.802 62.376,138.34 36,147 34.077,151.751 32.347,152.761 28,155 17.556,150.255 9.333,141.565 9,127 13.999,120.001 19,112.999 24,106 22.667,102.667 21.333,99.333 20,96 7.555,96.019 4.392,90.889 1,82 1.465,74.486 3.768,68.82 9,66 19.848,56.341 31.922,71.946 38,77 37.406,83.299 36.792,87.413 39,92 41.333,89.667 43.667,87.333 46,85 81.009,67.269 105.228,31.536 128,1z" />
 
 <Rectangle x:Name="PART_mask"
 Fill="{TemplateBinding Background}"
 VerticalAlignment="Stretch"
 HorizontalAlignment="Stretch" />
 
 <Path x:Name="PART_outline_P"
 Visibility="Collapsed"
 Stretch="Fill"
 Stroke="{TemplateBinding BorderBrush}"
 Fill="Transparent"
 StrokeThickness="2"
 Data="F1M56,33C58,33 60,33 62,33 61.667,33.667 61.333,34.333 61,35 57.794,34.859 53.856,36.079 56,33z M49,24C54.364,24.735 53.554,24.821 56,28 53.807,30.696 55.287,29.902 51,31 50,30 49,29 48,28 48.333,26.667 48.667,25.333 49,24z M62,22C63.666,22.333 65.333,22.667 67,23 66.333,27.571 65.935,27.376 64,30 63,29.333 62,28.667 61,28 61,27.667 61,27.333 61,27 61.333,25.333 61.667,23.666 62,22z M46,15C46.667,15 47.333,15 48,15 47.333,17.333 46.667,19.667 46,22 45.333,22 44.667,22 44,22 44.667,19.667 45.333,17.333 46,15z M63,13C64.923,14.392 63.599,13.101 65,15 64.333,14.333 63.667,13.667 63,13z M55,12C56.666,12.667 58.333,13.333 60,14 60,15.333 60,16.667 60,18 59.333,18 58.667,18 58,18 54.722,21.928 52.838,16.561 52,14 53,13.333 54,12.667 55,12z M128,1C128.667,1 129.333,1 130,1 128.882,10.058 122.793,12.326 122,23 126.364,22.028 126.876,21.206 131,22 130,23.333 129,24.667 128,26 110.659,32.752 112.704,45.252 103,59 95.769,69.245 82.761,82.131 72,89 72.621,101.092 82.373,112.463 90,118 90.333,118 90.667,118 91,118 93.274,107.421 107.464,106.386 104,92 101.667,87.667 99.333,83.333 97,79 98,78 99,77 100,76 122.812,77.152 112.786,100.488 115,114 116.666,115.666 118.333,117.333 120,119 127.359,142.373 118.776,160.626 106,168 110.337,176.877 114.918,188.188 121,197 127.441,206.332 140.794,210.508 148,220 146.506,223.067 146.885,223.215 144,225 113.08,236.802 62.376,138.34 36,147 34.077,151.751 32.347,152.761 28,155 17.556,150.255 9.333,141.565 9,127 13.999,120.001 19,112.999 24,106 22.667,102.667 21.333,99.333 20,96 7.555,96.019 4.392,90.889 1,82 1.465,74.486 3.768,68.82 9,66 19.848,56.341 31.922,71.946 38,77 37.406,83.299 36.792,87.413 39,92 41.333,89.667 43.667,87.333 46,85 81.009,67.269 105.228,31.536 128,1z" />

 <TextBlock x:Name="PART_percentage_text"
 VerticalAlignment="Center"
 HorizontalAlignment="Center"
 FontSize="16" 
 FontWeight="ExtraBlack"
 Foreground="{TemplateBinding TextForeground}"/>

 </Grid>
 </ControlTemplate>
 </Setter.Value>
 </Setter>
 </Style>

</ResourceDictionary>

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);
 //蒙板來變更進(jìn)度
 mask.Margin = new Thickness(0, 0, 0, awayMargin);

 }
 }
 }
}

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

 <Window
 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
 xmlns:ed="http://schemas.microsoft.com/expression/2010/drawing"
 x:Class="WpfPSDemo.MainWindow"
 x:Name="Window" BorderThickness="0"
 Title="MainWindow"
 Width="430" Height="480" xmlns:my="clr-namespace:WpfCustomProgressControl;assembly=WpfCustomProgressControl">
 <my:CustomProgressControl Name="customProgressControl1" Width="200" Height="200" Value="50" Background="Yellow" Foreground="Red" BorderBrush="red" />
</Window>

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
{
 /// <summary>
 /// MainWindow.xaml 的交互邏輯
 /// </summary>
 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()
 {
 //可以通過循環(huán)條件來控制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雙劍配合，打造炫酷個性的進(jìn)度條控件