[C#/WPF] RadialGradientBrush 엘리먼트 사용하기

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

TestProject.zip

다운로드

▶ MainWindow.xaml

<Window x:Class="TestProject.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Width="800"
    Height="600"
    Title="RadialGradientBrush 엘리먼트 사용하기"
    FontFamily="나눔고딕코딩"
    FontSize="16">
    <Grid
        HorizontalAlignment="Center"
        VerticalAlignment="Center">
        <Grid.ColumnDefinitions>
            <ColumnDefinition  />
            <ColumnDefinition  />
            <ColumnDefinition  />
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
        </Grid.RowDefinitions>
        <TextBlock Grid.Row="0" Grid.Column="0"
            Margin="10">
            <Bold>GradientOrigin</Bold> : 0.5, 0.5<LineBreak />
            <Bold>Center</Bold> : 0.5, 0.5<LineBreak />
            <Bold>RadiusX</Bold> : 0.5<LineBreak />
            <Bold>RadiusY</Bold> : 0.5
        </TextBlock>
        <Canvas Grid.Row="1" Grid.Column="0"
            Width="150"
            Height="150">
            <Rectangle Width="150" Height="150">
                <Rectangle.Fill>
                    <RadialGradientBrush
                        GradientOrigin="0.5 0.5"
                        Center="0.5 0.5"
                        RadiusX="0.5"
                        RadiusY="0.5">
                        <GradientStop Color="White"   Offset="0.0" />
                        <GradientStop Color="#545454" Offset="1.0" />
                    </RadialGradientBrush>
                </Rectangle.Fill>
            </Rectangle>
            <Path Fill="Red">
                <Path.Data>
                    <EllipseGeometry
                        Center="75 75"
                        RadiusX="2"
                        RadiusY="2" />
                </Path.Data>
            </Path>
            <Path
                Stroke="Red"
                StrokeThickness="2">
                <Path.Data>
                    <EllipseGeometry
                        Center="75 75"
                        RadiusX="74"
                        RadiusY="74" />
                </Path.Data>
            </Path>
        </Canvas>
        <TextBlock Grid.Row="0" Grid.Column="1"
            Margin="10">
            <Bold>GradientOrigin</Bold> : 0.75, 0.25<LineBreak />
            <Bold>Center</Bold> : 0.5, 0.5<LineBreak />
            <Bold>RadiusX</Bold> : 0.5<LineBreak />
            <Bold>RadiusY</Bold> : 0.5
        </TextBlock>
        <Canvas Grid.Row="1" Grid.Column="1"
            Width="150"
            Height="150">
            <Rectangle
                Width="150"
                Height="150">
                <Rectangle.Fill>
                    <RadialGradientBrush
                        GradientOrigin="0.75 0.25"
                        Center="0.5 0.5"
                        RadiusX="0.5"
                        RadiusY="0.5">
                        <GradientStop Color="White"   Offset="0" />
                        <GradientStop Color="#545454" Offset="1" />
                    </RadialGradientBrush>
                </Rectangle.Fill>
            </Rectangle>
            <Path Fill="Red">
                <Path.Data>
                    <EllipseGeometry
                        Center="112.5 37.5"
                        RadiusX="2"
                        RadiusY="2" />
                </Path.Data>
            </Path>
            <Path
                Stroke="Red"
                StrokeThickness="2">
                <Path.Data>
                    <EllipseGeometry
                        Center="75 75"
                        RadiusX="74"
                        RadiusY="74" />
                </Path.Data>
            </Path>
        </Canvas>
        <TextBlock Grid.Row="0" Grid.Column="2"
            Margin="10">
            <Bold>GradientOrigin</Bold> : 0.5, 0.5<LineBreak />
            <Bold>Center</Bold> : 0.1, 0.1<LineBreak />
            <Bold>RadiusX</Bold> : 0.75<LineBreak />
            <Bold>RadiusY</Bold> : 0.75
        </TextBlock>
        <Canvas Grid.Row="1" Grid.Column="2"
            Width="150"
            Height="150"
            ClipToBounds="True">
            <Rectangle Width="150" Height="150">
                <Rectangle.Fill>
                    <RadialGradientBrush
                        GradientOrigin="0.5 0.5"
                        Center="0.1 0.1"
                        RadiusX="0.75"
                        RadiusY="0.75">
                        <GradientStop Color="White"   Offset="0" />
                        <GradientStop Color="#545454" Offset="1" />
                    </RadialGradientBrush>
                </Rectangle.Fill>
            </Rectangle>
            <Path Fill="Red">
                <Path.Data>
                    <EllipseGeometry
                        Center="75 75"
                        RadiusX="2"
                        RadiusY="2" />
                </Path.Data>
            </Path>
            <Path
                Stroke="Red"
                StrokeThickness="2">
                <Path.Data>
                    <EllipseGeometry
                        Center="15 15"
                        RadiusX="111.5"
                        RadiusY="111.5" />
                </Path.Data>
            </Path>
        </Canvas>
    </Grid>
</Window>