形状

浏览示例

.NET Multi-platform App UI (.NET MAUI) Shape 是一种 View，可用于将形状绘制到屏幕。 Shape 对象可以在布局类和大多数控件中使用，因为 Shape 类派生自 View 类。 Microsoft.Maui.Controls.Shapes 命名空间中提供了 .NET MAUI 形状。

Shape 定义以下属性:

• Aspect，类型为 Stretch，描述形状如何填充其分配的空间。 此属性的默认值为 Stretch.None。
• Fill，类型为 Brush，指示用于绘制形状内部的画笔。
• Stroke，类型为 Brush，指示用于绘制形状轮廓的画笔。
• StrokeDashArray，类型为 DoubleCollection，表示 double 值的集合，这些值指示勾勒形状轮廓所用虚线和间隙的图案。
• StrokeDashOffset，类型为 double，指定虚线图案中虚线开始的距离。 此属性的默认值为 0.0。
• StrokeDashPattern，类型为 float[]，指示在绘制形状描边时使用的虚线和间隙的图案。
• StrokeLineCap，类型为 PenLineCap，描述直线或线段起点和终点处的形状。 此属性的默认值为 PenLineCap.Flat。
• StrokeLineJoin，类型为 PenLineJoin，指定在形状顶点使用的联接类型。 此属性的默认值为 PenLineJoin.Miter。
• StrokeMiterLimit，类型为 double，指定斜接长度与形状 StrokeThickness 一半之比的限制。 此属性的默认值为 10.0。
• StrokeThickness，类型为 double，指示形状轮廓的宽度。 此属性的默认值为1.0。

这些属性由 BindableProperty 对象提供支持；也就是说，它们可以作为数据绑定的目标，并能进行样式设置。

.NET MAUI 定义派生自 Shape 类的多个对象。 它们分别是 Ellipse、Line、Path、Polygon、Polyline、Rectangle 和 RoundRectangle。

绘制形状

Brush 对象用于绘制形状的 Stroke 和 Fill：

<Ellipse Fill="DarkBlue"
         Stroke="Red"
         StrokeThickness="4"
         WidthRequest="150"
         HeightRequest="50"
         HorizontalOptions="Start" />

在此示例中，指定了 Ellipse 的描边和填充：

重要

Brush 对象使用支持为 Stroke 属性指定 Color 值的类型转换器。

如果未为 Stroke 指定 Brush 对象，或者将 StrokeThickness 设置为 0，则不会绘制形状周围的边框。

有关 Brush 对象的详细信息，请参阅画笔。 有关有效 Color 值的详细信息，请参阅颜色。

拉伸形状

Shape 对象包含 Aspect 属性，类型为 Stretch。 此属性确定如何拉伸 Shape 对象的内容以填充 Shape 对象的布局空间。 由于显式 WidthRequest 和 HeightRequest 设置或其 HorizontalOptions 和 VerticalOptions 设置，Shape 对象的布局空间是 .NET MAUI 布局体系为 Shape 分配的空间量。

Stretch 枚举定义下列成员：

• None，指示内容保留其原始大小。 这是 Shape.Aspect 属性的默认值。
• Fill，指示调整内容大小以填充目标尺寸。 不保留纵横比。
• Uniform，指示调整内容大小以适应目标尺寸，同时保留纵横比。
• UniformToFill，表示调整内容大小以填充目标尺寸，同时保留纵横比。 如果目标矩形的纵横比不同于源矩形的纵横比，则对源内容进行剪裁以适合目标尺寸。

以下 XAML 演示如何设置 Aspect 属性：

<Path Aspect="Uniform"
      Stroke="Yellow"
      Fill="Red"
      BackgroundColor="LightGray"
      HorizontalOptions="Start"
      HeightRequest="100"
      WidthRequest="100">
    <Path.Data>
        <!-- Path data goes here -->
    </Path.Data>  
</Path>      

在此示例中，对象 Path 绘制心形。 将 Path 对象的 WidthRequest 和 HeightRequest 属性设置为 100 个独立于设备的单位，并将其 Aspect 属性设置为 Uniform。 因此，将调整对象的内容大小以适应目标尺寸，同时保留纵横比：

绘制虚线形状

Shape 对象包含类型为 DoubleCollection 的 StrokeDashArray 属性。 此属性表示 double 值的集合，这些值指示勾勒形状轮廓所用虚线和间隙的图案。 DoubleCollection 是 double 值的 ObservableCollection。 集合中的每个 double 都指定虚线或间隙的长度。 集合中的第一项位于索引 0 处，指定虚线的长度。 集合中的第二项位于索引 1 处，指定间隙的长度。 因此，具有偶数索引值的对象指定虚线，而具有奇数索引值的对象则指定间隙。

Shape 对象还包含类型为 double 的 StrokeDashOffset 属性，该属性指定虚线图案中虚线开始的距离。 未能设置此属性将导致 Shape 呈实线轮廓。

可以通过设置 StrokeDashArray 和 StrokeDashOffset 属性绘制虚线形状。 应将 StrokeDashArray 属性设置为一个或多个 double 值，每对由一个逗号和/或一个或多个空格分隔。 例如，“0.5 1.0”和“0.5,1.0”都是有效的。

以下 XAML 示例演示如何绘制虚线矩形：

<Rectangle Fill="DarkBlue"
           Stroke="Red"
           StrokeThickness="4"
           StrokeDashArray="1,1"
           StrokeDashOffset="6"
           WidthRequest="150"
           HeightRequest="50"
           HorizontalOptions="Start" />

在此示例中，绘制了带有虚线描边的填充矩形：

控制直线终点

一条线由三部分组成：起始端、线本体和末端。 起始端和末端描述直线或线段起点和终点的形状。

Shape 对象包含类型为 PenLineCap 的 StrokeLineCap 属性，用于描述直线或线段起点和终点处的形状。 PenLineCap 枚举定义下列成员：

• Flat，表示未超出直线上最后一点的端点。 这相当于没有直线端点，并且是 StrokeLineCap 属性的默认值。
• Square，表示一个高度等于直线粗细、长度等于直线粗细一半的矩形。
• Round，表示一个直径等于直线粗细的半圆。

重要

如果在没有起点或终点的形状上设置 StrokeLineCap 属性，则该属性无效。 例如，如果在 Ellipse 或 Rectangle 上设置属性，则此属性无效。

以下 XAML 演示如何设置 StrokeLineCap 属性：

<Line X1="0"
      Y1="20"
      X2="300"
      Y2="20"
      StrokeLineCap="Round"
      Stroke="Red"
      StrokeThickness="12" />

在此示例中，红线在直线的起点和终点处进行圆角处理：

控制直线联接

Shape 对象包含类型为 PenLineJoin 的 StrokeLineJoin 属性，该属性指定在形状顶点处使用的联接类型。 PenLineJoin 枚举定义下列成员：

• Miter，表示正则角顶点。 这是 StrokeLineJoin 属性的默认值。
• Bevel，表示斜角顶点。
• Round，表示圆角顶点。

注意

将 StrokeLineJoin 属性设置为 Miter 时，可以将 StrokeMiterLimit 属性设置为 double，以限制形状中直线联接的斜接长度。

以下 XAML 演示如何设置 StrokeLineJoin 属性：

<Polyline Points="20 20,250 50,20 120"
          Stroke="DarkBlue"
          StrokeThickness="20"
          StrokeLineJoin="Round" />

在此示例中，深蓝色折线在其顶点处采用圆角联接：