不可不知的WPF形状(Shape)

news/2024/9/19 2:17:46/文章来源:https://www.cnblogs.com/hsiang/p/18390859

在WPF开发中经常需要进行绘制图形,可以利用Shape类型绘制基本的形状,而且Shape派生自FrameworkElement,属于UI元素范畴,可以直接利用XAML进行绘制。本文通过一些简单的小例子,简述如何通过Shape类绘制形状,仅供学习分享使用,如有不足之处,还请指正。

 

Shape类位于System.Windows.Shapes命名空间,而上篇文章介绍的Brush位于System.Windows.Media命令空间,由此可见两者所属的分类不同。Shape属于abstract修饰的抽象类,不能直接实例化,需要使用其派生类才可以。

 

形状对象

 

WPF提供了许多可以直接使用的Shape对象,而这些形状对象都是Shape的派生类,常见的主要包括直线(Line),椭圆(Ellipse),路径(Path),矩形(Rectangle),闭合多边形(Polygon),非闭合多边形(Ployline)等,具体如下所示:

所有的形状对象都派送自Shape基类,所以具有相同的属性,主要有以下几个:

  • Stroke,主要用于描述边框的绘制方式,为Brush类型。
  • Fill,主要用于描述形状对象的填充绘制方式,为Brush类型。
  • StrokeThickness,主要用于设置形状外边框的宽度,为double类型。

形状对象由于继承自FrameworkElement,可以像其他UI元素一样用在页面布局容器中。而由于Canvas支持子控件的绝对定位,所以非方便Shape对象的绘制。

 

直线(Line)

 

Line可用于在两点之间绘制直线。除了继承自Shape的属性外,属于Line的常见属性如下:

X1,Y1,主要用于设置直线的起始坐标。

X2,Y2,主要用于设置直线的结束坐标

绘制一条直线,代码如下所示:

// 增加一个直线形状
var line = new Line();
//设置起始坐标
line.X1 = 1;
line.Y1 = 1;
//设置结束坐标
line.X2 = 50;
line.Y2 = 50;
line.HorizontalAlignment = HorizontalAlignment.Left;
line.VerticalAlignment = VerticalAlignment.Center;
//设置边框线绘制方式和宽度
line.Stroke = System.Windows.Media.Brushes.LightSteelBlue;
line.StrokeThickness = 2;
myGrid.Children.Add(line);

上述代码在XAML中实现,如下所示:

<Line X1="1" Y1="1" X2="50" Y2="50" Stroke="LightSteelBlue" StrokeThickness="2" HorizontalAlignment="Left" VerticalAlignment="Center">
</Line>

尽管Line也有Fill属性,但是一般不会使用,因为Line没有闭合空间,设置了也不会有效果。

下图显示了呈现的 Line。

直线图示

 

椭圆(Ellipse)

 

Ellipse通过Width和Height属性来绘制椭圆,而圆(Circle)就是Width和Height相等的椭圆。

绘制椭圆代码如下所示:

// 创建一个椭圆
Ellipse ellipse = new Ellipse();
// 创建一个画笔
SolidColorBrush brush = new SolidColorBrush();
brush.Color = Color.FromArgb(255, 255, 255, 0);
ellipse.Fill = brush;//用画笔作为椭圆的填充方式
ellipse.StrokeThickness = 2;
ellipse.Stroke = Brushes.Black;//设置椭圆的大小
ellipse.Width = 200;
ellipse.Height = 100;

上述代码在XAML中实现,如下所示:

<EllipseFill="#FFFFFF00"Height="100"Width="200"StrokeThickness="2"Stroke="Black"/>

下图显示了一个呈现的 Ellipse 示例。

椭圆图示

 

矩形(Rectangle)

 

Rectangle通过Width和Height来绘制矩形,通过Fill属性设置矩形的填充方式,通过Stroke和StrokThickness设置外边框的画笔和粗细。Rectangle常见属性如下所示:

  • Width,Height 设置矩形的宽度和高度。
  • Fill设置矩形的填充方式,为Brush类型。
  • Stroke设置外边框的绘制方式,为Brush类型。
  • StrokeThickness,设置外边框的粗细,为double类型。
  • RadiusX,RadiusY,可用于为矩形设置圆角,分别对应矩形圆角的x轴和y轴半径。

绘制矩形,如下所示:

<Canvas Width="120" Height="200" ><!-- 宽100高50,蓝色填充的矩形 --><RectangleWidth="100" Height="50"Fill="Blue"Canvas.Left="10"Canvas.Top="25" /><!-- 宽100高50,蓝色填充,黑边框,半径为20的圆角的矩形 --><RectangleWidth="100" Height="50"Fill="Blue"Stroke="Black" StrokeThickness="4"RadiusX="20" RadiusY="20"Canvas.Left="10"Canvas.Top="100"/>
</Canvas>

 

非闭合多边形(Polyline)

 

