[C#/WPF] DoubleAnimation 엘리먼트 : From/By/To 속성 사용하기

■ DoubleAnimation 엘리먼트의 From/By/To 속성을 사용하는 방법을 보여준다.

▶ 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="GridDrawingBrushKey"
            ViewportUnits="Absolute"
            Viewport="0 0 10 10"
            TileMode="Tile"
            Opacity="0.5"
            AlignmentX="Left"
            AlignmentY="Top"
            options:Freeze="True">
            <DrawingBrush.Drawing>
                <DrawingGroup>
                    <GeometryDrawing
                        Brush="#44ccccff"
                        Geometry="M 0 0 L 1 1" />
                    <GeometryDrawing
                        Brush="Gray"
                        Geometry="M 0 0 L 1 0 1 0.05 0.05 0.05 0.05 1 0 1 Z" />
                </DrawingGroup>
            </DrawingBrush.Drawing>
        </DrawingBrush>
        <DrawingBrush x:Key="ArrowDrawingBrushKey"
            ViewportUnits="Absolute"
            Viewport="0 0 10 20"
            Viewbox="0 0 1 1"
            TileMode="Tile"
            Opacity="0.5"
            options:Freeze="True">
            <DrawingBrush.Drawing>
                <DrawingGroup>
                    <GeometryDrawing
                        Brush="#9999ff"
                        Geometry="M 0 0 L 1 0 1 0.5" />
                    <GeometryDrawing
                        Geometry="M 0 0 L 1 0.5 0 1">
                        <GeometryDrawing.Brush>
                            <LinearGradientBrush
                                StartPoint="0 0.5"
                                EndPoint="1 0.5">
                                <GradientStop Offset="0.0" Color="#9999ff"     />
                                <GradientStop Offset="1.0" Color="Transparent" />
                            </LinearGradientBrush>
                        </GeometryDrawing.Brush>
                    </GeometryDrawing>
                    <GeometryDrawing
                        Brush="#9999ff"
                        Geometry="M 0 1 L 1 1 1 0.5" />
                </DrawingGroup>
            </DrawingBrush.Drawing>
        </DrawingBrush>
    </Window.Resources>
    <Grid
        Margin="10"
        VerticalAlignment="Center">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"    />
            <ColumnDefinition Width="10"   />
            <ColumnDefinition Width="Auto" />
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="20"   />
            <RowDefinition Height="Auto" />
            <RowDefinition Height="20"   />
            <RowDefinition Height="Auto" />
            <RowDefinition Height="20"   />
            <RowDefinition Height="Auto" />
            <RowDefinition Height="20"   />
            <RowDefinition Height="Auto" />
            <RowDefinition Height="20"   />
            <RowDefinition Height="Auto" />
        </Grid.RowDefinitions>
        <Rectangle Grid.Row="0" Grid.Column="2"
            Margin="50 10 0 10"
            HorizontalAlignment="Left"
            VerticalAlignment="Center"
            Width="250"
            Height="20"
            Fill="{StaticResource ArrowDrawingBrushKey}" />
        <Rectangle Grid.Row="2" Grid.Column="2"
            Margin="100 10 0 10"
            HorizontalAlignment="Left"
            VerticalAlignment="Center"
            Width="200"
            Height="20"
            Fill="{StaticResource ArrowDrawingBrushKey}" />
        <Rectangle Grid.Row="4" Grid.Column="2"
            Margin="100 10 0 10"
            HorizontalAlignment="Left"
            VerticalAlignment="Center"
            Width="300"
            Height="20"
            Fill="{StaticResource ArrowDrawingBrushKey}" />
        <Rectangle Grid.Row="6" Grid.Column="2"
            Margin="50 10 0 10"
            HorizontalAlignment="Left"
            VerticalAlignment="Center"
            Width="300"
            Height="20"
            Fill="{StaticResource ArrowDrawingBrushKey}" />
        <Rectangle Grid.Row="8" Grid.Column="2"
            Margin="50 10 0 10"
            HorizontalAlignment="Left"
            VerticalAlignment="Center"
            Width="50"
            Height="20"
            Fill="{StaticResource ArrowDrawingBrushKey}" />

        <Rectangle Name="fromToAnimationRectangle" Grid.Row="0" Grid.Column="2"
            HorizontalAlignment="Left"
            VerticalAlignment="Center"
            Width="100"
            Height="10"
            Fill="#99ff9900" />
        <Rectangle Name="toAnimationRectangle" Grid.Row="2" Grid.Column="2"
            Width="100"
            Height="10"
            HorizontalAlignment="Left"
            VerticalAlignment="Center"
            Fill="#99ff9900" />
        <Rectangle Name="byAnimationRectangle" Grid.Row="4" Grid.Column="2"
            HorizontalAlignment="Left"
            VerticalAlignment="Center"
            Width="100"
            Height="10"
            Fill="#99ff9900" />
        <Rectangle Name="fromByAnimationRectangle" Grid.Row="6" Grid.Column="2"
            HorizontalAlignment="Left"
            VerticalAlignment="Center"
            Width="100"
            Height="10"
            Fill="#99ff9900" />
        <Rectangle Name="fromAnimationRectangle" Grid.Row="8" Grid.Column="2"
            HorizontalAlignment="Left"
            VerticalAlignment="Center"
            Width="100"
            Height="10"
            Fill="#99ff9900"  />

        <Border Grid.Row="0" Grid.RowSpan="10" Grid.Column="2"
            BorderThickness="3"
            BorderBrush="#ff000000">
            <Border
                BorderThickness="1"
                BorderBrush="#66000000"
                Background="{StaticResource GridDrawingBrushKey}" />
        </Border>

        <TextBlock Grid.Row="0" Grid.Column="0">
            <Bold>"From/To" 애니메이션</Bold><LineBreak />
            <Span FontSize="12">
                사각형의 Width 속성을 10초 동안 50에서 300으로<LineBreak />
                애니메이션합니다.
            </Span>
        </TextBlock>
        <TextBlock Grid.Row="2" Grid.Column="0">
            <Bold>"To" 애니메이션</Bold><LineBreak />
            <Span FontSize="12">
                사각형의 Width 속성을 기본 값인 100에서<LineBreak />
                300으로 10초 동안 애니메이션으로 만듭니다.
            </Span>
        </TextBlock>
        <TextBlock Grid.Row="4" Grid.Column="0">
            <Bold>"By" 애니메이션</Bold><LineBreak />
            <Span FontSize="12">
                10초 동안 기본 값을 300만큼 오프셋하여 사각형의<LineBreak />
                Width 속성에 애니메이션을 적용합니다.<LineBreak />
                결과적으로 너비가 100에서 400으로 애니메이션됩니다.
            </Span>
        </TextBlock>
        <TextBlock Grid.Row="6" Grid.Column="0">
            <Bold>"From/By" 애니메이션</Bold><LineBreak />
            <Span FontSize="12">
                10초 동안 애니메이션의 시작 값인 50을 300으로 오프셋하여<LineBreak />
                사각형의 Width 속성에 애니메이션을 적용합니다.<LineBreak />
                결과적으로 너비가 50에서 350으로 애니메이션됩니다.
            </Span>
        </TextBlock>
        <TextBlock Grid.Row="8" Grid.Column="0">
            <Bold>"From" 애니메이션</Bold><LineBreak />
            <Span FontSize="12">
                사각형의 Width 속성을 50에서 기본 값인 100까지 10초 동안<LineBreak />
                애니메이션합니다.
            </Span>
        </TextBlock>

        <Button Grid.Row="10" Grid.Column="0" Grid.ColumnSpan="3"
            Margin="0 10 0 0"
            Width="200"
            Height="30"
            Background="LimeGreen">
            애니메이션 시작
            <Button.Triggers>
                <EventTrigger RoutedEvent="Button.Click">
                    <BeginStoryboard>
                        <Storyboard FillBehavior="Stop">
                            <DoubleAnimation
                                Storyboard.TargetName="fromToAnimationRectangle"
                                Storyboard.TargetProperty="Width"
                                Duration="00:00:10"
                                From="50"
                                To="300" />
                            <DoubleAnimation
                                Storyboard.TargetName="toAnimationRectangle"
                                Storyboard.TargetProperty="Width"
                                Duration="00:00:10"
                                To="300" />
                            <DoubleAnimation
                                Storyboard.TargetName="byAnimationRectangle"
                                Storyboard.TargetProperty="Width"
                                Duration="00:00:10"
                                By="300" />
                            <DoubleAnimation
                                Storyboard.TargetName="fromByAnimationRectangle"
                                Storyboard.TargetProperty="Width"
                                Duration="00:00:10"
                                From="50"
                                By="300" />
                            <DoubleAnimation
                                Storyboard.TargetName="fromAnimationRectangle"
                                Storyboard.TargetProperty="Width"
                                From="50"
                                Duration="00:00:10" />
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger>
            </Button.Triggers>
        </Button>
    </Grid>
</Window>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

230

231

232

233

234

235

236

237

238

239

240

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

ViewportUnits="Absolute"

Viewport="0 0 10 10"

TileMode="Tile"

Opacity="0.5"

AlignmentX="Left"

AlignmentY="Top"

options:Freeze="True">

<DrawingBrush.Drawing>

<GeometryDrawing

Brush="#44ccccff"

Geometry="M 0 0 L 1 1" />

<GeometryDrawing

Brush="Gray"

Geometry="M 0 0 L 1 0 1 0.05 0.05 0.05 0.05 1 0 1 Z" />

</DrawingGroup>

</DrawingBrush.Drawing>

</DrawingBrush>

<DrawingBrush x:Key="ArrowDrawingBrushKey"

ViewportUnits="Absolute"

Viewport="0 0 10 20"

Viewbox="0 0 1 1"

TileMode="Tile"

Opacity="0.5"

options:Freeze="True">

<DrawingBrush.Drawing>

<GeometryDrawing

Brush="#9999ff"

Geometry="M 0 0 L 1 0 1 0.5" />

<GeometryDrawing

Geometry="M 0 0 L 1 0.5 0 1">

<GeometryDrawing.Brush>

<LinearGradientBrush

StartPoint="0 0.5"

EndPoint="1 0.5">

</LinearGradientBrush>

</GeometryDrawing.Brush>

</GeometryDrawing>

<GeometryDrawing

Brush="#9999ff"

Geometry="M 0 1 L 1 1 1 0.5" />

</DrawingGroup>

</DrawingBrush.Drawing>

</DrawingBrush>

</Window.Resources>

<Grid

Margin="10"

VerticalAlignment="Center">

<Grid.ColumnDefinitions>

</Grid.ColumnDefinitions>

<Grid.RowDefinitions>

</Grid.RowDefinitions>

<Rectangle Grid.Row="0" Grid.Column="2"

Margin="50 10 0 10"

HorizontalAlignment="Left"

VerticalAlignment="Center"

Width="250"

Height="20"

Fill="{StaticResource ArrowDrawingBrushKey}" />

<Rectangle Grid.Row="2" Grid.Column="2"

Margin="100 10 0 10"

HorizontalAlignment="Left"

VerticalAlignment="Center"

Width="200"

Height="20"

Fill="{StaticResource ArrowDrawingBrushKey}" />

<Rectangle Grid.Row="4" Grid.Column="2"

Margin="100 10 0 10"

HorizontalAlignment="Left"

VerticalAlignment="Center"

Width="300"

Height="20"

Fill="{StaticResource ArrowDrawingBrushKey}" />

<Rectangle Grid.Row="6" Grid.Column="2"

Margin="50 10 0 10"

HorizontalAlignment="Left"

VerticalAlignment="Center"

Width="300"

Height="20"

Fill="{StaticResource ArrowDrawingBrushKey}" />

<Rectangle Grid.Row="8" Grid.Column="2"

Margin="50 10 0 10"

HorizontalAlignment="Left"

VerticalAlignment="Center"

Width="50"

Height="20"

Fill="{StaticResource ArrowDrawingBrushKey}" />

<Rectangle Name="fromToAnimationRectangle" Grid.Row="0" Grid.Column="2"

HorizontalAlignment="Left"

VerticalAlignment="Center"

Width="100"

Height="10"

Fill="#99ff9900" />

<Rectangle Name="toAnimationRectangle" Grid.Row="2" Grid.Column="2"

Width="100"

Height="10"

HorizontalAlignment="Left"

VerticalAlignment="Center"

Fill="#99ff9900" />

<Rectangle Name="byAnimationRectangle" Grid.Row="4" Grid.Column="2"

HorizontalAlignment="Left"

VerticalAlignment="Center"

Width="100"

Height="10"

Fill="#99ff9900" />

<Rectangle Name="fromByAnimationRectangle" Grid.Row="6" Grid.Column="2"

HorizontalAlignment="Left"

VerticalAlignment="Center"

Width="100"

Height="10"

Fill="#99ff9900" />

<Rectangle Name="fromAnimationRectangle" Grid.Row="8" Grid.Column="2"

HorizontalAlignment="Left"

VerticalAlignment="Center"

Width="100"

Height="10"

Fill="#99ff9900" />

<Border Grid.Row="0" Grid.RowSpan="10" Grid.Column="2"

BorderThickness="3"

BorderBrush="#ff000000">

<Border

BorderThickness="1"

BorderBrush="#66000000"

Background="{StaticResource GridDrawingBrushKey}" />

</Border>

<Bold>"From/To" 애니메이션</Bold><LineBreak />

사각형의 Width 속성을 10초 동안 50에서 300으로<LineBreak />

애니메이션합니다.

</Span>

</TextBlock>

<Bold>"To" 애니메이션</Bold><LineBreak />

사각형의 Width 속성을 기본 값인 100에서<LineBreak />

300으로 10초 동안 애니메이션으로 만듭니다.

</Span>

</TextBlock>

<Bold>"By" 애니메이션</Bold><LineBreak />

10초 동안 기본 값을 300만큼 오프셋하여 사각형의<LineBreak />

Width 속성에 애니메이션을 적용합니다.<LineBreak />

결과적으로 너비가 100에서 400으로 애니메이션됩니다.

</Span>

</TextBlock>

<Bold>"From/By" 애니메이션</Bold><LineBreak />

10초 동안 애니메이션의 시작 값인 50을 300으로 오프셋하여<LineBreak />

사각형의 Width 속성에 애니메이션을 적용합니다.<LineBreak />

결과적으로 너비가 50에서 350으로 애니메이션됩니다.

</Span>

</TextBlock>

<Bold>"From" 애니메이션</Bold><LineBreak />

사각형의 Width 속성을 50에서 기본 값인 100까지 10초 동안<LineBreak />

애니메이션합니다.

</Span>

</TextBlock>

<Button Grid.Row="10" Grid.Column="0" Grid.ColumnSpan="3"

Margin="0 10 0 0"

Width="200"

Height="30"

Background="LimeGreen">

애니메이션 시작

<Button.Triggers>

<DoubleAnimation

Storyboard.TargetName="fromToAnimationRectangle"

Storyboard.TargetProperty="Width"

Duration="00:00:10"

From="50"

To="300" />

<DoubleAnimation

Storyboard.TargetName="toAnimationRectangle"

Storyboard.TargetProperty="Width"

Duration="00:00:10"

To="300" />

<DoubleAnimation

Storyboard.TargetName="byAnimationRectangle"

Storyboard.TargetProperty="Width"

Duration="00:00:10"

By="300" />

<DoubleAnimation

Storyboard.TargetName="fromByAnimationRectangle"

Storyboard.TargetProperty="Width"

Duration="00:00:10"

From="50"

By="300" />

<DoubleAnimation

Storyboard.TargetName="fromAnimationRectangle"

Storyboard.TargetProperty="Width"

From="50"

Duration="00:00:10" />

</Storyboard>

</BeginStoryboard>

</EventTrigger>

</Button.Triggers>

</Button>

</Grid>

</Window>

TestProject.zip