Xamarin.Forms 図形

Shape は View の一種であり、これを使用すると、画面に図形を描画できます。 Shape クラスは View クラスから派生しているため、Shape オブジェクトはレイアウト クラスおよびほとんどのコントロール内で使用できます。

Xamarin.Forms 図形は、iOS、Android、macOS、ユニバーサル Windows プラットフォーム (UWP)、および Windows Presentation Foundation (WPF) の Xamarin.Forms.Shapes 名前空間で使用できます。

Shape には、次のプロパティが定義されています。

• Stretch 型の Aspect は、図形の割り当てられた領域を塗りつぶす方法を表します。 このプロパティの既定値は Stretch.None です。
• Brush 型の Fill は、図形の内部のペイントに使用するブラシを示します。
• Brush 型の Stroke は、図形の輪郭のペイントに使用するブラシを示します。
• DoubleCollection 型の StrokeDashArray は、図形の輪郭を描くために使用されるダッシュとギャップのパターンを示す double 値のコレクションを表します。
• double 型の StrokeDashOffset は、ダッシュの開始位置となる、ダッシュ パターン内の距離を指定します。 このプロパティの既定値は 0.0 です。
• PenLineCap 型の StrokeLineCap は、線またはセグメントの始点と終点の図形を表します。 このプロパティの既定値は PenLineCap.Flat です。
• PenLineJoin 型の StrokeLineJoin は、図形の頂点で使用される結合の種類を指定します。 このプロパティの既定値は PenLineJoin.Miter です。
• double 型の StrokeMiterLimit は、図形の StrokeThickness の半分に対するマイター長の比率の制限を指定します。 このプロパティの既定値は 10.0 です。
• double 型の StrokeThickness は、図形のアウトラインの幅を示します。 このプロパティの既定値は 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 のストロークと塗りつぶしを指定しています。

重要

Brush オブジェクトは、Color 値を Stroke プロパティに指定できるようにする型コンバーターを使用します。

Stroke に Brush オブジェクトを指定しない場合、または StrokeThickness を 0 に設定した場合、図形の周囲の境界線は描画されません。

Brush の詳細については、「Xamarin.Forms ブラシ」を参照してください。 有効な Color 値の詳細については、「Xamarin.Forms の 色」を参照してください。

図形の伸縮

Shape オブジェクトには、Stretch 型の Aspect プロパティがあります。 このプロパティは、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 オブジェクトの WidthRequest プロパティと HeightRequest プロパティはデバイスに依存しない 100 単位に設定され、その Aspect プロパティは Uniform に設定されます。 その結果、オブジェクトの内容は、縦横比を維持しながら、コピー先の寸法に合わせてサイズが変更されます。

破線の図形を描画する

Shape オブジェクトには、DoubleCollection 型の StrokeDashArray プロパティがあります。 このプロパティは、図形の輪郭を描くために使用されるダッシュとギャップのパターンを示す double 値のコレクションを表します。 DoubleCollection は double 値の ObservableCollection です。 コレクション内の各 double 要素は、ダッシュやギャップの長さを指定します。 インデックス 0 にあるコレクション内の最初の項目は、ダッシュの長さを指定します。 インデックス 1 にあるコレクション内の 2 番目の項目は、ギャップの長さを指定します。 したがって、偶数インデックス値を持つオブジェクトはダッシュを指定し、奇数のインデックス値を持つオブジェクトはギャップを指定します。

Shape オブジェクトには、ダッシュが始まるダッシュ パターン内の距離を指定する StrokeDashOffset プロパティ (double 型) もあります。 このプロパティを設定しないと、 Shape の輪郭が塗りつぶされます。

破線の図形は、StrokeDashArray と StrokeDashOffset プロパティの両方を設定することで描画できます。 StrokeDashArray プロパティは 1 つ以上 の double 値に設定し、各ペアを 1 つのコンマまたは 1 つ以上のスペースで区切る必要があります。 たとえば、"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" />

この例では、破線のストロークで塗りつぶされた四角形が描画されます。

線分の端部の制御

線分には、始点、ラインボディ、終点の 3 つの部分があります。 始点と終点は、線分やセグメントの始点と終点の形状を表します。

Shape オブジェクトには、線分やセグメントの始点と終点の形状を表す StrokeLineCap プロパティ (PenLineCap 型) があります。 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 オブジェクトには、図形の頂点で使用する結合点の種類を指定する StrokeLineJoin プロパティ (PenLineJoin 型) があります。 PenLineJoin 列挙型には、次のメンバーが定義されています。

• Miter は、標準の角度頂点を表します。 これは、StrokeLineJoin プロパティの既定値です。
• Bevel は、面取りした頂点を表します。
• Round は、丸い頂点を表します。

Note

StrokeLineJoin プロパティが Miter に設定されている場合、StrokeMiterLimit プロパティを double に設定して、図形内の線分の結合点のマイターの長さを制限できます。

次の XAML では、StrokeLineJoin プロパティを設定する方法を示しています。

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

この例では、濃い青色のポリラインの頂点で結合点が丸いです。

関連リンク

• Xamarin.Forms ブラシ
• Xamarin.Forms の色