[UWP]实用的Shape指南

zoukankan html css js c++ java

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

上图来自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" />
```
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>
```
1.3 StrokeDashArray

public DoubleCollection StrokeDashArray { get; set; }用于将边框变成虚线。StrokeDashArray的值是一个double类型的有序集合，集合中的值指虚线中每一段的长度，长度单位是边框值的宽度。例如以下圆形：
```
<Ellipse StrokeDashArray="1,2,3"
         Stroke="#FFFF0EC4"
         StrokeThickness="10"
         Height="200"
         Width="200" />
```
边框宽度为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" />
```
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" />
```
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" />
```
2.2 StrokeLineJoin和StrokeMiterLimit

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

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" />
```
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" />
```
4.2 FillRule

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

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>
```
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" />
```
5.4 使用Blend

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

6. Shape各项属性比较

下面表格列出了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>
```
8. 结语

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

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

9. 参考

绘制形状
 Windows.UI.Xaml.Shapes 命名空间
 Windows.UI.Xaml.Media 命名空间
查看全文

相关阅读:
【转载】Java性能优化之JVM GC（垃圾回收机制）
RobotFramework自动化测试框架-DatabaseLibrary库的使用(对数据库的操作)
Linux性能分析工具top命令详解
 RobotFramework自动化测试框架-移动手机自动化测试Element Attribute Should Match关键字的使用
 RobotFramework自动化测试框架-移动手机自动化测试Get Network Connection Status和Set Network Connection Status关键字的使用
 RobotFramework自动化测试框架-移动手机自动化测试Get Element Location关键字的使用
 在linux下，怎么去查看一个运行中的程序，到底是占用了多少内存
 RobotFramework自动化测试框架-移动手机自动化测试Click Element At Coordinates关键字的使用
 RobotFramework自动化测试框架-移动手机自动化测试Click A Point关键字的使用
 RobotFramework自动化测试框架-移动手机自动化测试Click Element关键字的使用

原文地址：https://www.cnblogs.com/dino623/p/UWP_Shape.html

[UWP]实用的Shape指南

1. Ellipse(圆形)

1.1 Fill、Stroke与StrokeThickness

1.2 Stretch

1.3 StrokeDashArray

1.4 StrokeDashCap

1.5 StrokeDashOffset

2. Rectangle(矩形)

2.1 RadiusX和RadiusY

2.2 StrokeLineJoin和StrokeMiterLimit

3. Line(直线)

3.1 X1,Y1,X2,Y2

3.2 StrokeStartLineCap与StrokeEndLineCap

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

4.1 Points

4.2 FillRule

5 Path(路径)

5.1 Data

5.2 PathGeometry

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

5.4 使用Blend

6. Shape各项属性比较

7. ViewBox

8. 结语

9. 参考