绘制图形Winui3

如何绘制形状，如椭圆、矩形、多边形以及路径。 Path 类是在 XAML UI 中可视化基于相当复杂矢量的绘图语言的方法；例如，可以绘制贝塞尔曲线。

重要的 API：路径类、Windows.UI.Xaml.Shapes 命名空间、Windows.UI.Xaml.Media 命名空间

两组类定义 XAML UI 中的空间区域：Shape 类和 Geometry 类。 这些类之间的主要区别在于，Shape 具有一个与其关联的画笔并可以呈现到屏幕，而 Geometry 只定义一个空间区域并且不进行呈现，除非它用于帮助将信息提供给另一 UI 属性。 你可以将 Shape 视为 UIElement，其边界通过 Geometry 定义。 

Shape 类包括 Line、Ellipse、Rectangle、Polygon、Polyline 和 Path。 Path 非常有趣，因为它可以定义任意几何图形，同时还会在此处介绍 Geometry 类，因为这是定义部分 Path 的一个方法。

形状的 Fill (填充)和 Stroke(描边)

为了将 Shape 呈现到应用画布上，必须在它与 Brush 之间建立关联。 将 Shape 的 Fill 属性设置为所需的 Brush。 有关画笔的详细信息，请参阅使用笔画。

Shape 还可以有一个 Stroke（在形状的外围绘制的线条）。 Stroke 还需要一个用于定义其外观的 Brush，而且其 StrokeThickness 应当具有非零值。 StrokeThickness 是一个属性，用来定义形状边缘的外围粗细。 如果你没有为 Stroke 指定 Brush 值，或者如果你将 StrokeThickness 设置为 0，则将不绘制形状周围的边界。

Ellipse(圆、椭圆)

<Ellipse Fill="SteelBlue" Height="200" Width="200" />

var ellipse1 = new Ellipse();
            //填充
            ellipse1.Fill = new SolidColorBrush(Colors.Green);
            ellipse1.Width = 100;
            ellipse1.Height = 200;
            //描边
            ellipse1.Stroke = new SolidColorBrush(Colors.Red);
            // When you create a XAML element in code, you have to add
            // it to the XAML visual tree. This example assumes you have
            // a panel named 'layoutRoot' in your XAML file, like this:
            // <Grid x:Name="layoutRoot>
            mygrid.Children.Add(ellipse1);

Rectangle 矩形，长方形

Rectangle 形状有四个边而且相对的两个边相等。 若要创建基本的 Rectangle，请指定 Width、Height 和 Fill。

你可以为 Rectangle 创建圆角。 若要创建圆角，请指定 RadiusX 和 RadiusY 属性的值。 这些属性指定椭圆的 X 轴和 Y 轴，以定义角的曲线。 RadiusX 的最大允许值为 Width 的一半，RadiusY 的最大允许值为 Height 的一半。

下一个示例创建 ，Rectangle我们将 StrokeThickness 设置为 3。 我们将 RadiusX 属性设置为 50，并将 RadiusY 属性设置为 10，从而为 Rectangle 创建圆角。

 var rectangle1 = new Rectangle();
            rectangle1.Fill = new SolidColorBrush(Colors.Blue);
            rectangle1.Width =100;
            rectangle1.Height =  200;
            rectangle1.Stroke = new SolidColorBrush(Colors.Blue);
            //rectangle1.StrokeThickness = 0.5;
            rectangle1.RadiusX = 5;
            rectangle1.RadiusY = 10;

            // When you create a XAML element in code, you have to add
            // it to the XAML visual tree. This example assumes you have
            // a panel named 'layoutRoot' in your XAML file, like this:
            // <Grid x:Name="layoutRoot>
            mygrid.Children.Add(rectangle1);

提示 对于 UI 定义来说，在某些情况下，不使用 Rectangle，使用 Border 可能更合理。 如果你打算在其他内容周围创建一个矩形形状，最好使用 Border，因为它可能会有子内容而且将自动在子内容周围调整大小，而不是像 Rectangle 那样使用固定的高度和宽度尺寸。 Border 在你设置了 CornerRadius 属性的情况下还提供了创建圆角的选项。