Ployline是一系列的非闭合的连接线,通过Points属性设置折线的顶点,Stroke设置线条的绘制方式,StrokeThickness设置线条的粗细。由于Polyline是非闭合的,所以Fill属性不起作用。

绘制非闭合多变形,如下所示:

<Canvas Height="400" Width="400"><PolylinePoints="10,110 60,10 110,110"Stroke="Black"StrokeThickness="4" /><PolylinePoints="10,110 110,110 110,10"Stroke="Black"StrokeThickness="4"Canvas.Left="150" /> 
</Canvas>

下图显示了一个Ployline的示例:

 

闭合多边形(Polygon)

 

Polygon用于绘制闭合多边形,依次将多边形的顶点进行连接,并自动绘制一条连接第一个点和最后一个点的线,形成闭合多边形。常见属性如下所示:

  • Points设置多边形的顶点,表示一组坐标,不同顶点用空格隔开,同一个顶点的x,y坐标用逗号隔开。格式:x1,y1 x2,y2 x3,y3 ... xn,yn。
  • Fill设置多边形的填充方式,为Brush类型。
  • Stroke设置外边框的绘制方式,为Brush类型。
  • StrokeThickness,设置外边框的粗细,为double类型。

Polygon绘制多边形代码如下所示:

<Canvas Height="300" Width="300"><!-- 蓝色三角形 --><Polygon Points="10,110 60,10 110,110" Fill="Blue" /><!-- 黑边框的蓝色三角形 --><Polygon Points="10,110 60,10 110,110"Fill="Blue"Stroke="Black" StrokeThickness="4"Canvas.Top="150" /><!-- 蓝色填充的三角形 --><Polygon Points="10,110 110,110 110,10"Fill="Blue"Canvas.Left="150" /><!-- 黑边框无填充的三角形--><Polygon Points="10,110 110,110 110,10"Stroke="Black" StrokeThickness="4"Canvas.Left="150" Canvas.Top="150" />
</Canvas>

下图显示了一个Ploygon示例:

 

路径形状(Path)

 

Path用于绘制曲线和复杂的图形,主要通过Data属性进行设置路径,为Geometry类型。常见的Geometry类型有LineGeometry,RectangleGeometry,EllipseGeometry等简单的图形,还可以用PathGeometry创建复杂的图形。

PathGeometry 对象由一个或多个 PathFigure 对象组成;每个 PathFigure 代表不同的“图形”或形状。 每个 PathFigure 本身由一个或多个 PathSegment 对象组成,每个对象代表图形或形状的连接部分。 细分类型包括:LineSegment、BezierSegment 和 ArcSegment。

下面的示例使用了 Path 绘制二次贝塞尔曲线。

<Path Stroke="Black" StrokeThickness="1"><Path.Data><PathGeometry><PathGeometry.Figures><PathFigureCollection><PathFigure StartPoint="10,100"><PathFigure.Segments><PathSegmentCollection><QuadraticBezierSegment Point1="200,200" Point2="300,100" /></PathSegmentCollection></PathFigure.Segments></PathFigure></PathFigureCollection></PathGeometry.Figures></PathGeometry></Path.Data>
</Path>

上述代码中,Figures作为PathGeometry的默认属性,Segments作为PathFigure的默认属性,可以省略,简化后的代码如下所示:

<Path Stroke="Black" StrokeThickness="1"><Path.Data><PathGeometry><PathFigureCollection><PathFigure StartPoint="10,100"><PathSegmentCollection><QuadraticBezierSegment Point1="200,200" Point2="300,100" /></PathSegmentCollection></PathFigure></PathFigureCollection></PathGeometry></Path.Data>
</Path>

下图显示了呈现的形状。

路径图示

上述代码相对比较复杂,如果要设计一个复杂的图形,则可能要几十上百行代码,所以在XAML中,还有一种简化写法,如下所示:

<Path Stroke="DarkGoldenRod" StrokeThickness="3"Data="M 100,200 C 100,25 400,350 400,175 H 280" />

生成的形状如下所示:

关于Path中Data的语法知识,可以不必死记硬背,只需要了解即可。

 

可拉伸的形状(Stretch)

 

Shape及其派生类,都有Stretch属性,可用于填充布局空间,常见属性如下:

  • None:不会拉伸 Shape 对象的内容。

  • Fill:将拉伸 Shape 对象的内容以填充其布局空间。 不保留纵横比。

  • Uniform:最大程度地拉伸 Shape 对象的内容以填充布局空间,同时保留原始纵横比。

  • UniformToFill:拉伸 Shape 对象的内容以填满布局空间,同时保留原始纵横比。

Stretch设置示例如下所示:

<Polygon  Points="0,0 0,1 1,1"  Fill="Blue"  Width="100"  Height="100"  Stretch="Fill"  Stroke="Black"  StrokeThickness="2" />

