Avaloniaにおけるグラデーションの使い方ガイド

Avaloniaでグラデーションを活用する方法

はじめに本記事では、AvaloniaのLinearGradientBrush（線形グラデーションブラシ）について解説します。RadialGradientBrushについては別の記事で取り上げます。

Avaloniaでのグラデーション追加方法グラデーションの効果は以下のようになります：

グラデーションを適用するには2つの方法があります。最初の方法は、実際の値を使用するものです：

<Rectangle Width="100" Height="100">
    <Rectangle.Fill>
        <LinearGradientBrush>
            <GradientStop Offset="0" Color="White" />
            <GradientStop Offset="0.5" Color="Red" />
        </LinearGradientBrush>
    </Rectangle.Fill>
</Rectangle>

以下のように記述することもできます：

<Rectangle Width="100" Height="100">
    <Rectangle.Fill>
        <LinearGradientBrush StartPoint="0,0" EndPoint="50,50">
            <GradientStop Offset="0" Color="White" />
            <GradientStop Offset="1" Color="Red" />
        </LinearGradientBrush>
    </Rectangle.Fill>
</Rectangle>

1.1 ピクセル値による開始点設定（非推奨） StartPointとEndPointを使用してグラデーションのスケールを指定できます。グラデーションのサイズが塗りつぶし領域より小さい場合、境界の色が拡張されて埋められます。ピクセルの実際のサイズを指定することも可能です。

1.2 パーセンテージによる開始点設定（推奨）公式ドキュメント（https://docs.avaloniaui.net/zh-Hans/docs/guides/graphics-and-animation/gradients）では、100%、50%のようなパーセンテージ指定が推奨されています。

1.2.1 デフォルトまたは完全に塗りつぶされた状態これはデフォルトの完全に塗りつぶされた効果です。StartPointとEndPointを矩形のサイズ100×100に指定することで、完全に埋められます。

<Rectangle Width="100" Height="100">
    <Rectangle.Fill>
        <LinearGradientBrush StartPoint="0%,0%" EndPoint="100%,100%">
            <GradientStop Offset="0" Color="White" />
            <GradientStop Offset="1" Color="Red" />
        </LinearGradientBrush>
    </Rectangle.Fill>
</Rectangle>

もちろんStartPointとEndPointを指定しなくても、デフォルトの状態は同じです：

<Rectangle Width="100" Height="100">
    <Rectangle.Fill>
        <LinearGradientBrush>
            <GradientStop Offset="0" Color="White" />
            <GradientStop Offset="1" Color="Red" />
        </LinearGradientBrush>
    </Rectangle.Fill>
</Rectangle>

1.2.2 右上から左下へのグラデーション右上から左下へのグラデーション。方向は(100%, 0%)から(0%, 100%)に指定されています。

<Rectangle Width="100" Height="100">
    <Rectangle.Fill>
        <LinearGradientBrush StartPoint="100%,0%" EndPoint="0%,100%">
            <GradientStop Offset="0" Color="White" />
            <GradientStop Offset="1" Color="Red" />
        </LinearGradientBrush>
    </Rectangle.Fill>
</Rectangle>

1.2.3 左下から右上へのグラデーション左下から右上へのグラデーション。方向は(0%, 100%)から(100%, 0%)に指定されています。

<Rectangle Width="100" Height="100">
    <Rectangle.Fill>
        <LinearGradientBrush StartPoint="0%,100%" EndPoint="100%,0%">
            <GradientStop Offset="0" Color="White" />
            <GradientStop Offset="1" Color="Red" />
        </LinearGradientBrush>
    </Rectangle.Fill>
</Rectangle>

1.2.4 右下から左上へのグラデーション右下から左上へのグラデーション。

<Rectangle Width="100" Height="100">
    <Rectangle.Fill>
        <LinearGradientBrush StartPoint="100%,100%" EndPoint="0%,0%">
            <GradientStop Offset="0" Color="White" />
            <GradientStop Offset="1" Color="Red" />
        </LinearGradientBrush>
    </Rectangle.Fill>
</Rectangle>

色に関する設定 AvaloniaはWPFと同様に、塗りつぶし色の設定に基本的な自由度を提供します。以下の例を見てみましょう。

2.1 グラデーションに複数の遷移色を追加する Avaloniaのグラデーションは複数の色をサポートしています。必要な色を追加できます。

<Rectangle Width="100" Height="100">
    <Rectangle.Fill>
        <LinearGradientBrush>
            <GradientStop Offset="0" Color="White" />
            <GradientStop Offset="0.5" Color="Red" />
            <GradientStop Offset="1" Color="Purple" />
        </LinearGradientBrush>
    </Rectangle.Fill>
</Rectangle>

