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檔案待用。

5、打開Expression Blend 4新建一個WPF項目，然後導入PSD文件，如下圖：

導入成功後，可以複製該圖形的clip數據，這就是WPF中PATH所需要的Data值。

下面來建立一個酷炫的WPF進度條控制。

6、在VS2010中重新打開該項目，並添加一個WPF自訂控制項庫,如下圖：

17

<resourcedictionary>
    
    <style>
        <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}"/>

                    
                
            
        
    </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);
                //蒙板来变更进度
                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>

rrrerereee

更多Photoshop和WPF雙劍配合，打造酷炫個性的進度條控制相關文章請關注PHP中文網！