在上述示例中,使用了 Polygon 来绘制从 (0,0) 到 (0,1) 再到 (1,1) 的一个很小的三角形。 Polygon 对象的 Width 和 Height 设置为 100,其拉伸属性设置为 Fill。 因此,Polygon 对象的内容(三角形)被拉伸以填充更大的空间。

以上就是《不可不知的WPF形状(Shape)》的全部内容,具体内容可参考官网:https://learn.microsoft.com/zh-cn/dotnet/desktop/wpf/graphics-multimedia/shapes?view=netframeworkdesktop-4.8

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/791909.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

软件工程第一次个人作业

这个作业属于哪个课程 https://edu.cnblogs.com/campus/fzu/SE2024这个作业要求在哪里 https://edu.cnblogs.com/campus/fzu/SE2024/homework/13243这个作业的目标 学会使用Aigc工具生成个人logo,搭建github个人网站,并熟悉markdown编辑,进行自我知识和技能评估学号 1022011…

日本出行

必备飞机 https://www.bilibili.com/video/BV1RC411J7tf/ 前3分钟 南航 全日空航空 出行公交卡(西瓜卡,首充1000 711消费完) 车次 15:42 https://www.bilibili.com/video/BV1j64y1A7x1/ 车次 13:24 https://www.bilibili.com/video/BV1RC411J7tf pasmo卡(只支持地铁,不支持…

智慧环卫:城市清洁的未来图景与技术革新

在智慧城市的宏伟蓝图中,“智慧环卫”正以其独特的姿态,悄然改变着城市的清洁与环境卫生管理方式。智慧环卫不仅仅是技术的简单应用,更是城市管理智慧化、生态化的重要体现。本文旨在深入探讨智慧环卫的内涵、技术支撑、实践案例及对城市环境改善的深远影响。智慧环卫:定义…

AWC 批量查询使用关系的最新版本并导出Excel

1.查询使用关系的方法:* 调用查询返回数据* @param {Object} data* @returns {Promise}* */ export let queryItemRevisionById = function (data) {if (!data.item_id) {messagingService.showInfo("请输入查询条件");return;}var item_id=data.item_id.dbValue.re…

Docker 简介

首先说明一些特性:一个容器中只有一个主进程,遵循单一原则,否则一个容器挂了会导致多个进程挂掉;容器其实就是一个进程,docker可以管理这些进程。docker能够进行容器隔离,我们操作的其实是docker客户端,而不是server端。 docker info # 查看docker信息docker基本概念 doc…

阿里重磅开源Qwen2-VL:超越人类的视觉理解能力,从医学影像到手写识别,这款开源多模态大模型究竟有多强?(附本地化部署教程)

阿里重磅开源Qwen2-VL:超越人类的视觉理解能力,从医学影像到手写识别,这款开源多模态大模型究竟有多强?(附本地化部署教程)模型介绍 最近呢,阿里巴巴开源了Qwen2-VL,在多模态大模型展现了在实际应用中的巨大潜力,尤其是在处理跨模态数据方面表现出众。以下是该模型的几…

2024 秋季PAT认证甲级(题解A1-A4)

2024 秋季PAT认证甲级(题解A-D) 写在前面 这一次PAT甲级应该是最近几次最简单的一次了,3个小时的比赛差不多30分钟就ak了(也是拿下了整场比赛的rk1),下面是题解报告,每个题目差不多都是20-30行代码,难度在洛谷普及组左右(cf 1000-1200分)A. A-1 Happy Patting 题目描述…

安装远程软件

1.进入raylink官网点击立即下载【https://www.raylink.live/download.html】2.下载好后双击安装3.安装完成后打开raylink

Hyper-V 安装 Centos

Author: ACatSmiling Since: 2024-09-02CentOS 安装 ISO 镜像下载官方网站:https://www.centos.org/目前,最新版本为 CentOS Stream 9:本文以 CentOS 7 为例,下载页拉到下面,选择旧版本安装。Older Versions Legacy versions of CentOS are no longer supported. For hist…

使用zig语言制作简单博客网站(八)归档页和关于页

后端代码注册路由// 归档文章router.get("/api/article/archive", &articleController.getArchiveArticles);model/article.zig增加以下代码/// 用于存放归档文章信息 pub const ArchiveArticle = struct {id: u32,title: []const u8,cate_name: []const u8,crea…

多线程、任务、异步的区别

Task和Thread的区别 这是一个高频,深刻的问题,无论去哪都逃不过被询问这个问题。Task是基于Thread的,这是众所周知的。但是Task和Thread的联系如此简单和纯粹确实我没想到的。甚至只需要几十行代码就能呈现其原理。一个简单的模拟实例说明Task及其调度问题,这真是一篇好文章…

UART

UART协议帧在 UART中,传输模式为数据包形式。数据包由起始位、数据帧、奇偶校验位和停止位组成。起始位当不传输数据时, UART 数据传输线通常保持高电压电平。若要开始数据传输,发送UART 会将传输线从高电平拉到低电平并保持1 个时钟周期。当接收 UART 检测到高到低电压跃迁…