备案控制台
开发者社区 人工智能 文章 正文

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

2021-09-17 509
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 结合Photoshop和WPF，共同创建一个矢量的个性化进度条。

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

1 Photoshop操作

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

1.png

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

2.png

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

3.png

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

4.png

切换到【路径】页签，如下图所示：

5.png

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

6.png

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

7.png

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

8.png

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

2 Expression Blend操作

打开Expression Blend 4新建一个WPF项目，然后导入PSD文件，从【文件】【导入Adobe Photoshop文件(M)...】菜单进行操作，具体如下图所示：

9.png

此时会弹出一个选择文件的界面，选择Photoshop中保存的文件即可，如下图所示。

10.png

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

11.png

将路径的PATH值拷贝出来备用。

3 WPF进度条示例

下面来创建一个炫酷的WPF进度条控件。在VS2010中重新打开该项目，并添加一个WPF自定义控件库,如下图：

12.png

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

<ResourceDictionaryxmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"xmlns:local="clr-namespace:WpfCustomProgressControl"><StyleTargetType="{x:Type local:CustomProgressControl}"><SetterProperty="Template"><Setter.Value><ControlTemplateTargetType="{x:Type local:CustomProgressControl}"><Gridx:Name="PART_container"Background="{TemplateBinding Background}"Width="{TemplateBinding Width}"Height="{TemplateBinding Height}"><Pathx: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"/><Rectanglex:Name="PART_mask"Fill="{TemplateBinding Background}"VerticalAlignment="Stretch"HorizontalAlignment="Stretch"/><Pathx: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"/><TextBlockx:Name="PART_percentage_text"VerticalAlignment="Center"HorizontalAlignment="Center"FontSize="16"FontWeight="ExtraBlack"Foreground="{TemplateBinding TextForeground}"/></Grid></ControlTemplate></Setter.Value></Setter></Style></ResourceDictionary>
usingSystem;
usingSystem.Collections.Generic;
usingSystem.Linq;
usingSystem.Text;
usingSystem.Windows;
usingSystem.Windows.Controls;
usingSystem.Windows.Data;
usingSystem.Windows.Documents;
usingSystem.Windows.Input;
usingSystem.Windows.Media;
usingSystem.Windows.Media.Imaging;
usingSystem.Windows.Navigation;
usingSystem.Windows.Shapes;
namespaceWpfCustomProgressControl{
    [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))]
publicclassCustomProgressControl : ProgressBar    {
staticCustomProgressControl()
        {
DefaultStyleKeyProperty.OverrideMetadata(typeof(CustomProgressControl), newFrameworkPropertyMetadata(typeof(CustomProgressControl)));
        }
Rectanglemask;
Gridcontainer;
TextBlockpercentageText;
Pathforeground_P;
Pathoutline_P;
#regionTextForeground文本publicSolidColorBrushTextForeground        {
get { return (SolidColorBrush)GetValue(TextForegroundProperty); }
set { SetValue(TextForegroundProperty, value); }
        }
publicstaticreadonlyDependencyPropertyTextForegroundProperty=DependencyProperty.Register("TextForeground", typeof(SolidColorBrush),
typeof(CustomProgressControl),
newFrameworkPropertyMetadata(newSolidColorBrush(Colors.DarkGray)));
#endregionpublicoverridevoidOnApplyTemplate()
        {
base.OnApplyTemplate();
foreground_P=this.Template.FindName("PART_foreground_P", this) asPath;
outline_P=this.Template.FindName("PART_outline_P", this) asPath;
mask=this.Template.FindName("PART_mask", this) asRectangle;
container=this.Template.FindName("PART_container", this) asGrid;
percentageText=this.Template.FindName("PART_percentage_text", this) asTextBlock;
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)
            {
varpercentageValue=Value/Maximum;
varawayMargin=percentageValue*Height;
varpercentageString=string.Empty;
if (percentageValue>0)
percentageString= (percentageValue*100).ToString("##");
elseif (percentageValue==0)
percentageString="0";
percentageText.Text=string.Format("{0}%", string.IsNullOrEmpty(percentageString) ?"0" : percentageString);
mask.Margin=newThickness(0, 0, 0, awayMargin);
            }
container.Clip=newRectangleGeometry            {
Rect=newRect(0, 0, Width, Height)
            };
mask.Width=Width;
mask.Height=Height;
        }
protectedoverridevoidOnValueChanged(doubleoldValue, doublenewValue)
        {
base.OnValueChanged(oldValue, newValue);
if (Value<Minimum)
            {
Value=Minimum;
            }
if (Value>Maximum)
            {
Value=Maximum;
            }
if (mask!=null)
            {
varpercentageValue=Value/Maximum;
varawayMargin=percentageValue*Height;
varpercentageString=string.Empty;
if (percentageValue>0)
percentageString= (percentageValue*100).ToString("##");
elseif (percentageValue==0)
percentageString="0";
percentageText.Text=string.Format("{0}%", string.IsNullOrEmpty(percentageString) ?"0" : percentageString);
//蒙板来变更进度mask.Margin=newThickness(0, 0, 0, awayMargin);
            }
        }
    }
}

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

