Architect's Log

I'm a Cloud Architect. I'm highly motivated to reduce toils with driving DevOps.

長方形をグラデーションで塗りつぶす

App.xaml

<Application x:Class="HelloWorld.App"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             StartupUri="MainWindow.xaml">
</Application>

MainWindow.xaml

<Window
    x:Class="HelloWorld.MainWindow"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    Title="Hello World"
    >
    <Rectangle>
        <Rectangle.Fill>
            <!-- 既定値は斜線、開始位置は左上、終了位置は右下 -->
            <LinearGradientBrush>
                <GradientStop Offset="0" Color="Red" />
                <GradientStop Offset="0.25" Color="Orange" />
                <GradientStop Offset="0.5" Color="White" />
                <GradientStop Offset="0.75" Color="Blue" />
                <GradientStop Offset="1" Color="Black" />
            </LinearGradientBrush>
        </Rectangle.Fill>
    </Rectangle>
</Window>

MainWindow.xaml.cs

using System.Windows;

namespace HelloWorld {
    public partial class MainWindow : Window {
        public MainWindow() {
            InitializeComponent();
        }
    }
}

アプリ実行


参考

Rectangle クラス (System.Windows.Shapes)
四角形を描画します。 ...

Shape.Fill プロパティ (System.Windows.Shapes)
図形の内部を塗りつぶす方法を指定する Brush を取得または設定します。 ...

LinearGradientBrush クラス (System.Windows.Media)
線形グラデーションで領域を塗りつぶします。 ...

GradientStop クラス (System.Windows.Media)
グラデーション内の移行ポイントの位置および色を記述します。 ...

GradientStop.Offset プロパティ (System.Windows.Media)
グラデーション ベクター内のグラデーションの終了位置を取得します。 ...