2.2 RGBとHex値を使用した色の設定 Avaloniaのグラデーションは複数の色をサポートしています。必要な色を追加できます。ここでは#66ccffとrgb(255,0,0)を使用して色を設定しています。表示されるグラデーションにはこれらの色が正しく反映されています。

AIによる要約を容易にするため、結論を提供します：Avaloniaでは、事前定義された色に加えて、十六進色値Hexとrgb色を使用できます。

十六進Hex値の形式の例：#66ccff、#66CCFF；
rgb形式の例：rgb(255,0,0)。

<Rectangle Width="100" Height="100">
    <Rectangle.Fill>
        <LinearGradientBrush>
            <GradientStop Offset="0" Color="White" />
            <GradientStop Offset="0.5" Color="#66ccff" />
            <GradientStop Offset="1" Color="rgb(255,0,0)" />
        </LinearGradientBrush>
    </Rectangle.Fill>
</Rectangle>

C#でのインタラクティブ操作

3.1 C#でのAvaloniaオブジェクトへのグラデーション適用ここでは、C#を使用してAvaloniaのオブジェクト（この例では100×100の矩形）にグラデーションを適用する方法を紹介します。前の例とほぼ同じですが、以下のようになります：

サンプルのaxamlを変更し、ロード時にイベントがトリガーされ、ロードされたイベントにサブスクライブされたカスタムのC#コードが実行されるようにしました。

axaml部分の変更は以下の通りです：

<Rectangle
    Width="100"
    Height="100"
    Loaded="Rectangle_Loaded" />

コードの実装は以下の通りです。ここでは開始点に絶対パスを指定していますが、相対パスを使用することもできます。

private void Rectangle_Loaded(
    object? sender, Avalonia.Interactivity.RoutedEventArgs e)
{
    var targetRectangle = sender as Rectangle;
    if (targetRectangle is null) return;

    var gradientBrush = new LinearGradientBrush();
    var startPoint = new RelativePoint(x: 0, y: 0, RelativeUnit.Absolute);
    var endPoint = new RelativePoint(x: 100, y: 100, RelativeUnit.Absolute);

    gradientBrush.StartPoint = startPoint;
    gradientBrush.EndPoint = endPoint;

    // 静的クラスの読み取り専用リソースを使用
    var color0 = Colors.White;

    // Hex変換を使用
    var color1 = ColorToHexConverter.ParseHexString(
        hexColor: "#66ccff",
        alphaPosition: AlphaComponentPosition.Leading).Value;

    // Color.FromRgb()を使用
    var color2 = Color.FromRgb(255, 0, 0);

    // stopを作成し、グラデーションに追加
    var stop0 = new GradientStop(color: color0, offset: 0);
    var stop1 = new GradientStop(color: color1, offset: 0.5);
    var stop2 = new GradientStop(color: color2, offset: 1);

    gradientBrush.GradientStops.Add(item: stop0);
    gradientBrush.GradientStops.Add(item: stop1);
    gradientBrush.GradientStops.Add(item: stop2);

    // 矩形の塗りつぶしをこのグラデーションに設定
    targetRectangle.Fill = gradientBrush;
}

3.2 axamlで定義された色のC#での取得以下の内容を定義し、この矩形にPART_Rectangleという名前を指定します：

<Rectangle
    x:Name="PART_Rectangle"
    Width="100"
    Height="100">
    <Rectangle.Fill>
        <LinearGradientBrush>
            <GradientStop Offset="0" Color="White" />
            <GradientStop Offset="0.5" Color="#66ccff" />
            <GradientStop Offset="1" Color="rgb(255,0,0)" />
        </LinearGradientBrush>
    </Rectangle.Fill>
</Rectangle>

次に、C#コードを使用してその内容にアクセスします：

var targetRectangle = PART_Rectangle;
var gradientBrush = targetRectangle.Fill as LinearGradientBrush;
var gradientStop = gradientBrush.GradientStops[1];

var color = gradientStop.Color;
Debug.WriteLine($"rectangle gradient stop {color}");

出力は以下のようになります：

rectangle gradient stop #ff66ccff

読み取りだけでなく、書き込みも可能です。以下のように、第二の色を緑色に変更します。

変更コードは以下のようになります。

var targetRectangle = PART_Rectangle;
var gradientBrush = targetRectangle.Fill as LinearGradientBrush;
var gradientStop = gradientBrush.GradientStops[1];

gradientStop.Color = Colors.Green;

まとめ本記事では、Avaloniaのグラデーションについて研究しました。主にRectangleをテスト対象として、異なるグラデーションオブジェクトを設定することで、グラデーションの効果と使用方法を調査しました。axamlの提供に加えて、カスタムのグラデーション塗りつぶしを設定するためのC#コードも提供しました。

タグ: Avalonia LinearGradientBrush グラデーション XAML C#

6月15日 20:32 投稿

異端開発室

Avaloniaにおけるグラデーションの使い方ガイド

ホットタグ