iis服务器助手广告
返回顶部
首页 > 资讯 > 后端开发 > 其他教程 >c# wpf如何使用Blend工具绘制Control样式
  • 532
分享到

c# wpf如何使用Blend工具绘制Control样式

2024-04-02 19:04:59 532人浏览 薄情痞子
摘要

目录实现效果实现方式实现步骤Blend绘制Path绘制Path绘制直线绘制曲线改变曲线形状移除Path上的线段移除Path上的点Path添加点绘制自由的形状本文通过设计一个Radio

本文通过设计一个RadioButton,分享下使用Blend绘制Path的方法。待绘制的RadioButton样式如下文所示,如有更好的方法实现该样式,欢迎交流。

实现效果

将要实现的RadioButton样式如下图,可以看出按钮的笔尖和笔身的填充色,以及选中时右上方圆形的填充色一致,代表笔的颜色。

实现方式

笔身使用矩形,填充色绑定按钮背景色;笔头部分使用闭合的Path,其中笔尖的颜色同样绑定按钮背景色;右上方的圆形使用Ellipse,填充色同样绑定按钮背景色。

实现步骤

1.打开Blend,新建一个WPF项目
2.选中MainWindow的Grid,点击资产按钮,找到RadioButton并选中,在Grid中拖动添加按钮,如下图所示:

3.找到属性中的Width/Height属性,修改为合适的值;点击缩放按钮,弹出的列表框中选中"适合选定内容",以方便编辑;
4.选中该RadioButton,右键选择编辑模板-编辑副本,弹出的对话框使用合适的方式创建资源(本文采用默认),设置完后点击确定;
5.删除templateRoot中的所有内容,只保留根Grid;此时会报错,先将xaml中的所有Trigger注释掉即可;
6.点击矩形按钮,拖动添加矩形;属性框中调整相关属性,如下图所示:

7.右键矩形按钮,选择线,添加一条直线,调整其属性,如下图:

8.选中笔按钮,第一点添加在矩形左上角,第二点长按添加在直线左端点,长按拖动鼠标可调整曲线形状;同样的方法添加右侧的Path,如下图所示:

9.点击路径选择按钮,使用键盘方向键及鼠标对Path上的点进行微调,如下图;

选中直线及两条曲线,右键路径,生成复合路径,连接两点使Path闭合;
选择pen按钮,添加笔尖曲线,如下图:

12.右键矩形按钮,选择椭圆形,在右上角添加一个椭圆,调整其属性,使Width=Height;
13.为矩形、圆形、笔尖Path设置填充色,即Fill属性,右键Fill属性右侧的方框,选择创建数据绑定,将其绑定到RadioButton的Background属性,圆形和笔尖同理。切换到RadioButton,修改其Background属性,可以看到矩形背景色随之变动,如下图;

14.选中笔头部分Path,选中其Fill属性,选择渐变画笔,调整属性值进行渐变填充;
15.切换到xaml,调整自动生成的代码,比如将Path路径中的坐标精确到小数点后一位。这样自定义的RadioButton按钮样式就完成了,使用时可以再根据需求微调。


