Xamarin.Forms 形状

  • 项目

Shape 是一种 View，可让你在屏幕上绘制形状。 Shape 对象可以在布局类和大多数控件中使用，因为 Shape 类派生自 View 类。

可在 iOS、Android、macOS、通用 Windows 平台 (UWP) 和 Windows Presentation Foundation (WPF) 上的 Xamarin.Forms.Shapes 命名空间中使用 Xamarin.Forms 形状。

Shape 定义以下属性：

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

这些属性由 BindableProperty 对象提供支持，表示它们可以是数据绑定的目标，并可以设置样式。

Xamarin.Forms 定义了许多从 Shape 类派生的对象。 它们分别是 Ellipse、Line、Path、Polygon、Polyline 和 Rectangle。

绘制形状

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

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

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

Paint shapes

重要

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

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

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

拉伸形状

Shape 对象包含 Aspect 属性，类型为 Stretch。 此属性确定如何拉伸 Shape 对象的内容以填充 Shape 对象的布局空间。 由于 Shape 对象显式的 WidthRequest 和 HeightRequest 设置，或者由于其 HorizontalOptions 和 VerticalOptions 设置，该对象的布局空间是由 Xamarin.Forms 布局系统分配的 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。 因此，将调整对象的内容大小以适应目标尺寸，同时保留纵横比：

Stretch shapes

绘制虚线形状

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

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

Dashed rectangle

控制直线终点

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

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

在此示例中，红色直线在其起点和终点处做圆角处理：

Line caps

控制直线联接

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

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

Line joins