Xamarin.Forms 形狀

  • 發行項

Shape是的型View別，可讓您將圖形繪製到螢幕。 Shape 對象可以在版面配置類別和大部分控件內使用，因為 Shape 類別衍生自 View 類別。

Xamarin.Forms圖形可在 Xamarin.Forms.Shapes iOS、Android、macOS、通用 Windows 平台 （UWP） 和 Windows Presentation Foundation （WPF） 的命名空間中使用。

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別為 的 ，指定將Miter長度的比率限製為圖形的一半 StrokeThickness 。 此屬性的預設值為10.0。
  • StrokeThickness型 double別為 的 ，表示圖形外框的寬度。 此屬性的預設值為 1.0。

這些屬性是由 BindableProperty 物件所支援，這表示這些屬性可以是數據系結的目標，並設定樣式。

Xamarin.Forms 定義衍生自 Shape 類別的一些物件。 這些是 Ellipse、Line、Path、、PolylinePolygon、 和 Rectangle。

小畫家 圖形

Brush 物件可用來繪製圖形的 Stroke 和 Fill：

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

在此範例中，會指定的 Ellipse 筆劃和填滿：

Paint shapes

重要

Brush 物件會使用型別轉換子，讓 Color 值能夠指定給 Stroke 屬性。

如果您未為 指定 Brush 物件 Stroke，或如果您設定 StrokeThickness 為0，則不會繪製圖形周圍的框線。

如需對象的詳細資訊 Brush ，請參閱 Xamarin.Forms 筆刷。 如需有效 Color 值的詳細資訊，請參閱 中的 Xamarin.Forms色彩。

伸展圖形

Shape 物件具有 Aspect 類型的 Stretch屬性。 這個屬性會決定如何 Shape 延展對象的內容，以填滿 Shape 物件的版面配置空間。 Shape物件的版面配置空間是配置系統所Xamarin.Forms配置的空間Shape量，因為明確WidthRequest和HeightRequest設定，或是因為其 HorizontalOptions 和 VerticalOptions 設定。

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 和 屬性會設定為100個裝置獨立單位，且其 Aspect 屬性設定為 UniformHeightRequestWidthRequest 因此，對象的內容會重設大小以符合目的地維度，同時保留外觀比例：

Stretch shapes

繪製虛線圖形

Shape 物件具有 StrokeDashArray 類型的 DoubleCollection屬性。 這個屬性代表值集合 double ，表示用來勾勒圖形的虛線和間距圖樣。 DoubleCollection是 ObservableCollection 值的 double 。 集合 double 中的每個都會指定虛線或間距的長度。 集合中位於索引 0 的第一個專案會指定虛線的長度。 集合中位於索引 1 的第二個專案會指定間距的長度。 因此，具有偶數索引值的物件會指定虛線，而具有奇數索引值的物件則指定間距。

Shape 物件也有 StrokeDashOffset 類型的 double屬性，指定虛線開始的破折號圖樣內的距離。 無法設定這個屬性會導致 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 物件具有 StrokeLineCap 類型的 PenLineCap屬性，描述線條或線段開頭和結尾處的圖形。 PenLineCap 列舉會定義下列成員：

  • Flat，表示不會延伸超過該行最後一點的上限。 這相當於沒有行上限，而且 是 屬性的 StrokeLineCap 預設值。
  • Square，表示高度等於線條粗細且長度等於線條粗細一半的矩形。
  • Round，表示直徑等於線條粗細的半圓形。

重要

StrokeLineCap如果您在沒有起點或終點的圖形上設定屬性，則屬性不會有任何作用。 例如，如果您在 或 Rectangle上Ellipse設定此屬性，則此屬性沒有任何作用。

下列 XAML 示範如何設定 StrokeLineCap 屬性：

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

在此範例中，紅色線條會在行的開頭和結尾四捨五入：

Line caps

控制行聯結

Shape 物件具有 StrokeLineJoin 類型的 PenLineJoin屬性，指定圖形頂點所使用的聯結類型。 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