// 最终Style
<Style x:Key="RadioButtonStyle1" TargetType="{x:Type RadioButton}">
 <Setter Property="Template">
  <Setter.Value>
   <ControlTemplate TargetType="{x:Type RadioButton}">
    <Grid x:Name="templateRoot" Background="Transparent" SnapsToDevicePixels="True">
     <Rectangle Fill="{Binding Background, RelativeSource={RelativeSource TemplatedParent}}" HorizontalAlignment="Center" Height="37" Stroke="Black" VerticalAlignment="Bottom" Width="23.5" Margin="13,0"/>
     <Path Data="M16.4,0.76 L7.4,0.76 M7.7,0.7 C2,12.87 0.5,24.1 0.5,24.1 0.5,24.1 23.1,23.8 23.1,23.8 23.1,23.8 20.7,6.5 16,0.5" HorizontalAlignment="Center" Height="24.6" Stretch="Fill" Stroke="Black" VerticalAlignment="Top" Width="23.6" Margin="13,19.4,13,0">
      <Path.Fill>
       <LinearGradientBrush EndPoint="0.5,0.5" MappingMode="RelativeToBoundingBox" StartPoint="0,0.5" SpreadMethod="Reflect">
        <GradientStop Color="#FF626060"/>
        <GradientStop Color="#FFD6D3D3" Offset="0.873"/>
       </LinearGradientBrush>
      </Path.Fill>
     </Path>
     <Path Data="M21.1,19.3 C21.1,19.3 25.3,-5.5 28.2,19.2" Fill="{Binding Background, RelativeSource={RelativeSource TemplatedParent}}" HorizontalAlignment="Left" Height="12" Margin="21.2,8.3,0,0" Stretch="Fill" Stroke="Black" VerticalAlignment="Top" Width="8"/>
     <Ellipse Fill="{Binding Background, RelativeSource={RelativeSource TemplatedParent}}" HorizontalAlignment="Right" Height="3" Stroke="Black" VerticalAlignment="Top" Width="3" Margin="0,3,3,0" StrokeThickness="0"/>
    </Grid>
   </ControlTemplate>
  </Setter.Value>
 </Setter>
</Style>

Blend绘制Path

使用Blend绘制Path的方法参考官网。

绘制Path

Path由一系列的直线或曲线连接而成,可以使用Line、Pen、Pencil工具绘制Path,可以在工具条中找到它们。

绘制直线

使用Pen工具:点击定义直线起始点,再次点击定义直线终点;
使用Line工具:拖动添加直线,在直线终点位置释放;

绘制曲线

使用Pen工具,点击添加曲线起点,再次点击并拖动可以添加点并调整两点间的曲线形状。若想闭合Path,点击起点即可。

改变曲线形状

使用路径选择工具,选中形状,拖动曲线上的点以改变形状。

移除Path上的线段

使用路径选择工具,选中Path上要删除的线段,点击删除按钮。

移除Path上的点

使用选择工具选中Path,使用Pen工具点击Path上的点即可删除。

Path添加点

使用选择工具选中Path,使用Pen工具在想要添加点的位置点击。

绘制自由的形状

使用Pencil工具进行绘制。

以上就是C# wpf如何使用Blend工具绘制Control样式的详细内容,更多关于c# 用Blend工具绘制Control样式的资料请关注编程网其它相关文章!

--结束END--

本文标题: c# wpf如何使用Blend工具绘制Control样式

