[UWP]实用的Shape指南

时间:2021-12-24 04:01:33

在UWP UI系统中,使用Shape是绘制2D图形最简单的方式,小到图标,大到图表都用到Shape的派生类,可以说有举足轻重的地位。幸运的是从Silverlight以来Shape基本没有什么大改动,简直是UWP中的一股清流。

[UWP]实用的Shape指南

上图来自Pro Silverlight 5 in C#,可见Silverlight中的Shape和UWP的Shape基本架构一致。Shape的API从WPF以来就几乎没变,对熟悉WPF/Silverlight的开发者来说几乎是零学习成本。

1. Ellipse(圆形)

Ellipse没有在Shape的基础上增加任何属性,是Shape的派生类中最简单的一个。

1.1 Fill、Stroke与StrokeThickness

public Brush Fill { get; set; }public Brush Stroke { get; set; }public System.Double StrokeThickness { get; set; }是Shape中最常用的三个属性,分别用于设置Shape的填充颜色、边框颜色、边框宽度。改变StrokeThickness并不会改变形状的大小。

<Ellipse  Height="100"
Width="100"
Fill="#FF7E9EC0"
Stroke="#FFFF0EC4"
StrokeThickness="5"
Margin="10" />

[UWP]实用的Shape指南

1.2 Stretch

public Stretch Stretch { get; set; }用于确定形状如何填充可用的区域。Stretch的所有枚举值如下:

  • None: 形状不被拉伸。
  • Fill: 形状拉伸其宽度和高度,从而可以正好适应其容器。
  • Uniform: 按比例改变形状的宽度和高度,直至形状到达容器板边缘。
  • UniformToFill: 按比例改变形状的宽度和高度,直到形状填满了整个可用控件的高度和宽度。

效果如下

<StackPanel Orientation="Horizontal">
<Ellipse Fill="#FF7E9EC0"
Stroke="#FFFF0EC4"
StrokeThickness="5"
Height="50"
Width="100"
Stretch="Fill" />
<Ellipse Fill="#FF7E9EC0"
Stroke="#FFFF0EC4"
StrokeThickness="5"
Height="50"
Width="100"
Stretch="None" />
<Ellipse Fill="#FF7E9EC0"
Stroke="#FFFF0EC4"
StrokeThickness="5"
Height="50"
Width="100"
Stretch="Uniform" />
<Ellipse Fill="#FF7E9EC0"
Stroke="#FFFF0EC4"
StrokeThickness="5"
Height="50"
Width="100"
Stretch="UniformToFill" />
</StackPanel>

[UWP]实用的Shape指南

1.3 StrokeDashArray

public DoubleCollection StrokeDashArray { get; set; }用于将边框变成虚线。StrokeDashArray的值是一个double类型的有序集合,集合中的值指虚线中每一段的长度,长度单位是边框值的宽度。例如以下圆形:

<Ellipse StrokeDashArray="1,2,3"
Stroke="#FFFF0EC4"
StrokeThickness="10"
Height="200"
Width="200" />

[UWP]实用的Shape指南

边框宽度为10,虚线的第一段是长度为10的实线,第二段为长度为20的空白,第三段为长度为30的实线,然后如此循环直到结束。

自从开始WPF工作以来,我一直将StrokeDashArray的值设为一个好看又好记的值:4 2,the answer to life, the universe, and everything

<Ellipse StrokeDashArray="4 2"
Stroke="#FFFF0EC4"
StrokeThickness="3"
Height="200"
Width="200" />

[UWP]实用的Shape指南

1.4 StrokeDashCap

public PenLineCap StrokeDashCap { get; set; }表示虚线中实线两端的边缘轮廓。PenLineCap的枚举值如下:

  • Flat: 一个未超出直线上最后一点的线帽。 等同于无线帽。
  • Square: 一个高度等于直线粗细、长度等于直线粗细一半的矩形。
  • Round: 一个直径等于直线粗细的半圆形。
  • Triangle: 一个底边长度等于直线粗细的等腰直角三角形。
