[C#/WPF] ImageBrush 엘리먼트 : 배경 애니메이션 만들기

■ ImageBrush 엘리먼트를 사용해 배경 애니메이션을 만드는 방법을 보여준다.

▶ 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="TestProject"
    FontFamily="나눔고딕코딩"
    FontSize="16">
    <Window.Resources>
        <Style x:Key="AnimatedRectangleStyleKey">
            <Setter Property="Rectangle.Fill">
                <Setter.Value>
                    <ImageBrush
                        TileMode="FlipXY"
                        Opacity="0.25"
                        ImageSource="IMAGE\purpleblock.jpg">
                        <ImageBrush.Transform>
                            <RotateTransform Angle="0" />
                        </ImageBrush.Transform>
                    </ImageBrush>
                </Setter.Value>
            </Setter>
            <Style.Triggers>
                <EventTrigger RoutedEvent="Rectangle.Loaded">
                    <EventTrigger.Actions>
                        <BeginStoryboard>
                            <Storyboard SpeedRatio="1.25">
                                <RectAnimation
                                    Storyboard.TargetProperty="(Rectangle.Fill).(ImageBrush.Viewport)"
                                    Duration="00:00:20"
                                    To="0 0 0.5 0.5"
                                    RepeatBehavior="Forever"
                                    AutoReverse="True" />
                                <DoubleAnimation
                                    Storyboard.TargetProperty="(Rectangle.Fill).(ImageBrush.Transform).(RotateTransform.Angle)"
                                    Duration="00:01:00"
                                    To="360"
                                    RepeatBehavior="Forever"
                                    AccelerationRatio="0.5"
                                    DecelerationRatio="0.5" />
                            </Storyboard>
                        </BeginStoryboard>
                    </EventTrigger.Actions>
                </EventTrigger>
            </Style.Triggers>
        </Style>
    </Window.Resources>
    <Grid>
        <Rectangle
            Style="{StaticResource AnimatedRectangleStyleKey}"
            Margin="10" />
        <TextBlock
            HorizontalAlignment="Center"
            VerticalAlignment="Center"
            FontSize="72"
            FontWeight="Bold"
            Text="Background Rotation" />
    </Grid>
</Window>

<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="TestProject"

FontFamily="나눔고딕코딩"

FontSize="16">

<Window.Resources>

<Setter.Value>

<ImageBrush

TileMode="FlipXY"

Opacity="0.25"

ImageSource="IMAGE\purpleblock.jpg">

<ImageBrush.Transform>

</ImageBrush.Transform>

</ImageBrush>

</Setter.Value>

</Setter>

<Style.Triggers>

<EventTrigger.Actions>

<RectAnimation

Storyboard.TargetProperty="(Rectangle.Fill).(ImageBrush.Viewport)"

Duration="00:00:20"

To="0 0 0.5 0.5"

RepeatBehavior="Forever"

AutoReverse="True" />

<DoubleAnimation

Storyboard.TargetProperty="(Rectangle.Fill).(ImageBrush.Transform).(RotateTransform.Angle)"

Duration="00:01:00"

To="360"

RepeatBehavior="Forever"

AccelerationRatio="0.5"

DecelerationRatio="0.5" />

</Storyboard>

</BeginStoryboard>

</EventTrigger.Actions>

</EventTrigger>

</Style.Triggers>

</Style>

</Window.Resources>

<Grid>

<Rectangle

Style="{StaticResource AnimatedRectangleStyleKey}"

Margin="10" />

<TextBlock

HorizontalAlignment="Center"

VerticalAlignment="Center"

FontSize="72"

FontWeight="Bold"

Text="Background Rotation" />

</Grid>

</Window>

TestProject.zip