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

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

2021-09-17 554
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 结合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个性
wpf控件
photoshop wpf
wpf进度条控件
JackWang1987
目录
相关文章
小王老师呀
|
20天前
|
数据处理 C# Windows
WPF中实现弹出进度条窗口
【11月更文挑战第14天】在WPF中实现弹出进度条窗口，需创建进度条窗口界面（XAML）和对应的代码-behind（C#）。通过定义`ProgressWindow`类，包含`ProgressBar`和`TextBlock`，并在主窗口或逻辑代码中调用，模拟长时间任务时更新进度条，确保UI流畅。
小王老师呀
30 0
广州爱奇迪-伍华聪
|
4月前
|
开发框架 缓存 前端开发
循序渐进介绍基于CommunityToolkit.Mvvm 和HandyControl的WPF应用端开发(11) -- 下拉列表的数据绑定以及自定义系统字典列表控件
循序渐进介绍基于CommunityToolkit.Mvvm 和HandyControl的WPF应用端开发(11) -- 下拉列表的数据绑定以及自定义系统字典列表控件
广州爱奇迪-伍华聪
138 15
追逐时光者
|
4月前
|
C# 开发者 Windows
一款基于Fluent设计风格、现代化的WPF UI控件库
一款基于Fluent设计风格、现代化的WPF UI控件库
追逐时光者
105 1
mingupup
|
4月前
|
C# Windows
WPF中如何使用HandyCotrol控件库
WPF中如何使用HandyCotrol控件库
mingupup
199 1
土木林森
|
4月前
|
机器人 C# 人工智能
智能升级：WPF与人工智能的跨界合作——手把手教你集成聊天机器人，打造互动新体验与个性化服务
【8月更文挑战第31天】聊天机器人已成为现代应用的重要组成部分，提供即时响应、个性化服务及全天候支持。随着AI技术的发展，聊天机器人的功能日益强大，不仅能进行简单问答，还能实现复杂对话管理和情感分析。本文通过具体案例分析，展示了如何在WPF应用中集成聊天机器人，并通过示例代码详细说明其实现过程。使用Microsoft的Bot Framework可以轻松创建并配置聊天机器人，增强应用互动性和用户体验。首先，需在Bot Framework门户中创建机器人项目并编写逻辑。然后，在WPF应用中添加聊天界面，实现与机器人的交互。
土木林森
120 0
土木林森
|
4月前
|
C# 前端开发 UED
WPF数据验证实战：内置控件与自定义规则，带你玩转前端数据验证，让你的应用程序更上一层楼！
【8月更文挑战第31天】在WPF应用开发中，数据验证是确保输入正确性的关键环节。前端验证能及时发现错误，提升用户体验和程序可靠性。本文对比了几种常用的WPF数据验证方法，并通过示例展示了如何使用内置验证控件（如`TextBox`）及自定义验证规则实现有效验证。内置控件结合`Validation`类可快速实现简单验证；自定义规则则提供了更灵活的复杂逻辑支持。希望本文能帮助开发者更好地进行WPF数据验证。
土木林森
139 0
土木林森
|
4月前
|
C# UED 定位技术
WPF控件大全：初学者必读，掌握控件使用技巧，让你的应用程序更上一层楼！
【8月更文挑战第31天】在WPF应用程序开发中，控件是实现用户界面交互的关键元素。WPF提供了丰富的控件库，包括基础控件（如`Button`、`TextBox`）、布局控件（如`StackPanel`、`Grid`）、数据绑定控件（如`ListBox`、`DataGrid`）等。本文将介绍这些控件的基本分类及使用技巧，并通过示例代码展示如何在项目中应用。合理选择控件并利用布局控件和数据绑定功能，可以提升用户体验和程序性能。
土木林森
77 0
广州爱奇迪-伍华聪
|
4月前
|
开发框架 前端开发 JavaScript
WPF应用开发之控件动态内容展示
WPF应用开发之控件动态内容展示
广州爱奇迪-伍华聪
57 2
mingupup
|
4月前
|
前端开发 C#
wpfui：一个开源免费具有现代化设计趋势的WPF控件库
wpfui：一个开源免费具有现代化设计趋势的WPF控件库
mingupup
152 0
广州爱奇迪-伍华聪
|
4月前
|
开发框架 前端开发 C#
使用WPF开发自定义用户控件，以及实现相关自定义事件的处理
使用WPF开发自定义用户控件，以及实现相关自定义事件的处理
广州爱奇迪-伍华聪
117 0