<!--
1. 스타일 사용해서 모든 버튼의 속성 설정
2. 스타일 내부에 변형 객체 추가(변형 역시
속성 중 하나)
3. 스타일 내부에 트리거 추가(속성, 이벤트)
3.1 이벤트 트리거 추가
3.2 클릭 => 변형 객체를 애니메이션 실행
스타일은 1개이상의 객체를 전제로 하기
때문에 x:Name은 불가능 하다.
-->
<Window x:Class="WPFEx.Animation16"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Animation16" Height="300" Width="300">
<Window.Resources>
<Style TargetType="{x:Type Button}">
<Setter Property="Content" Value="Click" />
<Setter Property="RenderTransformOrigin" Value="0.5,0.5"
/>
<Setter Property="RenderTransform">
<Setter.Value>
<ScaleTransform />
</Setter.Value>
</Setter>
<Style.Triggers>
<EventTrigger RoutedEvent="Button.Click">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation From="1" To="0.5" Duration="0:0:0.5" AutoReverse="True" RepeatBehavior="Forever"
Storyboard.TargetProperty="RenderTransform.ScaleX" />
<DoubleAnimation From="1" To="0.5" Duration="0:0:0.5" AutoReverse="True" RepeatBehavior="Forever"
Storyboard.TargetProperty="RenderTransform.ScaleY" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Style.Triggers>
</Style>
</Window.Resources>
<UniformGrid>
<Button />
<Button />
<Button />
<Button />
<Button />
<Button />
<Button />
<Button />
<Button />
</UniformGrid>
</Window>
Style 컨트롤 Xaml
<Window x:Class="WPFEx.Animation17"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Animation17" Height="500" Width="300" Loaded="Window_Loaded"
>
<Window.Resources>
<Style TargetType="{x:Type Button}">
<Setter Property="Width" Value="50" />
<Setter Property="Height" Value="50" />
<Setter Property="VerticalAlignment" Value="Bottom"
/>
<Setter Property="RenderTransformOrigin" Value="0.5,0.5"
/>
<Setter Property="RenderTransform">
<Setter.Value>
<TranslateTransform />
</Setter.Value>
</Setter>
<Style.Triggers>
<EventTrigger RoutedEvent="MouseEnter">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation
Storyboard.TargetProperty="RenderTransform.Y" By="-50" Duration="0:0:0.3"
/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Style.Triggers>
</Style>
</Window.Resources>
<Grid Name="grid1">
</Grid>
</Window>
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Shapes;
namespace WPFEx
{
/// <summary>
///
Animation17.xaml에 대한 상호 작용 논리
/// </summary>
public partial class Animation17 : Window
{
public Animation17()
{
InitializeComponent();
}
private void Window_Loaded(object
sender, RoutedEventArgs e)
{
for (int i = 0; i < 100; i++)
{
Button
btn = new Button();
//btn.Content =
i.ToString();
//btn.Click +=
new RoutedEventHandler(btn_Click);
grid1.Children.Add(btn);
}
}
void btn_Click(object sender, RoutedEventArgs
e)
{
// as 형변환 연산자 Button btn =
(Button)e.Source; 와 같은 형태
// 기존에 캐스팅 연산자는 실패를 하게 되면 런타임에러가 발생 as를 사용하게 되면 null을 반환한다.
// WPF는 sender 누가 호출 했는지 ? 판단을 Source로 판단한다.
Button btn =
e.Source as Button;
grid1.Children.Remove(btn);
}
}
}
<Window x:Class="WPFEx.Animation18"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Animation18" Height="500" Width="800">
<TextBlock Text="XAML" FontSize="300" FontFamily="Impact" HorizontalAlignment="Center" VerticalAlignment="Center"
RenderTransformOrigin=".5,.5">
<TextBlock.RenderTransform>
<TransformGroup>
<TransformGroup.Children>
<!--
변형 객체를 2개이상 동시에 적용
RenderTransform은 Content가짐!!!
=> 변형 객체를 1개만 가질 수 있다 1개이상 가지고 싶으면 TextBox 자식으로 TransformGroup을 가지고 그룹을 선언하면 Children을
제외하고 사용한다 대부분
-->
<RotateTransform x:Name="rTrans"
/>
<ScaleTransform x:Name="sTrans"
/>
</TransformGroup.Children>
</TransformGroup>
</TextBlock.RenderTransform>
<TextBlock.Triggers>
<EventTrigger RoutedEvent="TextBlock.MouseDown">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetName="rTrans" Storyboard.TargetProperty="Angle" From="0" To="360" RepeatBehavior="Forever" Duration="0:0:5"
/>
<DoubleAnimation
Storyboard.TargetName="sTrans" Storyboard.TargetProperty="ScaleX" From="1" To="-1" RepeatBehavior="Forever" Duration="0:0:3" AutoReverse="True"
/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</TextBlock.Triggers>
</TextBlock>
</Window>
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Animation19" Height="300" Width="500">
<Window.Resources>
<Style TargetType="{x:Type Button}">
<Setter Property="Width" Value="80" />
<Setter Property="Height" Value="80" />
<Setter Property="Margin" Value="2" />
<Setter Property="FocusVisualStyle" Value="{x:Null}" />
<Setter Property="RenderTransformOrigin" Value="0.5,0.5"
/>
<Setter Property="RenderTransform">
<Setter.Value>
<RotateTransform Angle="0"
/>
</Setter.Value>
</Setter>
<Style.Triggers>
<EventTrigger RoutedEvent="Button.MouseEnter">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation
Storyboard.TargetProperty="Width" To="120" Duration="0:0:0.3" AutoReverse="False" />
<DoubleAnimation
Storyboard.TargetProperty="Height" To="120" Duration="0:0:0.3" AutoReverse="False" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
<EventTrigger RoutedEvent="Button.MouseLeave">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation
Storyboard.TargetProperty="Width" To="80" Duration="0:0:0.3" AutoReverse="False" />
<DoubleAnimation
Storyboard.TargetProperty="Height" To="80" Duration="0:0:0.3" AutoReverse="False" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
<EventTrigger RoutedEvent="Button.Click">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation
Storyboard.TargetProperty="RenderTransform.Angle" From="0" To="360" Duration="0:0:0.3" RepeatBehavior="5x"
/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Style.Triggers>
</Style>
</Window.Resources>
<!--메뉴바-->
<StackPanel Orientation="Horizontal" HorizontalAlignment="Center" VerticalAlignment="Center">
<Button Content="메뉴1" />
<Button Content="메뉴2" />
<Button Content="메뉴3" />
<Button Content="메뉴4" />
<Button Content="메뉴5" />
</StackPanel>
</Window>
이것을 C#으로 제어 하고싶다면
story2.Begin();
story2.Pause();
story2.Resume();
story2.Stop();
story2.Seek(TimeSpan.FromSeconds(2.5));
<!--
스토리보드(행동집합, 시간흐름)
: 애니메이션의 집합
: 행동 + 시간
=> 제어(시작,중지) => 곰플레이어(시작, 일시중지, 다시시작, 멈춤)
-->
<Window x:Class="WPFEx.MiniProject02"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MiniProject02" Height="500" Width="700">
<StackPanel>
<Canvas Width="350" Height="200" Background="Firebrick">
<Rectangle Stroke="Black" StrokeThickness="5" Fill="Tan" Width="50" Height="150" Canvas.Left="150" Canvas.Top="50">
<Rectangle.RenderTransform>
<TransformGroup>
<RotateTransform x:Name="rTrans1" Angle="-90" CenterX="0" CenterY="150"
/>
<RotateTransform x:Name="rTrans2" Angle="0" CenterX="50" CenterY="150"
/>
</TransformGroup>
</Rectangle.RenderTransform>
</Rectangle>
</Canvas>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Center" VerticalAlignment="Center" Background="RosyBrown">
<StackPanel.Triggers>
<EventTrigger SourceName="btnBegin" RoutedEvent="Button.Click">
<BeginStoryboard Name="story1">
<Storyboard>
<DoubleAnimation
Storyboard.TargetName="rTrans1" Storyboard.TargetProperty="Angle" From="-90" To="0" Duration="0:0:5"
/>
<DoubleAnimation
Storyboard.TargetName="rTrans2" Storyboard.TargetProperty="Angle" From="0" To="90" Duration="0:0:5"
/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
<EventTrigger SourceName="btnPause" RoutedEvent="Button.Click">
<PauseStoryboard BeginStoryboardName="story1"
/>
</EventTrigger>
<EventTrigger SourceName="btnResume" RoutedEvent="Button.Click">
<ResumeStoryboard BeginStoryboardName="story1"
/>
</EventTrigger>
<EventTrigger SourceName="btnStop" RoutedEvent="Button.Click">
<StopStoryboard BeginStoryboardName="story1"/>
</EventTrigger>
<EventTrigger SourceName="btnEnd" RoutedEvent="Button.Click">
<SeekStoryboard BeginStoryboardName="story1" Offset="0:0:5"
/>
</EventTrigger>
<EventTrigger SourceName="btnCenter" RoutedEvent="Button.Click">
<SeekStoryboard BeginStoryboardName="story1" Offset="0:0:2.5"
/>
</EventTrigger>
</StackPanel.Triggers>
<StackPanel.Children>
<!--스택패널의 자식 버튼 디자인-->
<Button Name="btnBegin" Content="Begin" Margin="5"
/>
<Button Name="btnPause" Content="Pause" Margin="5"
/>
<Button Name="btnResume" Content="Resume" Margin="5"
/>
<Button Name="btnStop" Content="Stop" Margin="5"
/>
<Button Name="btnEnd" Content="End" Margin="5"
/>
<Button Name="btnCenter" Content="Center" Margin="5"
/>
</StackPanel.Children>
</StackPanel>
</StackPanel>
</Window>