<Grid Margin="10,10"
Width="200"
Height="10"
Background="Gray">
<Line Stretch="Fill"
Stroke="Red"
StrokeThickness="10.5"
X2="1"
StrokeEndLineCap="Flat" />
</Grid>
<TextBlock Text="Flat"
Grid.Column="1"
VerticalAlignment="Center" />
<Grid Width="200"
Margin="10,10"
Height="10"
Background="Gray"
Grid.Row="1">
<Line Stretch="Fill"
Stroke="Red"
StrokeThickness="10"
X2="1"
StrokeEndLineCap="Round" />
</Grid>
<TextBlock Text="Round"
Grid.Row="1"
Grid.Column="1"
VerticalAlignment="Center" />
<Grid Width="200"
Margin="10,10"
Height="10"
Background="Gray"
Grid.Row="2">
<Line Stretch="Fill"
Stroke="Red"
StrokeThickness="10"
X2="1"
StrokeEndLineCap="Square" />
</Grid>
<TextBlock Text="Square"
Grid.Row="2"
Grid.Column="1"
VerticalAlignment="Center" />
<Grid Width="200"
Margin="10,10"
Height="10"
Background="Gray"
Grid.Row="3">
<Line Stretch="Fill"
Stroke="Red"
StrokeThickness="10"
X2="1"
StrokeEndLineCap="Triangle" />
</Grid>
<TextBlock Text="Triangle"
Grid.Row="3"
Grid.Column="1"
VerticalAlignment="Center" />

[UWP]实用的Shape指南

1.5 StrokeDashOffset

public System.Double StrokeDashOffset { get; set; }用于指定虚线开始的位置。

2. Rectangle(矩形)

Rectangle 只比Shape多了RadiusX和RadiusY两个属性。

2.1 RadiusX和RadiusY

public System.Double RadiusX { get; set; }和public System.Double RadiusY { get; set; }分别用于指定用于使矩形的角变圆的椭圆的x轴和 y轴半径。

如下面这个例子,可以看到 RadiusX="50" RadiusY="20"的Rectangle的圆角和Width="100" Height="40"的Ellipse(x轴半径50,y轴半径20)完全重合在一起。

<Rectangle  Height="100"
Width="100"
Fill="#FF7E9EC0"
Stroke="#FFFF0EC4"
StrokeThickness="5"
RadiusX="50"
RadiusY="20" />
<Ellipse HorizontalAlignment="Left"
VerticalAlignment="Top"
StrokeThickness="5"
Stroke="Yellow"
Fill="Red"
Width="100"
Height="40"
Opacity="0.5" />

[UWP]实用的Shape指南

2.2 StrokeLineJoin和StrokeMiterLimit

public PenLineJoin StrokeLineJoin { get; set; }public System.Double StrokeMiterLimit { get; set; }确定形状拐角处的形状。这两个属性都是Shape的属性,但对Ellipse和Line这两个没有拐角的形状不起作用。

[UWP]实用的Shape指南

3. Line(直线)

Line表示从第一个点(X1,Y1)到第二个点(X2,Y2)的一条直线。

3.1 X1,Y1,X2,Y2

这四个属性确定了Line的起点和终点。

除了使用绝对值定位Line的位置,还可以使用相对定位。

<Line Stretch="Fill"
X1="0"
X2="1"
StrokeDashArray="4 2"
Stroke="BlueViolet"
StrokeThickness="1" />

[UWP]实用的Shape指南

3.2 StrokeStartLineCap与StrokeEndLineCap

public PenLineCap StrokeStartLineCap { get; set; }public PenLineCap StrokeEndLineCap { get; set; }决定直线开始端和结束端的轮廓。这两个属性都是Shape的属性,但只影响Line、Polyline和Path,对Rectangle这类没有开始和结束端的形状没有影响。

4. Polygon(多边形)和Polyline(折线)

