Xamarin.Forms 図形

  • [アーティクル]

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

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

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、PolylinePolygon、および Rectangleです。

図形を塗りつぶす

Brush オブジェクトは、図形 Stroke の と Fillを描画するために使用されます。

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

この例では、 のストロークと塗りつぶしを Ellipse 指定します。

ペイント 図形 ペイント

重要

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

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

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

図形をストレッチする

Shape オブジェクトには、 Aspect 型 Stretchの プロパティがあります。 このプロパティは、オブジェクトのレイアウト空間を Shape 埋めるためにオブジェクトの内容を拡大する方法を Shape 決定します。 Shapeオブジェクトのレイアウト空間は、明示的WidthRequestな と HeightRequest の設定、またはその設定により、レイアウト システムによってXamarin.Forms割り当てられる領域ShapeのHorizontalOptionsVerticalOptions量です。

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

Shape オブジェクトには StrokeDashOffset 、 型 doubleの プロパティもあります。これは、ダッシュの開始位置のダッシュ パターン内の距離を指定します。 このプロパティを設定しないと、アウトラインが Shape 実線になります。

破線の図形は、 プロパティと StrokeDashOffset プロパティの両方をStrokeDashArray設定することで描画できます。 プロパティは 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 、始点または終点のない図形に設定しても効果はありません。 たとえば、、、または Rectangleに設定した場合、このプロパティはEllipse無効です。

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

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

Line joins