Xamarin.Forms ブラシ: グラデーション

  • [アーティクル]

GradientBrush クラスは、Brush クラスから派生し、グラデーション境界で構成されるグラデーションを記述する抽象クラスです。 グラデーション ブラシは、軸に沿って互いに溶け込む複数の色で領域を塗りつぶします。 GradientBrush から派生するクラスは、グラデーション境界を解釈するさまざまな方法を記述し、Xamarin.Forms により次のグラデーション ブラシが提供されます。

GradientBrush クラスは、GradientStopsCollection 型の GradientStops プロパティを定義します。これはブラシのグラデーション境界を表し、それぞれがブラシのグラデーション軸に沿った色とオフセットを指定します。 GradientStopsCollection は GradientStop オブジェクトの ObservableCollection です。 GradientStops プロパティは BindableProperty オブジェクトによってサポートされています。つまり、データ バインディングのターゲットとして使用でき、スタイルを設定できます。

Note

GradientStops プロパティは GradientBrush クラスの ContentProperty であるため、XAML から明示的に設定する必要はありません。

グラデーション境界

グラデーション境界はグラデーション ブラシの構成要素であり、グラデーション内の色とグラデーション軸に沿った位置を指定します。 グラデーション境界は、GradientStop オブジェクトを使用して指定されます。

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

  • Color 型の Color は、グラデーション境界の色を表します。 このプロパティの既定値は Color.Default です。
  • float 型の Offset は、グラデーション ベクトル内のグラデーション境界の位置を表します。 このプロパティの既定値は 0 で、有効な値は 0.0 から 1.0 の範囲です。 この値が 0 に近づくほど、色はグラデーションの始まりに近づきます。 同様に、この値が 1 に近づくほど、色はグラデーションの終わりに近づきます。

これらのプロパティは、BindableProperty オブジェクトが基になっています。つまり、これらは、データ バインディングの対象にすることができ、スタイルを設定できます。

重要

グラデーションで使用される座標系は、出力領域の境界ボックスを基準にしています。 0 は境界ボックスの 0% を示し、1 は境界ボックスの 100% を示します。 したがって、(0.5,0.5) は境界ボックスの中央にある点を表し、(1,1) は境界ボックスの右下にある点を表します。

次の XAML の例では、4 色の対角線 LinearGradientBrush を作成します。

<LinearGradientBrush StartPoint="0,0"
                     EndPoint="1,1">
    <GradientStop Color="Yellow"
                  Offset="0.0" />
    <GradientStop Color="Red"
                  Offset="0.25" />
    <GradientStop Color="Blue"
                  Offset="0.75" />             
    <GradientStop Color="LimeGreen"
                  Offset="1.0" />
</LinearGradientBrush>

グラデーション境界の各点の色は、境界となる 2 つのグラデーション境界によって指定される色の組み合わせとして補間されます。 次の図は、前の例のグラデーション境界を示しています。

斜めの LinearGradientBrush で塗られたフレーム

この図では、円がグラデーション境界の位置を示し、破線がグラデーション軸を示しています。 最初のグラデーション境界は、オフセット 0.0 で黄色を指定しています。 2 番目のグラデーション境界は、オフセット 0.25 で赤色を指定しています。 これら 2 つのグラデーション境界の間の点は、グラデーション軸に沿って左から右に移動するにつれて、黄色から赤色に徐々に変化します。 3 番目のグラデーション境界は、オフセット 0.75 で青色を指定しています。 2 番目と 3 番目のグラデーション境界の間の点は、赤から青に徐々に変化します。 4 番目のグラデーション境界は、オフセットが1.0 の緑色を指定しています。 3 番目と 4 番目のグラデーション境界の間の点は、青から緑に徐々に変化します。