Width늘어나기
<!--
애니메이션(Animation) : 객체의
상태(속성)값을
A=>B로 서서히 변화를 주는 작업
: 원하는 시간, 원하는 변화값 제어
: 스토리보드(Storyboard), 애니메이션(Timeline)
-->
<Window x:Class="WPFEx.Animation"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Animation" Height="300" Width="300">
<Button FontSize="13" Content="버튼" HorizontalAlignment="Center" VerticalAlignment="Center">
<Button.Triggers>
<!--속성 트리거 : 특정 속성값이 만족하면
실행 = 조건을 만족하면 속성을 적용-->
<!--이벤트 트리거 : C# 이벤트와 동일 => 이벤트가 발생하면 스토리보드를 실행-->
<EventTrigger RoutedEvent="Button.Click">
<!--호출명령-->
<BeginStoryboard>
<!--
스토리보드 : 공통된 목적을 가지는 애니메이션들을
관리하는 집합
-->
<Storyboard>
<!--
DoubleAnimation
: 애니메이션(Timeline)
: 1개의 속성값에 대해서만 변화
-->
<DoubleAnimation
From="13" To="100"
Duration="0:0:2"
Storyboard.TargetProperty="FontSize"
/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Button.Triggers>
</Button>
</Window>
<Window x:Class="WPFEx.Animation03"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Animation03" Height="300" Width="300">
<StackPanel HorizontalAlignment="Center">
<StackPanel Orientation="Horizontal" Margin="5">
<Button Content="너비">
<Button.Triggers>
<EventTrigger RoutedEvent="Button.Click">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation
From="50"
To="250"
Duration="0:0:1"
Storyboard.TargetName="btn"
Storyboard.TargetProperty="Width"
/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Button.Triggers>
</Button>
<Button Content="높이">
<Button.Triggers>
<EventTrigger RoutedEvent="Button.Click">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation
From="50"
To="250"
Duration="0:0:1"
Storyboard.TargetName="btn"
Storyboard.TargetProperty="Height"
/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Button.Triggers>
</Button>
</StackPanel>
<Button Name="btn" Content="대상" Width="50" Height="50">
</Button>
</StackPanel>
</Window>
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Animation04" Height="300" Width="300">
<Button Content="버튼" HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="12">
<Button.Triggers>
<EventTrigger RoutedEvent="Button.Click">
<BeginStoryboard>
<Storyboard>
<!--
From
: 초기값
To
: 최종값
Duration
: 소요시간
Storyboard.TargetProperty
: 대상속성
Storyboard.TargetName
: 대상객체(생략하면 본인)
-->
<!--<DoubleAnimation
From="12"
To="100"
Duration="0:0:1"
Storyboard.TargetProperty="FontSize"
/>-->
<!--
From은 생략 가능 : 현재값이 From으로 사용
: 다시 누르면 변화없음(From=100)
-->
<!--<DoubleAnimation
To="100"
Duration="0:0:1"
Storyboard.TargetProperty="FontSize"
/>-->
<!--By : 누적(상대값) FontSize += 10;-->
<!--<DoubleAnimation
By="10"
Duration="0:0:1"
Storyboard.TargetProperty="FontSize"
/>-->
<!--
FillBehavior
: 애니메이션이 끝나고 난뒤의 행동
-->
<!--<DoubleAnimation
From="12"
To="100"
Duration="0:0:1"
Storyboard.TargetProperty="FontSize"
FillBehavior="Stop"
/>-->
<!--AutoReverse
: 자동 역재생, 애니메이션을 실행 후 반대로 실행-->
<!--<DoubleAnimation
From="12"
To="100"
Duration="0:0:3"
Storyboard.TargetProperty="FontSize"
AutoReverse="True"
/>-->
<!--
RepeatBehavior
: 반복 횟수(nx), Forever(무한 반복)
AutoReverse
= RepeatBehavior X 2
-->
<DoubleAnimation
From="12" To="100"
Duration="0:0:0.5"
AutoReverse="True"
Storyboard.TargetProperty="FontSize"
RepeatBehavior="Forever"
/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Button.Triggers>
</Button>
</Window>
<Window x:Class="WPFEx.Animation05"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Animation05" Height="300" Width="500">
<Canvas>
<Ellipse Width="50" Height="50" Stroke="Gray" StrokeThickness="5" Fill="Yellow" Canvas.Left="0" Canvas.Top="0">
<Ellipse.Triggers>
<EventTrigger RoutedEvent="Ellipse.MouseDown">
<BeginStoryboard>
<Storyboard>
<!--스토리보드안에는 모든 애니메이션들은 스토리보드가 시작하는 순간 동시에 모두 실행 된다.-->
<!--<DoubleAnimation
Storyboard.TargetProperty="Width"
From="50"
To="250"
Duration="0:0:1"
AutoReverse="True"
RepeatBehavior="5x"
/>
<DoubleAnimation
Storyboard.TargetProperty="Height"
From="50"
To="250"
Duration="0:0:0.5"
AutoReverse="True"
RepeatBehavior="Forever"
/>-->
<!--AccelerationRatio
: 가속도(0~1)-->
<!--<DoubleAnimation
Storyboard.TargetProperty="Width"
From="50"
To="250"
Duration="0:0:1"
AutoReverse="True"
RepeatBehavior="Forever"
AccelerationRatio="0.5"
/>-->
<!--DecelerationRatio
: 감속도(0~1)-->
<!--<DoubleAnimation
Storyboard.TargetProperty="Width"
From="50"
To="250"
Duration="0:0:1"
AutoReverse="True"
RepeatBehavior="Forever"
DecelerationRatio="1"
/>
<DoubleAnimation
Storyboard.TargetProperty="StrokeThickness"
From="5"
To="15"
Duration="0:0:1"
AutoReverse="True"
RepeatBehavior="Forever"
DecelerationRatio="1"
/>-->
<!--복합속성 애니메이션-->
<DoubleAnimation
Storyboard.TargetProperty="(Canvas.Left)" From="0" To="430" Duration="0:0:3.3"
AutoReverse="True"
RepeatBehavior="Forever"
DecelerationRatio="1"
/>
<DoubleAnimation
Storyboard.TargetProperty="(Canvas.Top)" From="0" To="210" Duration="0:0:1"
AutoReverse="True"
RepeatBehavior="Forever"
AccelerationRatio="0.8"
DecelerationRatio="0.2"
/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Ellipse.Triggers>
</Ellipse>
</Canvas>
</Window>
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Animation06" Height="300" Width="300">
<!--<Grid>
<Button Content="버튼"
Width="50" Height="50">
<Button.Triggers>
<EventTrigger
RoutedEvent="Button.Click">
<BeginStoryboard>
<Storyboard>
<Int32Animation
Storyboard.TargetProperty="Width"
From="50"
To="250"
Duration="0:0:5"
AutoReverse="True"
/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Button.Triggers>
</Button>
</Grid>-->
<Grid ShowGridLines="True">
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Grid.Children>
<Button Content="버튼" Grid.Row="0" Grid.Column="0" Background="Yellow">
<Button.Triggers>
<EventTrigger RoutedEvent="Button.Click">
<BeginStoryboard>
<Storyboard>
<Int32Animation
Storyboard.TargetProperty="(Grid.Row)"
From="0" To="3" Duration="0:0:3"
RepeatBehavior="Forever"
/>
<Int32Animation
Storyboard.TargetProperty="(Grid.Column)"
From="0" To="4" Duration="0:0:4"
RepeatBehavior="Forever"
/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Button.Triggers>
</Button>
</Grid.Children>
</Grid>
</Window>
Color 애니메이션
<Window x:Class="WPFEx.AnimationRectangle"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="AnimationRectangle" Height="300" Width="300">
<Grid>
<Rectangle Width="200" Height="200" Fill="Yellow">
<Rectangle.Triggers>
<EventTrigger RoutedEvent="Rectangle.MouseDown">
<BeginStoryboard>
<Storyboard>
<ColorAnimation
From="Yellow" To="Red"
Duration="0:0:0.01"
AutoReverse="True"
RepeatBehavior="Forever"
Storyboard.TargetProperty="Fill.Color"
/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Rectangle.Triggers>
</Rectangle>
</Grid>
</Window>
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Animation07" Height="300" Width="300">
<UniformGrid>
<Rectangle Fill="White" Stroke="Black" StrokeThickness="1">
<Rectangle.Triggers>
<EventTrigger RoutedEvent="Rectangle.MouseEnter">
<BeginStoryboard>
<Storyboard>
<ColorAnimation
Storyboard.TargetProperty="Fill.Color"
From="White" To="Red"
Duration="0:0:1"
RepeatBehavior="Forever"
/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Rectangle.Triggers>
</Rectangle>
</UniformGrid>
</Window>
디자인 코드와 비즈니스 코드 분류
버튼의 트리거를 다른곳에서 코딩 목적 : 가독성(코드를 보기 용이하게 하기 위해서)
리소스 관리와 유사하게 관리할수 있다.
1. 현재 이벤트가 누구의 소유인지?
2. 애니메이션이 누구를 대상?(속성의 소유주?)
-->
<Window x:Class="WPFEx.Animation08"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Animation08" Height="300" Width="300">
<Window.Triggers>
<EventTrigger RoutedEvent="Button.Click" SourceName="btn">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation
Storyboard.TargetProperty="FontSize"
Storyboard.TargetName="btn"
From="12" To="100" Duration="0:0:1"
/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Window.Triggers>
<Button Name="btn" FontSize="12" Content="버튼" HorizontalAlignment="Center" VerticalAlignment="Center"
/>
</Window>
<Window x:Class="WPFEx.Animation09"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Animation09" Height="300" Width="300">
<Window.Resources>
<Style x:Key="btnStyle" TargetType="{x:Type Button}">
<Setter Property="Width" Value="50" />
<Setter Property="Height" Value="50" />
<Setter Property="Margin" Value="5" />
<!--<Style.Triggers>
<Trigger
Property="IsMouseOver" Value="True">
<Setter
Property="Width" Value="100" />
</Trigger>
</Style.Triggers>-->
<Style.Triggers>
<EventTrigger RoutedEvent="Button.Click">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation
Storyboard.TargetProperty="Width" From="50" To="250" Duration="0:0:1"
/>
<DoubleAnimation
Storyboard.TargetProperty="Height" From="50" To="250" Duration="0:0:1"
/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Style.Triggers>
</Style>
</Window.Resources>
<StackPanel>
<Button Content="버튼1" Style="{StaticResource btnStyle}" />
<Button Content="버튼2" Style="{StaticResource btnStyle}" />
<Button Content="버튼3" Style="{StaticResource btnStyle}" />
</StackPanel>
</Window>
<!--스타일은 트리거라는 것도 똑같이 적용할수 있어 동일한 이벤트에 애니메이션을 적용할수
있는것도 모든 객체에 적용할수 있다.-->
<Window x:Class="WPFEx.Animation10"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Animation10" Height="300" Width="300">
<Window.Resources>
<Style x:Key="rectStyle" TargetType="{x:Type Rectangle}">
<Setter Property="Fill" Value="White" />
<Setter Property="Stroke" Value="Black" />
<Setter Property="StrokeThickness" Value="1"
/>
<Style.Triggers>
<EventTrigger RoutedEvent="Rectangle.MouseEnter">
<BeginStoryboard>
<Storyboard>
<ColorAnimation
Storyboard.TargetProperty="Fill.Color"
From="White" To="Red"
Duration="0:0:3"
/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Style.Triggers>
</Style>
</Window.Resources>
<UniformGrid>
<Rectangle Style="{StaticResource rectStyle}" />
<Rectangle Style="{StaticResource rectStyle}" />
<Rectangle Style="{StaticResource rectStyle}" />
<Rectangle Style="{StaticResource rectStyle}" />
<Rectangle Style="{StaticResource rectStyle}" />
<Rectangle Style="{StaticResource rectStyle}" />
<Rectangle Style="{StaticResource rectStyle}" />
<Rectangle Style="{StaticResource rectStyle}" />
<Rectangle Style="{StaticResource rectStyle}" />
<Rectangle Style="{StaticResource rectStyle}" />
<Rectangle Style="{StaticResource rectStyle}" />
<Rectangle Style="{StaticResource rectStyle}" />
<Rectangle Style="{StaticResource rectStyle}" />
<Rectangle Style="{StaticResource rectStyle}" />
<Rectangle Style="{StaticResource rectStyle}" />
<Rectangle Style="{StaticResource rectStyle}" />
<Rectangle Style="{StaticResource rectStyle}" />
<Rectangle Style="{StaticResource rectStyle}" />
<Rectangle Style="{StaticResource rectStyle}" />
<Rectangle Style="{StaticResource rectStyle}" />
<Rectangle Style="{StaticResource rectStyle}" />
<Rectangle Style="{StaticResource rectStyle}" />
<Rectangle Style="{StaticResource rectStyle}" />
<Rectangle Style="{StaticResource rectStyle}" />
<Rectangle Style="{StaticResource rectStyle}" />
<Rectangle Style="{StaticResource rectStyle}" />
<Rectangle Style="{StaticResource rectStyle}" />
<Rectangle Style="{StaticResource rectStyle}" />
<Rectangle Style="{StaticResource rectStyle}" />
<Rectangle Style="{StaticResource rectStyle}" />
<Rectangle Style="{StaticResource rectStyle}" />
<Rectangle Style="{StaticResource rectStyle}" />
<Rectangle Style="{StaticResource rectStyle}" />
<Rectangle Style="{StaticResource rectStyle}" />
<Rectangle Style="{StaticResource rectStyle}" />
<Rectangle Style="{StaticResource rectStyle}" />
<Rectangle Style="{StaticResource rectStyle}" />
<Rectangle Style="{StaticResource rectStyle}" />
<Rectangle Style="{StaticResource rectStyle}" />
<Rectangle Style="{StaticResource rectStyle}" />
<Rectangle Style="{StaticResource rectStyle}" />
<Rectangle Style="{StaticResource rectStyle}" />
<Rectangle Style="{StaticResource rectStyle}" />
<Rectangle Style="{StaticResource rectStyle}" />
<Rectangle Style="{StaticResource rectStyle}" />
<Rectangle Style="{StaticResource rectStyle}" />
<Rectangle Style="{StaticResource rectStyle}" />
<Rectangle Style="{StaticResource rectStyle}" />
<Rectangle Style="{StaticResource rectStyle}" />
<Rectangle Style="{StaticResource rectStyle}" />
<Rectangle Style="{StaticResource rectStyle}" />
<Rectangle Style="{StaticResource rectStyle}" />
<Rectangle Style="{StaticResource rectStyle}" />
<Rectangle Style="{StaticResource rectStyle}" />
<Rectangle Style="{StaticResource rectStyle}" />
<Rectangle Style="{StaticResource rectStyle}" />
<Rectangle Style="{StaticResource rectStyle}" />
<Rectangle Style="{StaticResource rectStyle}" />
<Rectangle Style="{StaticResource rectStyle}" />
<Rectangle Style="{StaticResource rectStyle}" />
<Rectangle Style="{StaticResource rectStyle}" />
<Rectangle Style="{StaticResource rectStyle}" />
<Rectangle Style="{StaticResource rectStyle}" />
<Rectangle Style="{StaticResource rectStyle}" />
<Rectangle Style="{StaticResource rectStyle}" />
<Rectangle Style="{StaticResource rectStyle}" />
<Rectangle Style="{StaticResource rectStyle}" />
<Rectangle Style="{StaticResource rectStyle}" />
<Rectangle Style="{StaticResource rectStyle}" />
<Rectangle Style="{StaticResource rectStyle}" />
<Rectangle Style="{StaticResource rectStyle}" />
<Rectangle Style="{StaticResource rectStyle}" />
<Rectangle Style="{StaticResource rectStyle}" />
<Rectangle Style="{StaticResource rectStyle}" />
<Rectangle Style="{StaticResource rectStyle}" />
<Rectangle Style="{StaticResource rectStyle}" />
<Rectangle Style="{StaticResource rectStyle}" />
<Rectangle Style="{StaticResource rectStyle}" />
<Rectangle Style="{StaticResource rectStyle}" />
<Rectangle Style="{StaticResource rectStyle}" />
<Rectangle Style="{StaticResource rectStyle}" />
<Rectangle Style="{StaticResource rectStyle}" />
<Rectangle Style="{StaticResource rectStyle}" />
<Rectangle Style="{StaticResource rectStyle}" />
<Rectangle Style="{StaticResource rectStyle}" />
<Rectangle Style="{StaticResource rectStyle}" />
<Rectangle Style="{StaticResource rectStyle}" />
<Rectangle Style="{StaticResource rectStyle}" />
<Rectangle Style="{StaticResource rectStyle}" />
<Rectangle Style="{StaticResource rectStyle}" />
<Rectangle Style="{StaticResource rectStyle}" />
<Rectangle Style="{StaticResource rectStyle}" />
<Rectangle Style="{StaticResource rectStyle}" />
<Rectangle Style="{StaticResource rectStyle}" />
<Rectangle Style="{StaticResource rectStyle}" />
<Rectangle Style="{StaticResource rectStyle}" />
<Rectangle Style="{StaticResource rectStyle}" />
<Rectangle Style="{StaticResource rectStyle}" />
<Rectangle Style="{StaticResource rectStyle}" />
<Rectangle Style="{StaticResource rectStyle}" />
</UniformGrid>
</Window>
<Window x:Class="WPFEx.Animation11"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Animation11" Height="300" Width="300">
<Window.Resources>
<Style x:Key="circle" TargetType="{x:Type Ellipse}">
<Setter Property="StrokeThickness" Value="5"
/>
<Setter Property="Width" Value="0" />
<Setter Property="Height" Value="0" />
<Style.Triggers>
<EventTrigger RoutedEvent="Window.Loaded">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation
Storyboard.TargetProperty="Width"
From="0" To="600" Duration="0:0:5"
RepeatBehavior="Forever"
AutoReverse="True"
/>
<DoubleAnimation
Storyboard.TargetProperty="Height"
From="0" To="600" Duration="0:0:5"
RepeatBehavior="Forever"
AutoReverse="True"
/>
<DoubleAnimation
Storyboard.TargetProperty="Opacity"
From="1" To="0" Duration="0:0:5"
RepeatBehavior="Forever"
AutoReverse="True"
/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Style.Triggers>
</Style>
</Window.Resources>
<Grid>
<Ellipse Style="{StaticResource circle}" Stroke="Red" Margin="20,0,0,0" />
<Ellipse Style="{StaticResource circle}" Stroke="Orange" Margin="0,10,0,0" />
<Ellipse Style="{StaticResource circle}" Stroke="Yellow" Margin="0,0,20,0" />
<Ellipse Style="{StaticResource circle}" Stroke="Green" Margin="0,0,0,30" />
<Ellipse Style="{StaticResource circle}" Stroke="Blue" Margin="0,0,0,0" />
<Ellipse Style="{StaticResource circle}" Stroke="Indigo" Margin="0,30,10,0" />
<Ellipse Style="{StaticResource circle}" Stroke="Violet" Margin="30,0,0,10" />
</Grid>
</Window>
C#파일 + Xaml 파일
Xaml 파일
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Animation12" Height="300" Width="800" Loaded="Window_Loaded">
<Window.Resources>
<Style TargetType="{x:Type Rectangle}">
<Setter Property="Width" Value="50" />
<Setter Property="Height" Value="50" />
<Setter Property="Fill" Value="White" />
<Setter Property="StrokeThickness" Value="10"
/>
<Style.Triggers>
<EventTrigger RoutedEvent="Rectangle.MouseDown">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation
Storyboard.TargetProperty="(Canvas.Left)"
From="0" To="750" Duration="0:0:3.2"
AutoReverse="True"
RepeatBehavior="Forever"
/>
<DoubleAnimation
Storyboard.TargetProperty="(Canvas.Top)"
From="0" To="218" Duration="0:0:1"
AutoReverse="True"
RepeatBehavior="Forever"
/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Style.Triggers>
</Style>
<Style TargetType="{x:Type Ellipse}">
<Setter Property="Width" Value="50" />
<Setter Property="Height" Value="50" />
<Setter Property="Fill" Value="White" />
<Setter Property="StrokeThickness" Value="10"
/>
<Style.Triggers>
<EventTrigger RoutedEvent="Ellipse.MouseDown">
<BeginStoryboard>
<Storyboard>
<