RadialGradientBrush クラス

定義

/// [Microsoft.UI.Xaml.CustomAttributes.MUXContractProperty(version=0)]
/// [Windows.Foundation.Metadata.MarshalingBehavior(Windows.Foundation.Metadata.MarshalingType.Agile)]
/// [Windows.Foundation.Metadata.Threading(Windows.Foundation.Metadata.ThreadingModel.Both)]
/// [Windows.Foundation.Metadata.Version(1)]
/// [Windows.UI.Xaml.Markup.ContentProperty(Name="GradientStops")]
class RadialGradientBrush : XamlCompositionBrushBase

/// [Windows.Foundation.Metadata.MarshalingBehavior(Windows.Foundation.Metadata.MarshalingType.Agile)]
/// [Windows.Foundation.Metadata.Threading(Windows.Foundation.Metadata.ThreadingModel.Both)]
/// [Windows.UI.Xaml.Markup.ContentProperty(Name="GradientStops")]
/// [Windows.Foundation.Metadata.ContractVersion(Microsoft.UI.Xaml.XamlContract, 65536)]
class RadialGradientBrush : XamlCompositionBrushBase

[Microsoft.UI.Xaml.CustomAttributes.MUXContractProperty(version=0)]
[Windows.Foundation.Metadata.MarshalingBehavior(Windows.Foundation.Metadata.MarshalingType.Agile)]
[Windows.Foundation.Metadata.Threading(Windows.Foundation.Metadata.ThreadingModel.Both)]
[Windows.Foundation.Metadata.Version(1)]
[Windows.UI.Xaml.Markup.ContentProperty(Name="GradientStops")]
public class RadialGradientBrush : XamlCompositionBrushBase

[Windows.Foundation.Metadata.MarshalingBehavior(Windows.Foundation.Metadata.MarshalingType.Agile)]
[Windows.Foundation.Metadata.Threading(Windows.Foundation.Metadata.ThreadingModel.Both)]
[Windows.UI.Xaml.Markup.ContentProperty(Name="GradientStops")]
[Windows.Foundation.Metadata.ContractVersion(typeof(Microsoft.UI.Xaml.XamlContract), 65536)]
public class RadialGradientBrush : XamlCompositionBrushBase

Public Class RadialGradientBrush
Inherits XamlCompositionBrushBase

継承

Object IInspectable DependencyObject Brush XamlCompositionBrushBase RadialGradientBrush

属性

Microsoft.UI.Xaml.CustomAttributes.MUXContractPropertyAttribute MarshalingBehaviorAttribute ThreadingAttribute VersionAttribute ContentPropertyAttribute ContractVersionAttribute

例

WinUI 3 ギャラリー アプリには、ほとんどの WinUI 3 コントロールと機能の対話型の例が含まれています。 Microsoft Store からアプリを取得するか、GitHub でソース コードを取得します。

次の使用例は、6 つのグラデーションの分岐点を含む放射状グラデーションを作成し、それを使用して四角形を描画します。

<Page
  xmlns:media="using:Microsoft.UI.Xaml.Media">

  <Rectangle Width="200" Height="200">
      <Rectangle.Fill>
          <media:RadialGradientBrush>
              <GradientStop Color="Blue" Offset="0.0" />
              <GradientStop Color="Yellow" Offset="0.2" />
              <GradientStop Color="LimeGreen" Offset="0.4" />
              <GradientStop Color="LightBlue" Offset="0.6" />
              <GradientStop Color="Blue" Offset="0.8" />
              <GradientStop Color="LightGray" Offset="1" />
          </media:RadialGradientBrush>
      </Rectangle.Fill>
  </Rectangle>

</Page>

次の使用例は、 Center、 RadiusX、 RadiusY 、および GradientOriginのカスタム値で絶対マッピング モードを使用する放射状グラデーションを作成します。

<Page
  xmlns:media="using:Microsoft.UI.Xaml.Media">

  <Rectangle Width="200" Height="200">
      <Rectangle.Fill>
          <media:RadialGradientBrush
            MappingMode="Absolute"
            Center="50,50"
            RadiusX="100"
            RadiusY="100"
            GradientOrigin="100,50"
            >
              <GradientStop Color="Yellow" Offset="0.0" />
              <GradientStop Color="Blue" Offset="1" />
          </media:RadialGradientBrush>
      </Rectangle.Fill>
  </Rectangle>

</Page>

注釈

グラデーション レイアウト

グラデーションは、 Center、 RadiusX、 RadiusY の各プロパティによって定義された楕円内に描画されます。 グラデーションの色は、楕円の中心から始まり、半径で終了します。

放射状グラデーションの色は、 GradientStops コレクション プロパティに追加されたカラー ストップによって定義されます。 各グラデーションの分岐点は、グラデーションに沿った色とオフセットを指定します。

グラデーションの原点は既定で中央に設定され、 GradientOrigin プロパティを使用してオフセットできます。

MappingMode は、 中心座標、 RadiusX 座標、 RadiusY 座標、 GradientOrigin 座標を相対座標と絶対座標のどちらで表すかを定義します。

MappingMode をRelativeToBoundingBoxに設定すると、3 つのプロパティの X 値と Y 値は要素の境界を基準として扱われます。(0,0)は左上を表し、(1,1)は Center、RadiusX、RadiusY プロパティの要素境界の右下を表し、(0,0)は GradientOrigin プロパティの中心を表します。

MappingMode を Absolute に設定すると、3 つのプロパティの X と Y の値は、要素の境界内の絶対座標として扱われます。

Windows 10 バージョンのサポート

グラデーション レンダリングは、Windows 10 バージョン 1903 (v10.0.18362.0) 以降でサポートされています。 以前の OS バージョンでは、ブラシは FallbackColor プロパティで指定された純色をレンダリングします。

XAML リソースとしてのブラシ

XAML で宣言できる 各ブラシ の種類 (SolidColorBrush、LinearGradientBrush、 ImageBrush) は、アプリ全体でそのブラシをリソースとして再利用できるように、リソースとして定義することを目的としています。 Brush 型に表示される XAML 構文は、 ブラシ をリソースとして定義する場合に適しています。 ブラシをリソースとして宣言する場合は、後で他の UI 定義からそのリソースを参照するために使用する x:Key 属性 も必要です。 XAML リソースと x:Key 属性の使用方法の詳細については、「 ResourceDictionary および XAML リソースの参照」を参照してください。

ブラシをリソースとして宣言する利点は、UI を構築するために必要なランタイム オブジェクトの数を減らすことです。ブラシは、オブジェクト グラフの複数の部分の値を提供する共通リソースとして共有されるようになりました。

Windows ランタイム XAML コントロールの既存のコントロール テンプレート定義を見ると、テンプレートでブラシ リソースが広範囲に使用されていることがわかります (ただし、これらは通常、LinearGradientBrush ではなく SolidColorBrush です)。 これらのリソースの多くはシステム リソースであり、 {StaticResource} マークアップ拡張 ではなく、リソース参照に {ThemeResource} マークアップ拡張機能を使用します。 独自のコントロール テンプレート XAML でシステム リソース ブラシを使用する方法の詳細については、「 XAML テーマ リソース」を参照してください。

こちらもご覧ください

• ブラシ
• SolidColorBrush
• LinearGradientBrush
• GradientBrush
• GradientStop
• XAML ブラシ
• ResourceDictionary と XAML リソースの参照