本文链接: https://www.lsjlt.com/news/121665.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • c# wpf如何使用Blend工具绘制Control样式
    目录实现效果实现方式实现步骤Blend绘制Path绘制Path绘制直线绘制曲线改变曲线形状移除Path上的线段移除Path上的点Path添加点绘制自由的形状本文通过设计一个Radio...
    99+
    2024-04-02
  • CSS中如何使用Sprites样式生成工具
    CSS中如何使用Sprites样式生成工具,相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。CSS Sprites样式生成工具(图片定位坐标)首先...
    99+
    2024-04-02
  • 如何使用C++中的C++Test工具
    如何使用C++中的C++Test工具,相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。C++Test工具允许你定制白盒测试用例的生成,和在什么层次上(项目、文件、类或方法)执行测试...
    99+
    2023-06-17
  • C语言多样式的格式控制符如何使用
    这篇文章主要讲解了“C语言多样式的格式控制符如何使用”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“C语言多样式的格式控制符如何使用”吧!先来看一个代码示例:#define _CRT...
    99+
    2023-07-05
  • bootstrap如何使用响应式工具
    这篇文章主要介绍了bootstrap如何使用响应式工具,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。具体内容如下<!DOCTYPE&n...
    99+
    2024-04-02
  • ps如何使用仿制图章工具
    这篇文章主要介绍ps如何使用仿制图章工具,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完! 操作方法:选择仿制图章工具,选择与需要修复的地方匹配度高的地方,按着Alt键取样,然后在需要...
    99+
    2024-04-02
  • 如何使用canvas绘制工作流的节点
    这篇文章主要介绍了如何使用canvas绘制工作流的节点,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。  绘制前我们需要先准备一张节点图片,例如:;好了,正...
    99+
    2023-06-04
  • 如何使用Flex代码格式化工具
    小编给大家分享一下如何使用Flex代码格式化工具,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!Flex代码格式化在做Flex编码的时候,调整编码格式非常让人头疼,...
    99+
    2023-06-17
  • 如何使用css样式制作好看的表单样式
    小编给大家分享一下如何使用css样式制作好看的表单样式,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!   form代码:  ...
    99+
    2024-04-02
  • node.js中如何使用async异步控制工具
    node.js中如何使用async异步控制工具,针对这个问题,这篇文章详细介绍了相对应的分析和解答,希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。这两个操作中,第一个异步的程序我们可能会写成这...
    99+
    2024-04-02
  • 如何使用Python制作一个多进制转换工具
    小编给大家分享一下如何使用Python制作一个多进制转换工具,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!前言学习资料下载链接 提取码:tha8&nbs...
    99+
    2023-06-29
  • js代码格式化工具eslint如何使用
    这篇文章主要介绍“js代码格式化工具eslint如何使用”,在日常操作中,相信很多人在js代码格式化工具eslint如何使用问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”js代码格式化工具eslint如何使用...
    99+
    2023-06-26
  • 如何使用Python制作文件解压缩工具
    本文小编为大家详细介绍“如何使用Python制作文件解压缩工具”,内容详细,步骤清晰,细节处理妥当,希望这篇“如何使用Python制作文件解压缩工具”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧。经常由于各种压缩格...
    99+
    2023-07-06
  • 如何使用工具和库来优化C++程序?
    现代 c++++ 开发中,利用工具和库进行优化至关重要。valgrind、perf 和 lldb 等工具可识别瓶颈、测量性能并进行调试。eigen、boost 和 opencv 等库可提...
    99+
    2024-05-08
    工具 优化 c++ linux
  • C#数字信号处理工具包如何使用
    这篇文章主要介绍“C#数字信号处理工具包如何使用”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“C#数字信号处理工具包如何使用”文章能帮助大家解决问题。JXI C# DSP Tools, Spectr...
    99+
    2023-07-05
  • 如何使用Python 代码格式化工具 Black-Python
    如何使用Python 代码格式化工具 Black-Python,针对这个问题,这篇文章详细介绍了相对应的分析和解答,希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。Black 号称是不妥协的 Python 代码格式化工具。之所以...
    99+
    2023-06-02
  • 分布式系统监视工具Zabbix如何使用
    分布式系统监视工具Zabbix如何使用,很多新手对此不是很清楚,为了帮助大家解决这个难题,下面小编将为大家详细讲解,有这方面需求的人可以来学习下,希望你能有所收获。对于运维人员来说,监控是非常重要的,因为如果想要保证线上业务整体能够稳定运行...
    99+
    2023-06-28
  • C/C++程序链接与反汇编工具objdump如何使用
    这篇文章主要介绍“C/C++程序链接与反汇编工具objdump如何使用”,在日常操作中,相信很多人在C/C++程序链接与反汇编工具objdump如何使用问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”C/C++...
    99+
    2023-07-05
  • 如何使用PyQT5制作一个敏感词检测工具
    小编给大家分享一下如何使用PyQT5制作一个敏感词检测工具,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧!设计思路:根据敏感词库文件筛选,查看输入的文本中是否包含敏感词汇。从而过滤出相关的敏感词。导入应用相关的模块。impo...
    99+
    2023-06-29
  • Netty分布式高性能工具类recycler如何使用
    这篇文章主要介绍了Netty分布式高性能工具类recycler如何使用的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇Netty分布式高性能工具类recycler如何使用文章都会有所收获,下面我们一起来看看吧。r...
    99+
    2023-06-29
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作