服务器之家:专注于VPS、云服务器配置技术及软件下载分享
分类导航

PHP教程|ASP.NET教程|Java教程|ASP教程|编程技术|正则表达式|C/C++|IOS|C#|Swift|Android|VB|R语言|JavaScript|易语言|vb.net|

服务器之家 - 编程语言 - C# - c# wpf如何使用Blend工具绘制Control样式

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

2022-11-08 12:02louzi C#

这篇文章主要介绍了c# wpf如何使用Blend工具绘制Control样式,帮助大家更好的理解和学习使用c#,感兴趣的朋友可以了解下

本文通过设计一个RadioButton,分享下使用Blend绘制Path的方法。待绘制的RadioButton样式如下文所示。

实现效果

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

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

 

实现方式

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

实现步骤

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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样式的资料请关注服务器之家其它相关文章!

原文链接:https://www.cnblogs.com/louzixl/p/14466553.html

延伸 · 阅读

精彩推荐
  • C#winform实现五子棋游戏

    winform实现五子棋游戏

    这篇文章主要为大家详细介绍了winform实现五子棋游戏,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...

    Jia_ShengJie4612022-02-19
  • C#C#实现GridView导出Excel实例代码

    C#实现GridView导出Excel实例代码

    本篇文章主要介绍了C#实现GridView导出Excel实例代码,这里整理了详细的代码,非常具有实用价值,需要的朋友可以参考下。...

    rush_me11192021-12-30
  • C#C#二维数组基本用法实例

    C#二维数组基本用法实例

    这篇文章主要介绍了C#二维数组基本用法,以实例形式分析了C#中二维数组的定义、初始化、遍历及打印等用法,具有一定参考借鉴价值,需要的朋友可以参考下...

    hacker08254382021-11-01
  • C#C#生成验证码图片的方法

    C#生成验证码图片的方法

    这篇文章主要为大家详细介绍了C#生成验证码图片的方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...

    薛定谔家的猫11462022-03-01
  • C#C#中利用断点操作调试程序的步骤详解

    C#中利用断点操作调试程序的步骤详解

    所谓断点调试就是检测执行路径和数据是否正确,中断游戏运行在线调试,下面这篇文章主要给大家介绍了关于C#中利用断点操作调试程序的相关资料,需...

    小禾斗7252022-02-16
  • C#C# 实现简易的串口监视上位机功能附源码下载

    C# 实现简易的串口监视上位机功能附源码下载

    这篇文章主要介绍了C# 实现简易的串口监视上位机功能,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...

    熊来闯一闯6142022-10-17
  • C#轻松学习C#的正则表达式

    轻松学习C#的正则表达式

    轻松学习C#的正则表达式,对C#的正则表达式感兴趣的朋友可以参考本篇文章,帮助大家更灵活的运用C#的正则表达式。...

    丿木呈广予口贝5222021-11-03
  • C#C#实现3步手动建DataGridView的方法

    C#实现3步手动建DataGridView的方法

    这篇文章主要介绍了C#实现3步手动建DataGridView的方法,实例分析了C#实现手动创建DataGridView的原理与技巧,具有一定参考借鉴价值,需要的朋友可以参考下...

    我心依旧11552021-10-25