[C#/WINUI2.5] RadialGradientBrush 엘리먼트 사용하기

■ RadialGradientBrush 엘리먼트를 사용하는 방법을 보여준다.

▶ MainPage.xaml


<Page x:Class="TestProject.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:media="using:Microsoft.UI.Xaml.Media"
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"
    FontFamily="나눔고딕코딩"
    FontSize="16">
    <Grid>
        <Grid
            HorizontalAlignment="Center"
            VerticalAlignment="Center">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto" />
                <ColumnDefinition Width="50"   />
                <ColumnDefinition Width="Auto" />
            </Grid.ColumnDefinitions>
            <StackPanel Grid.Column="0"
                HorizontalAlignment="Center"
                VerticalAlignment="Center"
                Orientation="Horizontal">
                <Rectangle Name="rectangle"
                    Width="200"
                    Height="200">
                    <Rectangle.Fill>
                        <media:RadialGradientBrush x:Name="radialGradientBrush"
                            MappingMode="RelativeToBoundingBox"
                            Center="0.25 0.25"
                            RadiusX=".5"
                            RadiusY=".5"
                            GradientOrigin="0.5 0.25"
                            SpreadMethod="Pad">
                            <GradientStop Offset="0.0" Color="Yellow" />
                            <GradientStop Offset="1"   Color="Blue"   />
                        </media:RadialGradientBrush>
                    </Rectangle.Fill>
                </Rectangle>
            </StackPanel>
            <Grid Grid.Column="2">
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto" />
                    <RowDefinition Height="Auto" />
                    <RowDefinition Height="Auto" />
                    <RowDefinition Height="Auto" />
                    <RowDefinition Height="Auto" />
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto" />
                    <ColumnDefinition Width="Auto" />
                </Grid.ColumnDefinitions>
                <ComboBox Name="mappingModeComboBox" Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2"
                    Header="MappingMode"
                    SelectedValue="RelativeToBoundingBox">
                    <x:String>RelativeToBoundingBox</x:String>
                    <x:String>Absolute</x:String>
                </ComboBox>
                <Slider Name="centerXSlider" Grid.Row="1" Grid.Column="0"
                    Margin="0 10 0 0"
                    Header="Center.X"
                    SmallChange="0.05"
                    ValueChanged="slider_ValueChanged" />
                <Slider Name="centerYSlider" Grid.Row="1" Grid.Column="1"
                    Margin="10 10 0 0"
                    Header="Center.Y"
                    SmallChange="0.05"
                    ValueChanged="slider_ValueChanged" />
                <Slider Name="radiusXSlider" Grid.Row="2" Grid.Column="0"
                    Margin="0 10 0 0"
                    Header="RadiusX"
                    SmallChange="0.05"
                    ValueChanged="slider_ValueChanged" />
                <Slider Name="radiusYSlider" Grid.Row="2" Grid.Column="1"
                    Margin="10 10 0 0"
                    Header="RadiusY"
                    SmallChange="0.05"
                    ValueChanged="slider_ValueChanged" />
                <Slider Name="gradientOriginXSlider" Grid.Row="3" Grid.Column="0"
                    Margin="0 10 0 0"
                    Header="GradientOrigin.X"
                    SmallChange="0.05"
                    ValueChanged="slider_ValueChanged" />
                <Slider Name="gradientOriginYSlider" Grid.Row="3" Grid.Column="1"
                    Margin="10 10 0 0"
                    Header="GradientOrigin.Y"
                    SmallChange="0.05"
                    ValueChanged="slider_ValueChanged" />
                <ComboBox Name="spreadMethodComboBox" Grid.Row="4" Grid.Column="0" Grid.ColumnSpan="2"
                    Margin="0 10 0 0"
                    Header="SpreadMethod"
                    SelectedValue="Pad">
                    <x:String>Pad</x:String>
                    <x:String>Reflect</x:String>
                    <x:String>Repeat</x:String>
                </ComboBox>
            </Grid>
        </Grid>
    </Grid>
</Page>

<Page x:Class="TestProject.MainPage"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

xmlns:media="using:Microsoft.UI.Xaml.Media"

Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"

FontFamily="나눔고딕코딩"

FontSize="16">

<Grid>

<Grid

HorizontalAlignment="Center"

VerticalAlignment="Center">

<Grid.ColumnDefinitions>

</Grid.ColumnDefinitions>

<StackPanel Grid.Column="0"

HorizontalAlignment="Center"

VerticalAlignment="Center"

Orientation="Horizontal">

<Rectangle Name="rectangle"

Width="200"

Height="200">

<Rectangle.Fill>

<media:RadialGradientBrush x:Name="radialGradientBrush"

MappingMode="RelativeToBoundingBox"

Center="0.25 0.25"

RadiusX=".5"

RadiusY=".5"

GradientOrigin="0.5 0.25"

SpreadMethod="Pad">

</media:RadialGradientBrush>

</Rectangle.Fill>

</Rectangle>

</StackPanel>

<Grid.RowDefinitions>

</Grid.RowDefinitions>

<Grid.ColumnDefinitions>

</Grid.ColumnDefinitions>

<ComboBox Name="mappingModeComboBox" Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2"

Header="MappingMode"

SelectedValue="RelativeToBoundingBox">

<x:String>RelativeToBoundingBox</x:String>

<x:String>Absolute</x:String>

</ComboBox>

<Slider Name="centerXSlider" Grid.Row="1" Grid.Column="0"

Margin="0 10 0 0"

Header="Center.X"

SmallChange="0.05"