使用XAML做出的各种2D图形

最新推荐文章于 2024-10-07 22:09:14 发布

风雨无季花自开

最新推荐文章于 2024-10-07 22:09:14 发布

阅读量519

点赞数 2

分类专栏： C#中的XAML代码

本文链接：https://blog.youkuaiyun.com/weixin_44545036/article/details/89857306

版权

C#中的XAML代码专栏收录该内容

12 篇文章

订阅专栏

本文介绍了如何使用XAML在WPF中创建各种2D图形，包括直线、矩形、圆形、椭圆、多边形、多线形以及曲线。通过调整不同属性，如Stroke、StrokeThickness、Fill等，可以改变图形的颜色、形状和样式，实现丰富的视觉效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

使用XAML做出的各种2D图形

开发工具与关键技术：Visual Studio + WPF + SQL Server + .Net
作者：琉敏
撰写时间：2019年5月3日

1、直线图。首先定义两点（X1，Y1）和（X2，Y2），两点连成一条直线，属性Stroke是改变直线的颜色，属性StrokeThickness是改变直线的粗细程度。

<Window x:Class="_2DShape.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="直线" Height="180" Width="350">
	<Line X1="300" Y1="100" X2="100" Y2="100" Stroke="Blue" StrokeThickness="8"></Line>
</Window>

1)界面运行效果：
在这里插入图片描述
2、修改直线形状。属性StrokeStartLineCap是改变直线开始的形状，属性StrokeEndLineCap是改变直线结尾的形状，这两个属性都有四个值（Flat：不变，保持原型；Round：变成圆形；Square：变成方形；Triangle：变成三角形）可改变直线的开始和结尾的形状。

<Window x:Class="_2DShape.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="直线" Height="180" Width="350">
    <Line X1="300" Y1="100" X2="100" Y2="100" Stroke="Blue" StrokeThickness="20" StrokeStartLineCap="Round" StrokeEndLineCap="Triangle"></Line>
</Window>

1)界面运行效果：
在这里插入图片描述
3、矩形。属性Fill是填充颜色，属性Stroke是改变边框颜色。属性StrokeThickness是改变边框粗细程度。

<Window x:Class="_2DShape.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="矩形" Height="200" Width="300">
    <Rectangle Width="150" Height="120" Fill="Green" Stroke="Blue" StrokeThickness="5" Margin="0,0,80,15">        </Rectangle>
</Window>

1)界面运行效果：
在这里插入图片描述
4、圆形。圆形是在矩形的基础上修改得来的。属性RadiusX是改变X轴的圆角，属性RadiusY是改变Y轴的圆角。其实在矩形的基础上，改变宽（width），高（height）的长度和X轴，Y轴的圆角像素可以得到一些其他的图形，可以自己试一试。

<Window x:Class="_2DShape.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="圆形" Height="250" Width="300">
    <Rectangle Width="150" Height="150" Fill="Red" Stroke="Green" StrokeThickness="5" RadiusX="100" RadiusY="100">        </Rectangle>
</Window>

1)界面运行效果：
在这里插入图片描述
5、椭圆形。绘制椭圆形可以用椭圆形标签制作，也可以用矩形标签制作。

<Window x:Class="_2DShape.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="椭圆形" Height="250" Width="300">
	<Ellipse Fill="Purple" Height="130" Width="250" Stroke="DarkGreen" StrokeThickness="5"></Ellipse>
	//<!--矩形变成椭圆形-->
    //<!--<Rectangle Width="100" Height="180" Fill="Red" Stroke="Green" StrokeThickness="5" RadiusX="80" RadiusY="80"></Rectangle>-->
</Window>

1)界面运行效果：
在这里插入图片描述
6、多边形。在属性Points里定义至少三点，并且每个点用空格隔开，然后每个点用直线连接起来，为了直观好看点，也可以适当的添加一些其他属性，这就成一个多边形了。

<Window x:Class="_2DShape.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="多边形" Height="220" Width="420">
    <Polygon Points="150,150 300,125 300,20 150,100" Stroke="Purple" Fill="Red" StrokeThickness="5">        </Polygon>
</Window>

1)界面运行效果：
在这里插入图片描述
7、多线形。个人觉得多线形跟多边形很像，但它们又是有区别的，多边形不管定义的是几个点最后都是一个闭合的多边图形；多线形不是，它只有是开始的点和结束的点的X轴跟Y轴是同一个点才是一个闭合的多线形，如果不是，多边形就不会是一个闭合的多线形。

<Window x:Class="_2DShape.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="多线形" Height="180" Width="380">
    <Polyline Points="110,30 320,30 320,110 210,130" Stroke="Green" StrokeThickness="5" Fill="Orange"></Polyline>
</Window>

1)界面运行效果：
在这里插入图片描述
8、曲线。这个曲线只是WPF中的路径标记语法中的三次贝塞尔曲线，属性data中的M表示startpoint是绝对坐标值，m表示startpoint是相对于上一个点的偏移量；C或c（cpoint1，cpoint2，endpoint）表示当前点和指定终点在两点控制点的作用下画一条三次贝塞尔曲线；Z或z的作用是闭合整个Path，在当前点和图形的起点画一条线段。

<Window x:Class="_2DShape.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="曲线" Height="250" Width="380">
    <Path Stroke="Purple" StrokeThickness="5" Fill="GreenYellow" Data="M 100,200 C 100,25 200,250 280,38 Z"></Path>
</Window>