<Windowxmlns="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:CustomProgressControlName="customProgressControl1"Width="200"Height="200"Value="50"Background="Yellow"Foreground="Red"BorderBrush="red"/></Window>
usingSystem;
usingSystem.Collections.Generic;
usingSystem.Text;
usingSystem.Windows;
usingSystem.Windows.Controls;
usingSystem.Windows.Data;
usingSystem.Windows.Documents;
usingSystem.Windows.Input;
usingSystem.Windows.Media;
usingSystem.Windows.Media.Imaging;
usingSystem.Windows.Shapes;
usingSystem.Threading;
namespaceWpfPSDemo{
/// <summary>/// MainWindow.xaml 的交互逻辑/// </summary>publicpartialclassMainWindow : Window    {
ThreadtimeThread;
inti=0;
publicMainWindow()
        {
this.InitializeComponent();
this.customProgressControl1.Value=0;
this.Background=Brushes.Yellow;
timeThread=newThread(newThreadStart(DispatcherThread));
timeThread.Start();
        }
publicvoidDispatcherThread()
        {
//可以通过循环条件来控制UI的更新while (true)
            {
///线程方法委托（无参方法）this.customProgressControl1.Dispatcher.BeginInvoke(newAction(UpdateTime));
Thread.Sleep(200);
            }
        }
privatevoidUpdateTime()
        {
if (i<100)
            {
i++;
this.customProgressControl1.Value=i;
            }
else            {
timeThread.Abort();
            }
        }
    }
}

运行代码，效果如下：

16.png

文章标签：
C#
搜索推荐
人工智能
关键词：
wpf控件
wpf进度条
photoshop wpf进度条控件
photoshop wpf
wpf进度条控件
JackWang1987
目录
相关文章
追逐时光者
|
2月前
|
C# 开发者 Windows
基于Material Design风格开源、易用、强大的WPF UI控件库
基于Material Design风格开源、易用、强大的WPF UI控件库
追逐时光者
176 0
老码识途
|
2月前
|
C#
浅谈WPF之装饰器实现控件锚点
使用过visio的都知道，在绘制流程图时，当选择或鼠标移动到控件时，都会在控件的四周出现锚点，以便于修改大小，移动位置，或连接线等，那此功能是如何实现的呢？在WPF开发中，想要在控件四周实现锚点，可以通过装饰器来实现，今天通过一个简单的小例子，简述如何在WPF开发中，应用装饰器，仅供学习分享使用，如有不足之处，还请指正。
老码识途
88 1
Rick_1/2
|
11月前
|
C# Windows
WPF技术之RichTextBox控件
WPF RichTextBox是Windows Presentation Foundation (WPF)中提供的一个强大的文本编辑控件，它可以显示富文本格式的文本，支持多种文本处理操作。
Rick_1/2
414 0
老码识途
|
2月前
|
前端开发 C# 容器
浅谈WPF之控件拖拽与拖动
使用过office的visio软件画图的小伙伴都知道，画图软件分为两部分，左侧图形库，存放各种图标，右侧是一个画布，将左侧图形库的图标控件拖拽到右侧画布，就会生成一个新的控件，并且可以自由拖动。那如何在WPF程序中，实现类似的功能呢？今天就以一个简单的小例子，简述如何在WPF中实现控件的拖拽和拖动，仅供学习分享使用，如有不足之处，还请指正。
老码识途
138 2
老码识途
|
8月前
|
算法 C# UED
浅谈WPF之控件模板和数据模板
WPF不仅支持传统的Windows Forms编程的用户界面和用户体验设计，同时还推出了以模板为核心的新一代设计理念。在WPF中，通过引入模板，将数据和算法的“内容”和“形式”进行解耦。模板主要分为两大类：数据模板【Data Template】和控件模板【Control Template】。
老码识途
135 8
追逐时光者
|
2月前
|
C# 开发者 C++
一套开源、强大且美观的WPF UI控件库
一套开源、强大且美观的WPF UI控件库
追逐时光者
230 0
Rick_1/2
|
11月前
|
XML C# 数据格式
WPF技术之DocumentViewer控件
WPF 的 DocumentViewer 是一个强大的控件，用于在应用程序中显示各种类型的文档，如 XPS（XML Paper Specification）、FlowDocument 和 FixedDocument 等。
Rick_1/2
1379 1
Rick_1/2
|
11月前
|
搜索推荐 C# Windows
WPF技术之MediaElement控件
WPF（Windows Presentation Foundation）MediaElement是一种用于创建用户界面的框架，它提供了丰富的图形、多媒体和动画功能。它可以播放各种类型的音频和视频文件，包括本地文件和网络流。
Rick_1/2
412 0
Rick_1/2
|
11月前
|
前端开发 C#
WPF技术之ContentControl 控件
ContentControl 是 WPF 中的一个常见控件，用于显示单个内容元素。它可以包含任意类型的内容，包括文本、图像、控件等。
Rick_1/2
1079 0
Rick_1/2
|
11月前
|
定位技术 C# UED
WPF技术之ScrollViewer控件
WPF ScrollViewer是WPF中常用的一个控件，它提供了滚动视图的功能，可用于显示超出容器可视区域的内容。ScrollViewer通常用于容纳大量内容的控件，以在有限的空间内显示这些内容，并允许用户通过滚动来查看隐藏的部分。
Rick_1/2
1006 0