这两个形状具有相同的属性,外观也相似。区别只是如果Points的最后一个点和第一个点不一样,Polygon会自动将这两个点连接到一起。

4.1 Points

public PointCollection Points { get; set; }用于设置Polygon和Polyline的顶点。

<Polygon Points="15,200 68,70 110,200 0,125 135,125"
Fill="Red"
Stroke="Blue"
StrokeThickness="4"
Stretch="Fill"
Height="100"
Width="100" /> <Polyline Points="15,200 68,70 110,200 0,125 135,125"
Fill="Red"
Stroke="Blue"
StrokeThickness="4"
Stretch="Fill"
Height="100"
Width="100"
Margin="20,0,0,0" />

[UWP]实用的Shape指南

4.2 FillRule

public FillRule FillRule { get; set; }指定如何确定形状的内部填充。默认值是EvenOdd,如果设置成Nonzero,效果如下:

[UWP]实用的Shape指南

5 Path(路径)

Path是功能最强大的形状,它基本上由上面的其它形状组成并且可以替代它们中的任何一个。只是Path使用起来也比较复杂,只有在图表和少量场景用到,很多时候比起构造复杂的Path还不如用直接用图片。

5.1 Data

public Geometry Data { get; set; }属性指定要绘制形状的Geometry。Geometry 定义几何图形并且定义了坐标和尺寸等细节 ,由Path绘制到屏幕。UWP中的Geometry包含以下几个:

  • EllipseGeometry: 表示圆或椭圆的几何图形。
  • LineGeometry: 表示线条的几何图形。
  • PathGeometry: 表示一个可能由弧、曲线、椭圆、直线和矩形组成的基于矢量的复杂形状。
  • RectangleGeometry: 描述二维矩形这一几何图形。

除此之外,还可以使用由多个Geometry组成的GeometryGroup构造组合形状。

5.2 PathGeometry

在所有Geometry中PathGeometry是功能最强大的,唯一的缺点是太多复杂。它使用public PathFigureCollection Figures { get; set; }描述包含的图形内容,PathFigure由PathSegment的派生类描述,包括:

  • ArcSegment: 表示两点之间的一条椭圆弧。
  • BezierSegment: 表示在两个点之间绘制的一条三次贝塞尔曲线。
  • LineSegment: 表示在两个点之间绘制的一条线,它可能是 PathFigure 在 Path 数据内的一部分。
  • PolyBezierSegment: 表示一条或多条三次方贝塞尔曲线。
  • PolyLineSegment: 表示由 Point 集合定义的一组线段,每个 Point 指定一个线段的终点。
  • PolyQuadraticBezierSegment: 表示一系列二次贝塞尔线段。
  • QuadraticBezierSegment: 在 PathFigure 中的两点之间创建二次贝塞尔曲线。

下面是一个Path的官方示例,同时使用了各种Geometry及部分PathSegment:

<Path Stroke="Black"
Margin="10"
StrokeThickness="1"
Fill="#CCCCFF">
<Path.Data>
<GeometryGroup>
<RectangleGeometry Rect="50,5 100,10" />
<RectangleGeometry Rect="5,5 95,180" />
<EllipseGeometry Center="100, 100"
RadiusX="20"
RadiusY="30" />
<RectangleGeometry Rect="50,175 100,10" />
<PathGeometry>
<PathGeometry.Figures>
<PathFigureCollection>
<PathFigure IsClosed="true"
StartPoint="50,50">
<PathFigure.Segments>
<PathSegmentCollection>
<BezierSegment Point1="75,300"
Point2="125,100"
Point3="150,50" />
<BezierSegment Point1="125,300"
Point2="75,100"
Point3="50,50" />
</PathSegmentCollection>
</PathFigure.Segments>
</PathFigure>
</PathFigureCollection>
</PathGeometry.Figures>
</PathGeometry>
</GeometryGroup>
</Path.Data>
</Path>

[UWP]实用的Shape指南

5.3 图形微语言(geometry mini-language)

