[C#/WPF] DrawingBrush 엘리먼트 : 드로잉 브러시 애니메이션 만들기

■ DrawingBrush 엘리먼트를 사용해 드로잉 브러시 애니메이션을 만드는 방법을 보여준다.

▶ 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">
    <Canvas Name="canvas"
        Width="400"
        Height="400">
        <Canvas.Background>
            <DrawingBrush
                ViewportUnits="Absolute"
                Viewport="0 0 100 100"
                ViewboxUnits="Absolute"
                Viewbox="0 0 1 1"
                TileMode="FlipXY">
                <DrawingBrush.Drawing>
                    <GeometryDrawing>
                        <GeometryDrawing.Pen>
                            <Pen
                                Thickness="0.1"
                                Brush="Orange" />
                        </GeometryDrawing.Pen>
                        <GeometryDrawing.Geometry>
                            <EllipseGeometry
                                Center="0.5 0.5"
                                RadiusX="0.45"
                                RadiusY="0.2" />
                        </GeometryDrawing.Geometry>
                    </GeometryDrawing>
                </DrawingBrush.Drawing>
            </DrawingBrush>
        </Canvas.Background>
    </Canvas>
    <Window.Triggers>
        <EventTrigger RoutedEvent="Page.Loaded">
            <BeginStoryboard>
                <Storyboard>
                    <DoubleAnimation
                        Storyboard.TargetName="canvas"
                        Storyboard.TargetProperty="(DockPanel.Background).(DrawingBrush.Drawing).(GeometryDrawing.Geometry).(EllipseGeometry.RadiusX)"
                        Duration="00:00:10"
                        From="0.01"
                        To="0.5"
                        AutoReverse="True"
                        RepeatBehavior="Forever" />
                </Storyboard>
            </BeginStoryboard>
        </EventTrigger>
    </Window.Triggers>
</Window>

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

<Canvas Name="canvas"

Width="400"

Height="400">

<Canvas.Background>

<DrawingBrush

ViewportUnits="Absolute"

Viewport="0 0 100 100"

ViewboxUnits="Absolute"

Viewbox="0 0 1 1"

TileMode="FlipXY">

<DrawingBrush.Drawing>

<GeometryDrawing.Pen>

<Pen

Thickness="0.1"

Brush="Orange" />

</GeometryDrawing.Pen>

<GeometryDrawing.Geometry>

<EllipseGeometry

Center="0.5 0.5"

RadiusX="0.45"

RadiusY="0.2" />

</GeometryDrawing.Geometry>

</GeometryDrawing>

</DrawingBrush.Drawing>

</DrawingBrush>

</Canvas.Background>

</Canvas>

<Window.Triggers>

<DoubleAnimation

Storyboard.TargetName="canvas"

Storyboard.TargetProperty="(DockPanel.Background).(DrawingBrush.Drawing).(GeometryDrawing.Geometry).(EllipseGeometry.RadiusX)"

Duration="00:00:10"

From="0.01"

To="0.5"

AutoReverse="True"

RepeatBehavior="Forever" />

</Storyboard>

</BeginStoryboard>

</EventTrigger>

</Window.Triggers>

</Window>

TestProject.zip