另一方面，Rectangle 可能是控件组合的较好选择。 Rectangle 形状可以在很多控件模板中看到，因为它用作可获得焦点的控件的“FocusVisual”部分。 当控件处于“已设置焦点”视觉状态时，此矩形可见，在其他状态时，它处于隐藏状态。

Border 边框  是一个容器控件，它在另一个对象周围绘制边框、背景或两者。

您可以通过设置边框的Width、Height、BorderBrush、BorderThickness和Background颜色来指定边框的基本属性。此外，您可以通过设置CornerRadius属性使边框圆角，通过设置Padding属性可以将对象定位在 Border 内。

一个 Border 只能包含一个子对象。如果要为多个对象设置边框，请将它们包装在容器对象中，例如StackPanel。

 <!--绘制边框和背景-->
        <Border BorderBrush="White" BorderThickness="4" 
        Height="108" Width="64">
            <StackPanel>
                <Rectangle Fill="Red" Height="50" Width="50"/>
                <Rectangle Fill="Green" Height="50" Width="50"/>
            </StackPanel>
        </Border>

<!--绘制圆角，此方法比直接用Rectangle绘制的圆角更光滑-->
        <Border Background="Coral" Width="100" Height="200" Padding="10" CornerRadius="20">
            <TextBlock FontSize="16">Text Surrounded by a Border</TextBlock>
        </Border>

Polygon 多边形(闭环) 

Polygon 是通过任意数量的点来定义边的形状。 边通过用直线将点一个一个连接起来（最后一个点与第一个点相连）而创建。 Points 属性定义组成边的点集。 在 XAML 中，使用逗号分隔的列表定义点。 在代码隐藏文件中，使用 PointCollection 定义各个点，并将每个点作为一个 Point 值添加到集合中。

你不必为了将起点和终点指定为相同的 Point 值而明确声明点。 Polygon 的呈现逻辑假设你要定义闭合形状而且会自动将终点与起点连起来。

 <Polygon Fill="LightBlue"
         Points="10,200,60,140,130,140,180,200" />

 var polygon1 = new Polygon();
            polygon1.Fill = new SolidColorBrush(Colors.Red);
            var points = new PointCollection();
            points.Add(new Point(10,200));
            points.Add(new Point(60, 140));
            points.Add(new Point(130, 140));
            points.Add(new Point(180, 200));
            polygon1.Points = points;
            mygrid.Children.Add(polygon1);

Line  线 

Line 只是一条在坐标空间中的两个点之间绘制的直线。 Line 忽略为 Fill 提供的任何值，因为它没有内部空间。 对于 Line，请确保为 Stroke 和 StrokeThickness 属性指定值，否则 Line 将不呈现。

不要使用 Point 值指定 Line 形状，而应针对 X1、Y1、X2 和 Y2 使用离散的 Double 值。 这会使得横线或竖线的标记最少。 例如，<Line Stroke="Red" X2="400"/> 定义一条长为 400 个像素的横线。 另一对 X,Y 属性在默认情况下为 0，因此，从点的角度看，此 XAML 将绘制一条从 (0,0) 到 (400,0) 的直线。 如果你希望它从 (0,0) 之外的任意点开始，则可以使用 TranslateTransform 移动整个 Line。

<Line Stroke="Red" X1="100" Y1="200" X2="400" Y2="500"/>

var line1 = new Line();
            line1.Stroke = new SolidColorBrush(Colors.Red);
            line1.X2 = 400;
            line1.Y1 = 200;
            line1.Y2 = 500;
            line1.X1 = 100;
            // When you create a XAML element in code, you have to add
            // it to the XAML visual tree. This example assumes you have
            // a panel named 'layoutRoot' in your XAML file, like this:
            // <Grid x:Name="layoutRoot>
            mygrid.Children.Add(line1);

  TranslateTransform  移动图形偏移坐标

此示例使用 TranslateTransform 来偏移文本。在此示例中，主文本下方的文本稍微偏移副本会产生阴影效果。

<!--利用RenderTransform进行文本偏移生产阴影效果-->
        <Canvas>
            <!-- Offset the text using a TranslateTransform. -->
            <TextBlock FontFamily="Verdana"
               FontSize="32"
               FontWeight="Bold" 
               Foreground="Black"
               Text="Translated Text">
                <TextBlock.RenderTransform>
                    <TranslateTransform X="2" Y="2" />
                </TextBlock.RenderTransform>
            </TextBlock>

            <TextBlock FontFamily="Verdana"
               FontSize="32"
               FontWeight="Bold" 
               Foreground="Coral"
               Text="Translated Text"/>
        </Canvas>

