[C#/WPF] RadialGradientBrush 엘리먼트 : 애니메이션 설정하기

■ RadialGradientBrush 엘리먼트의 애니메이션을 설정하는 방법을 보여준다.

TestProject.zip

0.01MB

▶ 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"
    xmlns:options="http://schemas.microsoft.com/winfx/2006/xaml/presentation/options"
    Width="800"
    Height="600"
    Title="TestProject"
    FontFamily="나눔고딕코딩"
    FontSize="16">
    <Window.Resources>
        <DrawingBrush x:Key="CheckeredBackgroundDrawingBrushKey"
            ViewportUnits="Absolute"
            Viewport="0 0 10 10"
            TileMode="Tile"
            options:Freeze="True">
            <DrawingBrush.Drawing>
                <DrawingGroup>
                    <GeometryDrawing Brush="White">
                        <GeometryDrawing.Geometry>
                            <RectangleGeometry Rect="0 0 1 1" />
                        </GeometryDrawing.Geometry>
                    </GeometryDrawing>
                    <GeometryDrawing
                        Brush="#e2e2e2"
                        Geometry="M 0 0 L 0 0.5 0.5 0.5 0.5 1 1 1 1 0.5 0.5 0.5 0.5 0" />
                </DrawingGroup>
            </DrawingBrush.Drawing>
        </DrawingBrush>
        <Style TargetType="{x:Type TextBlock}">
            <Setter Property="Background" Value="White" />
            <Setter Property="Padding"    Value="10"    />
            <Setter Property="BitmapEffect">
                <Setter.Value>
                    <OuterGlowBitmapEffect GlowColor="White" />
                </Setter.Value>
            </Setter>
        </Style>
        <Style TargetType="{x:Type Rectangle}">
            <Setter Property="BitmapEffect">
                <Setter.Value>
                    <DropShadowBitmapEffect />
                </Setter.Value>
            </Setter>
        </Style>
    </Window.Resources>
    <Grid
        HorizontalAlignment="Center"
        VerticalAlignment="Center"
        Background="{StaticResource CheckeredBackgroundDrawingBrushKey}">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <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>
        <TextBlock Grid.Row="0" Grid.Column="0">Animated GradientStop Offset</TextBlock>
        <Rectangle Grid.Row="1" Grid.Column="0"
            Margin="10"
            Width="200"
            Height="100"
            StrokeThickness="1"
            Stroke="Black">
            <Rectangle.Fill>
                <RadialGradientBrush>
                    <GradientStop                         Offset="0.0" Color="MediumBlue" />
                    <GradientStop x:Name="gradientStop10" Offset="0.5" Color="Purple"     />
                    <GradientStop                         Offset="1.0" Color="Red"        />
                </RadialGradientBrush>
            </Rectangle.Fill>
            <Rectangle.Triggers>
                <EventTrigger RoutedEvent="Rectangle.MouseLeftButtonDown">
                    <BeginStoryboard>
                        <Storyboard>
                            <DoubleAnimation
                                Storyboard.TargetName="gradientStop10"
                                Storyboard.TargetProperty="Offset"
                                Duration="00:00:03"
                                From="0.0"
                                To="1.0"
                                FillBehavior="Stop" />
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger>
            </Rectangle.Triggers>
        </Rectangle>
        <TextBlock Grid.Row="2" Grid.Column="0">Animated GradientStop Color</TextBlock>
        <Rectangle Grid.Row="3" Grid.Column="0"
            Margin="10"
            Width="200"
            Height="100"
            StrokeThickness="1"
            Stroke="Black">
            <Rectangle.Fill>
                <RadialGradientBrush>
                    <GradientStop                         Offset="0.0" Color="MediumBlue" />
                    <GradientStop x:Name="gradientStop30" Offset="0.5" Color="Purple"     />
                    <GradientStop                         Offset="1.0" Color="Red"        />
                </RadialGradientBrush>
            </Rectangle.Fill>
            <Rectangle.Triggers>
                <EventTrigger RoutedEvent="Rectangle.MouseLeftButtonDown">
                    <BeginStoryboard>
                        <Storyboard>
                            <ColorAnimation
                                Storyboard.TargetName="gradientStop30"
                                Storyboard.TargetProperty="Color"
                                Duration="00:00:03"
                                From="Purple"
                                To="Yellow"
                                FillBehavior="Stop" />
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger>
            </Rectangle.Triggers>
        </Rectangle>
        <TextBlock Grid.Row="4" Grid.Column="0">Animated GradientStop Opacity</TextBlock>
        <Rectangle Grid.Row="5" Grid.Column="0"
            Margin="10"
            Width="200"
            Height="100"
            StrokeThickness="1"
            Stroke="Black">
            <Rectangle.Fill>
                <RadialGradientBrush>
                    <GradientStop                         Offset="0.0" Color="MediumBlue" />
                    <GradientStop x:Name="gradientStop50" Offset="0.5" Color="Purple"     />
                    <GradientStop                         Offset="1.0" Color="Red"        />
                </RadialGradientBrush>
            </Rectangle.Fill>
            <Rectangle.Triggers>
                <EventTrigger RoutedEvent="Rectangle.MouseLeftButtonDown">
                    <BeginStoryboard>
                        <Storyboard>
                            <ColorAnimation
                                Storyboard.TargetName="gradientStop50"
                                Storyboard.TargetProperty="Color"
                                Duration="00:00:03"
                                FillBehavior="Stop">
                                <ColorAnimation.By>
                                    <Color ScA="-1" ScR="0" ScB="0" ScG="0" />
                                </ColorAnimation.By>
                            </ColorAnimation>
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger>
            </Rectangle.Triggers>
        </Rectangle>
        <TextBlock Grid.Row="0" Grid.Column="1">Animated GradientOrigin</TextBlock>
        <Ellipse Grid.Row="1" Grid.Column="1"
            Margin="10"
            Width="200"
            Height="100"
            StrokeThickness="1"
            Stroke="Black">
            <Ellipse.Fill>
                <RadialGradientBrush x:Name="radialGradientBrush1"
                    GradientOrigin="0.75 0.25">
                    <GradientStop Offset="0.0" Color="#cbc8f1"    />
                    <GradientStop Offset="0.5" Color="MediumBlue" />
                    <GradientStop Offset="1.0" Color="DarkBlue"   />
                </RadialGradientBrush>
            </Ellipse.Fill>
            <Ellipse.Triggers>
                <EventTrigger RoutedEvent="Ellipse.MouseLeftButtonDown">
                    <BeginStoryboard>
                        <Storyboard>
                            <PointAnimation
                                Storyboard.TargetName="radialGradientBrush1"
                                Storyboard.TargetProperty="GradientOrigin"
                                Duration="00:00:03"
                                From="1 0"
                                To="0 1"
                                FillBehavior="Stop" />
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger>
            </Ellipse.Triggers>
        </Ellipse>
        <TextBlock Grid.Row="2" Grid.Column="1">Animated Center</TextBlock>
        <Ellipse Grid.Row="3" Grid.Column="1"
            Margin="10"
            Width="200"
            Height="100"
            StrokeThickness="1"
            Stroke="Black">
            <Ellipse.Fill>
                <RadialGradientBrush x:Name="radialGradientBrush2"
                    GradientOrigin="0.75 0.25">
                    <GradientStop Offset="0.0" Color="#cbc8f1"    />
                    <GradientStop Offset="0.5" Color="MediumBlue" />
                    <GradientStop Offset="1.0" Color="DarkBlue"   />
                </RadialGradientBrush>
            </Ellipse.Fill>
            <Ellipse.Triggers>
                <EventTrigger RoutedEvent="Ellipse.MouseLeftButtonDown">
                    <BeginStoryboard>
                        <Storyboard>
                            <PointAnimation
                                Storyboard.TargetName="radialGradientBrush2"
                                Storyboard.TargetProperty="Center"
                                Duration="00:00:03"
                                From="0 0"
                                To="1 1"
                                FillBehavior="Stop" />
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger>
            </Ellipse.Triggers>
        </Ellipse>
        <TextBlock Grid.Row="4" Grid.Column="1">Animated Radius</TextBlock>
        <Ellipse Grid.Row="5" Grid.Column="1"
            Margin="10"
            Width="200"
            Height="100"
            StrokeThickness="1"
            Stroke="Black">
            <Ellipse.Fill>
                <RadialGradientBrush x:Name="radialGradientBrush3"
                    GradientOrigin="0.75 0.25">
                    <GradientStop Offset="0.0" Color="#cbc8f1"    />
                    <GradientStop Offset="0.5" Color="MediumBlue" />
                    <GradientStop Offset="1.0" Color="DarkBlue"   />
                </RadialGradientBrush>
            </Ellipse.Fill>
            <Ellipse.Triggers>
                <EventTrigger RoutedEvent="Ellipse.MouseLeftButtonDown">
                    <BeginStoryboard>
                        <Storyboard>
                            <DoubleAnimation
                                Storyboard.TargetName="radialGradientBrush3"
                                Storyboard.TargetProperty="RadiusX"
                                Duration="00:00:03"
                                From="0"
                                To="1"
                                FillBehavior="Stop" />
                            <DoubleAnimation
                                Storyboard.TargetName="radialGradientBrush3"
                                Storyboard.TargetProperty="RadiusY"
                                Duration="00:00:03"
                                From="0"
                                To="1"
                                FillBehavior="Stop" />
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger>
            </Ellipse.Triggers>
        </Ellipse>
    </Grid>
</Window>