备案控制台
探索云世界
开发者社区 云原生 文章 正文

[UWP]实用的Shape指南

2018-11-06 817
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 原文:[UWP]实用的Shape指南在UWP UI系统中，使用Shape是绘制2D图形最简单的方式，小到图标，大到图表都用到Shape的派生类，可以说有举足轻重的地位。幸运的是从Silverlight以来Shape基本没有什么大改动，简直是UWP中的一股清流。
原文: [UWP]实用的Shape指南

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

img_14b9231885dc6e1482b16aac4076808a.png

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

img_ae57eeae0eb2a6716eb74923922cad73.png

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>

img_d70b6c0e719d960faf56d374d449c656.png

1.3 StrokeDashArray

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

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

img_a9bbb68a806b5e782a8e1dafd523255f.png

边框宽度为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" />

img_c329b439b5456996d47c001f30b7437b.png

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" />

img_805e05f1fb5f4fe0e00ced601143f5a5.png

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" />

img_8a44424bc5f00951eff397575109a1ad.png

2.2 StrokeLineJoin和StrokeMiterLimit

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

img_ce2ed05559f7ccd5aeb0750efced0662.png

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" />

img_b42544c309dd21801c349d39b4ad36d6.png

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" />

img_55362bcbfd778e4ea2e69d908d814312.png

4.2 FillRule

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

img_4af7be371d8be522a4c1f70d8e29193e.png

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>

img_f02b68026acf0855530c370435c8c5df.png

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" />

img_d9070cfd786337215adece9738478de7.png

5.4 使用Blend

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

img_1d8b29107893bdb531699c48bc12449c.png

6. Shape各项属性比较

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

img_1c6e240a8b6b8fe0ce0d91fecb094843.png

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>

img_1d2b20d7fe135758da0cbb7abcf36a59.png

8. 结语

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

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

9. 参考

绘制形状
Windows.UI.Xaml.Shapes 命名空间
Windows.UI.Xaml.Media 命名空间

文章标签：
C#
容器
杰克.陈
目录
相关文章
长沙红胖子Qt
|
存储 缓存 数据可视化
qml开发笔记(四)：可视化元素Rectangle、Image
qml开发笔记(四)：可视化元素Rectangle、Image
长沙红胖子Qt
625 0
qml开发笔记(四)：可视化元素Rectangle、Image
杰克.陈
|
C#
[UWP]不怎么实用的Shape指南：自定义Shape
原文:[UWP]不怎么实用的Shape指南：自定义Shape 1. 前言 这篇文章介绍了继承并自定义Shape的方法，不过，恐怕，事实上，100个xaml的程序员99个都不会用到。写出来是因为反正都学了，当作写个笔记。
杰克.陈
724 0
杰克.陈
|
API C# Windows
[UWP]用Shape做动画
原文:[UWP]用Shape做动画 相对于WPF/Silverlight，UWP的动画系统可以说有大幅提高，不过本文无意深入讨论这些动画API，本文将介绍使用Shape做一些进度、等待方面的动画，除此之外也会介绍一些相关技巧。
杰克.陈
762 0
杰克.陈
|
C# API 开发者
[UWP]用Shape做动画(2):使用与扩展PointAnimation
原文:[UWP]用Shape做动画(2):使用与扩展PointAnimation 上一篇几乎都在说DoubleAnimation的应用，这篇说说PointAnimation。 1. 使用PointAnimation 使用PointAnimation可以让Shape变形，但实际上没看到多少人会这么用，毕竟WPF做的软件多数不需要这么花俏。
杰克.陈
888 0
杰克.陈
|
Windows
Customize Acrylic Brush in UWP Applications(在UWP中自定义亚克力笔刷)
原文 Customize Acrylic Brush in UWP Applications(在UWP中自定义亚克力笔刷) Windows 10 Fall Creators Update（Build 16299）添加了acrylic brush，这是一个类似于Windows 7 Aero效果的UI画笔。
杰克.陈
1398 0
杰克.陈
|
C#
WPF 3D model - Sphere, Cone, and Cylinder
原文:WPF 3D model - Sphere, Cone, and Cylinder   Extending Visual3D - Sphere, Cone, and Cylinder http://blogs.
杰克.陈
1030 0
杰克.陈
|
C#
WPF 将Bitmapsource转换到Emgu.cv.image
原文:WPF 将Bitmapsource转换到Emgu.cv.image Transform WPF BitmapSource to Emgu.
杰克.陈
1198 0
杰克.陈
|
C# 计算机视觉
OpencvSharp 在WPF的Image控件中显示图像
原文:OpencvSharp 在WPF的Image控件中显示图像 1、安装OpencvSharp 我使用的是VS2013 社区版，安装OpencvSharp3.0 在线安装方法：进入Tools，打开NuGet的包管理器 搜索Opencv 安装之后就可以使用，无需再做其他配置。
杰克.陈
3928 0
杰克.陈
Emgu-WPF学习使用-Rectangle识别
原文:Emgu-WPF学习使用-Rectangle识别 环境：Win8 64位 Vs2015 Emgu 版本：emgucv-windesktop 3.2.0.2682 示例图上部流程：原图->灰度化->截断阈值化->中值模糊->高斯模糊->膨胀->腐蚀->Ostu二值化。
杰克.陈
1261 0
杰克.陈
|
C#
【C#/WPF】修改图像的DPI、Resolution
原文:【C#/WPF】修改图像的DPI、Resolution 问题： WPF中默认使用的图像的DPI是96。如果我们使用的图素的DPI不是96时（比如是72），那么WPF会把图片的DPI自动改为96，导致图像加载出来的实际大小Width和Height会比想要的大（原图显示大小会是实际图大小的72/96 = 3/4），比如图片会在Image控件内显示超框了。
杰克.陈
1364 0