Path的XAML虽然具备很高的可读性,但在存储上不具优势。所以UWP提供了一种替代语法:图形微语言。图形微语言使用一组简单的字符串描述Path的图形,一般来说不需要学习它的语法,因为通常它是由工具生成的。

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

[UWP]实用的Shape指南

5.4 使用Blend

通常用一个Path代替多个Shape不止更好管理,用户界面的性能也会更好。Blend里面提供了针对Shape的功能,可以对多个Shape进行合并或转换为路劲。

[UWP]实用的Shape指南

6. Shape各项属性比较

下面表格列出了Shape的各项属性,标记为“×”的属性代码这个属性对这个形状无效。

[UWP]实用的Shape指南

7. ViewBox

ViewBox是拉伸或缩放单个子元素的容器,最常用来搭配Shape(或文字)使用,因为Shape是矢量图形,放大后不会失真。

ViewBox有以下三个属性:

  • Child: 获取或设置 Viewbox 元素的单一子元素。
  • Stretch: 获取或设置确定内容如何适合可用空间的 Stretch 模式。
  • StretchDirection: 获取或设置确定缩放如何应用于 Viewbox 内容的 StretchDirection。
<StackPanel Orientation="Horizontal">
<Canvas Width="30" Height="30">
<Rectangle Stroke="Red"
StrokeThickness="1"
Height="20"
Width="20" />
<Rectangle Stroke="Green"
StrokeThickness="1"
Height="20"
Width="20"
Canvas.Left="10"
Canvas.Top="10" />
</Canvas> <Viewbox Height="100"
Width="100"
Margin="30,0,0,0"
Stretch="Uniform">
<Canvas Height="30" Width="30">
<Rectangle Stroke="Red"
StrokeThickness="1"
Height="20"
Width="20" />
<Rectangle Stroke="Green"
StrokeThickness="1"
Height="20"
Width="20"
Canvas.Left="10"
Canvas.Top="10" />
</Canvas>
</Viewbox>
</StackPanel>

[UWP]实用的Shape指南

8. 结语

系统地学过Shape相关知识只在很多年前刚开始学WPF/Silverlight时做过,平时除了Rectangle和Line其他的Shape好少会用到,所以即使有多年经验对Shape的很多知识点还是有点陌生,这次趁学习UWP的机会复习一下。

但因为很多知识点平时就很少会用到,后面越写越腻味。

9. 参考

绘制形状

Windows.UI.Xaml.Shapes 命名空间

Windows.UI.Xaml.Media 命名空间

[UWP]实用的Shape指南的更多相关文章

  1. &lbrack;UWP&rsqb;不怎么实用的Shape指南:自定义Shape

    1. 前言 这篇文章介绍了继承并自定义Shape的方法,不过,恐怕,事实上,100个xaml的程序员99个都不会用到.写出来是因为反正都学了,当作写个笔记. 通过这篇文章,你可以学到如下知识点: 自定 ...

  2. &lbrack;UI&rsqb;实用案例--Shape绘制实用圆圈

    Android允许通过xml定义资源,常见的事string,id,integer,dimen等,也可以定义一些图片资源,比如用来做几何的矢量图就非常好用,其中有许多的细节问题,具体需求可以再结合goo ...

  3. 【wpf】Path画扇形以及Path的Data属性的理解

    <Path x:Name="PathFillColor" Fill="{TemplateBinding Property=Button.Background}&qu ...

  4. &lbrack;UWP&rsqb;创建一个进度按钮

    1. 前言 最近想要一个进度按钮. 传统上UWP上处理进度可以这样实现,首先是XAML,包括一个ProgressBar和一个按钮: <StackPanel Orientation="H ...

  5. &lbrack;WPF&rsqb; 使用三种方式实现弧形进度条

    1. 需求 前天看到有人问弧形进度条怎么做,我模仿了一下,成果如下图所示: 当时我第一反应是可以用 Microsoft.Toolkit.Uwp.UI.Controls 里的 RadialGauge 实 ...

  6. J2EE修炼之四书五经&lbrack;转自2004年程序员&rsqb;

    J2EE修炼之四书五经 作者:彭晨阳 J2EE其实没有四书五经,因为J2EE一直如汹涌澎湃的大江,推陈出新,不断高速发展,这是一种带领我们走向未来的技术.当然,如何在这种气势如虹的潮流之中不至于迷失方 ...

  7. Python3 学习第四弹:编码问题(转载)

    关于python的编码问题一直以来不得解,终于在今天从这篇博文中明白了. 原文地址: http://nedbatchelder.com/text/unipain.html 译文地址:http://py ...

  8. 大前端的自动化工厂(3)—— babel

    一. 关于babel babel是ES6+语法的编译器,官方网址:www.babeljs.io,用于将旧版本浏览器无法识别的语法和特性转换成为ES5语法,使代码能够适用更多环境. 最初的babel使用 ...

  9. 100本Python精品书籍(附pdf电子书下载)

    51本Python精品书籍(附下载)链接: https://pan.baidu.com/s/19ydAKCFxM0plkepXMlqQLg 提取码: nnpe 400集python视频教程下载:链接: ...