点击图形，图形偏移后重新绘制

<Canvas Width="200" Height="200">
            <Rectangle PointerPressed="Rectangle_PointerPressed" 
               Width="50" Height="50" 
               Fill="RoyalBlue">
                <Rectangle.RenderTransform>
                    <!-- If you give the transform a name 
                 you can access it easily from code. -->
                    <TranslateTransform x:Name="myTranslateTransform" />
                </Rectangle.RenderTransform>
            </Rectangle>
        </Canvas>

 private void Rectangle_PointerPressed(object sender, PointerRoutedEventArgs e)
        {//点击图形，图形偏移后重新绘制
            myTranslateTransform.X = myTranslateTransform.X + 15;
            myTranslateTransform.Y = myTranslateTransform.Y + 15;
        }

Polyline 多边形(开口)

Polyline 与 Polygon 类似，该形状的边也是通过一组点来进行定义，只不过 Polyline 的最后一个点不与第一个点相连。

如果你指定 Polyline 的 Fill，则 Fill 会绘制形状的内部空间，即使为 Polyline 设置的 Points 的起点和终点不相交也是如此。 如果你没有指定 Fill，则 Polyline 与指定了多个单独的、其连续直线的起点和终点相交的 Line 元素时所呈现的内容相似。

 <Polyline Stroke="Black" StrokeThickness="4" Fill="Red"
        Points="10,200,60,140,130,140,180,200" />

 var polyline1 = new Polyline();
            polyline1.Stroke = new SolidColorBrush(Colors.Black);
            polyline1.StrokeThickness = 4;

            var points = new PointCollection();
            points.Add(new Windows.Foundation.Point(10, 200));
            points.Add(new Windows.Foundation.Point(60, 140));
            points.Add(new Windows.Foundation.Point(130, 140));
            points.Add(new Windows.Foundation.Point(180, 200));
            polyline1.Points = points;

            mygrid.Children.Add(polyline1);

注意，第一个点和最后一个点不像在 Polygon 那样由 Stroke 轮廓连接起来。 

 Path 路径 任意几何图形

Path 是最通用的 Shape，因为使用它可以定义任意几何图形。 但是这种通用性非常复杂。 让我们来看看如何在 XAML 中创建一个基本的 Path。

定义其路径具有 Data 属性的几何图形。 可使用两种技术设置 Data：

• 你可以在 XAML 中为 Data 定义字符串值。 在这种形状中，Path.Data 值对于图形采用序列化格式。 在首次设置了该值后，你通常无需以字符串对该值进行文本编辑。 而是应当使用能够在图面上的设计或绘制标记中工作的设计工具。 然后，可以保存或导出输出内容，系统会为你提供一个包含 Path.Data 信息的 XAML 文件或 XAML 字符串片段。
• 可以将 Data 属性设置为单个 Geometry 对象。 这可以通过在代码或在 XAML 中来完成。 这个 Geometry 通常是充当容器的 GeometryGroup，该容器可以将多个几何图形定义组合到单个对象中以形成对象模型。 这样做最常见的理由是，你希望使用一个或多个可以定义为 PathFigure 的 Segments 值（例如 BezierSegment）的曲线和复杂形状。

此示例显示了一个 Path，它是由以下操作生成的：使用 Blend for Visual Studio 生成少数几个矢量形状，然后将结果另存为 XAML。 整个 Path 由一条贝塞尔曲线和一条线段组成。 此示例主要是为了举例说明 Path.Data 序列化格式中存在的元素以及各个数字所代表的含义。

此 Data 从 move 命令（由“M”指示）开始，该命令为此路径指定起点的绝对值。

第一段是三次方贝塞尔曲线，起点为 (100,200)，终点为 (400,175)，通过两个控制点 (100,25) 和 (400,350) 绘制而成。 这一段由 Data 属性字符串中的“C”命令指示。

第二段从横线的绝对值命令“H”开始，该命令指定一条从上一个子路径的终结点 (400,175) 到新的终结点 (280,175) 绘制的线段。 由于这是一个横线命令，因此指定的值为 x 坐标。

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