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

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

TestProject.zip

0.01MB

▶ MainWindow.xaml

<Window Name="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.Triggers>
        <EventTrigger RoutedEvent="Page.Loaded">
            <BeginStoryboard>
                <Storyboard>
                    <ColorAnimation
                        Storyboard.TargetName="grid"
                        Storyboard.TargetProperty="(Grid.Background).(DrawingBrush.Drawing).(DrawingGroup.Children)[0].(GeometryDrawing.Brush).(SolidColorBrush.Color)"
                        Duration="00:00:50"
                        From="LightGray"
                        To="DarkGray"
                        RepeatBehavior="Forever"
                        AutoReverse="True" />
                    <DoubleAnimation
                        Storyboard.TargetName="grid"
                        Storyboard.TargetProperty="(Grid.Background).(DrawingBrush.Transform).(RotateTransform.Angle)"
                        Duration="00:05:00"
                        From="0"
                        To="360"
                        RepeatBehavior="Forever"
                        AutoReverse="True" />
                    <DoubleAnimation
                        Storyboard.TargetName="grid"
                        Storyboard.TargetProperty="(Grid.Background).(DrawingBrush.Drawing).(DrawingGroup.Children)[1].(GeometryDrawing.Geometry).(EllipseGeometry.RadiusX)"
                        Duration="00:00:05"
                        From="0.1"
                        To="0.25"
                        RepeatBehavior="Forever"
                        AutoReverse="True" />
                    <PointAnimation
                        Storyboard.TargetName="grid"
                        Storyboard.TargetProperty="(Grid.Background).(DrawingBrush.Drawing).(DrawingGroup.Children)[2].(GeometryDrawing.Geometry).(EllipseGeometry.Center)"
                        Duration="00:00:10"
                        From="-0.25 -0.25"
                        To="1.25 1.25"
                        RepeatBehavior="Forever"
                        AutoReverse="True" />
                </Storyboard>
            </BeginStoryboard>
        </EventTrigger>
    </Window.Triggers>
    <Grid Name="grid">
        <Grid.Background>
            <DrawingBrush
                ViewportUnits="Absolute"
                Viewport="0 0 100 100"
                TileMode="Tile">
                <DrawingBrush.Drawing>
                    <DrawingGroup>
                        <DrawingGroup.Children>
                            <GeometryDrawing>
                                <GeometryDrawing.Geometry>
                                    <RectangleGeometry Rect="0 0 1 1" />
                                </GeometryDrawing.Geometry>
                                <GeometryDrawing.Brush>
                                    <SolidColorBrush Color="LightGray" />
                                </GeometryDrawing.Brush>
                                <GeometryDrawing.Pen>
                                    <Pen
                                        Thickness="0.01"
                                        Brush="DarkGray" />
                                </GeometryDrawing.Pen>
                            </GeometryDrawing>
                            <GeometryDrawing Brush="#99cccccc">
                                <GeometryDrawing.Geometry>
                                    <EllipseGeometry
                                        Center="0.75 0.5"
                                        RadiusX="0.25"
                                        RadiusY="0.25" />
                                </GeometryDrawing.Geometry>
                            </GeometryDrawing>
                            <GeometryDrawing Brush="#66cccccc">
                                <GeometryDrawing.Geometry>
                                    <EllipseGeometry
                                        Center="0.25 0.25"
                                        RadiusX="0.1"
                                        RadiusY="0.1" />
                                </GeometryDrawing.Geometry>
                            </GeometryDrawing>
                        </DrawingGroup.Children>
                    </DrawingGroup>
                </DrawingBrush.Drawing>
                <DrawingBrush.Transform>
                    <RotateTransform
                        CenterX="0.5"
                        CenterY="0.5" />
                </DrawingBrush.Transform>
            </DrawingBrush>
        </Grid.Background>
        <Ellipse
            Width="300"
            Height="300"
            Fill="Gold"
            StrokeThickness="3"
            Stroke="Black" />
    </Grid>
</Window>