随机推荐

  1. C&num;中服务端接受前端JSON字符串转换成字典集合

    我们是否可以把从前端接受的JSON字符串转换成字典集合呢? 比如从前端接收:{'size':'10', 'weight':'10kg'} 在服务端转换成:[{size:"10"}, ...

  2. BZOJ1930 &lbrack;Shoi2003&rsqb;pacman 吃豆豆

     dp,首先建出图,f[i][j]表示a吃到了i点,b吃到了j点的最大值,转移的时候转移拓扑序小的那一维,如果i拓扑序小于j,那么转移到f[k][j],否则转移到f[i][k],建出的图边数也要优化, ...

  3. Python的包管理工具Pip

    接触了Ruby,发现它有个包管理工具RubyGem非常好用,而且有非常完备的文档系统http://rdoc.info 发现Python下也有相同的工具,包含easy_install和Pip.只是,我没 ...

  4. VM 打开虚拟机时报&OpenCurlyDoubleQuote;内部错误”

    VM 打开虚拟机时报“内部错误” 你是直接双击VM软件吗? 试下右键用管理员身份打开VM吧 是不是成功了 不成功不要找我,我就是这样成功的,就自己记录下

  5. SIAlertView

    SIAlertView是AlertView的替代产品 的效果比较多 . 使用实例: SIAlertView *alertView = [[SIAlertView alloc] initWithTitl ...

  6. PHP的ip2long和long2ip函数的实现原理

    最近要做个十进制数字的可逆转换做邀请码,一直没搞清楚怎么弄的,实在太复杂了,今天弄IP时想到这个可以进行转换,于是研究了下原理: 主要是自己整理了下: $ip = '12.34.56.78'; $ip ...

  7. 好用的Chrome插件推荐

    无扩展,不 Chrome :几款 Chrome 扩展程序推荐 相信很多人都在使用 Chrome 浏览器,其流畅的浏览体验得到了不少用户的偏爱,但流畅只是一方面, Chrome 最大的优势还是其支持众多 ...

  8. vue图片裁剪插件vue-cropper

    最近做后台管理,需要用到图片裁剪,这个组件很好用,记录一下. 工作太忙,就不总结了. 链接分享:https://github.com/xyxiao001/vue-cropper

  9. zookeeper选举流程

    如何在zookeeper集群中选举出一个leader,zookeeper使用了三种算法,具体使用哪种算法,在配置文件中是可以配置的,对应的配置项是”electionAlg”,其中1对应的是Leader ...

  10. homework1-201521410029

    姓名:孙浩学号: 201521410029指导教师:高见                实验日期:2018年8月9日 1. 虚拟机安装与调试 安装好xp和kali虚拟机之后,查看这三者(包括主机)的i ...