<StackPanel>
<Canvas Width="350" Height="200">
<Rectangle Canvas.Left="150" Canvas.Top="50" Stroke="Black" StrokeThickness="5"
Fill="Azure" Width="50" Height="150">
<Rectangle.RenderTransform>
<TransformGroup>
<!--변형축이 좌측하단-->
<RotateTransform x:Name="xform1" Angle="-90" CenterX="0" CenterY="150"/>
<!--변형축이 우측하단-->
<RotateTransform x:Name="xform2" CenterX="50" CenterY="150"/>
</TransformGroup>
</Rectangle.RenderTransform>
</Rectangle>
</Canvas>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Center">
<Button Name="btnBegin" Content="Begin" Margin="12"/>
<Button Name="btnPause" Content="Pause" Margin="12"/>
<Button Name="btnResume" Content="Resume" Margin="12"/>
<Button Name="btnStop" Content="Stop" Margin="12"/>
<Button Name="btnEnd" Content="Skip to End" Margin="12"/>
<Button Name="btnCenter" Content="Skip to Center" Margin="12"/>
</StackPanel>
<StackPanel.Triggers>
<!--외부에서도 Trigger가능-->
<EventTrigger SourceName="btnBegin" RoutedEvent="Button.Click">
<BeginStoryboard Name="story1">
<Storyboard>
<DoubleAnimation
Storyboard.TargetName="xform1"
Storyboard.TargetProperty="Angle"
From="-90" To="0"
Duration="0:0:5"/>
<DoubleAnimation
Storyboard.TargetName="xform2"
Storyboard.TargetProperty="Angle"
From="0" To="90"
Duration="0:0:5"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
<!--storyBoard에 대한 제어 가능-->
<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">
<!--진행단계의 마지막으로-->
<SkipStoryboardToFill BeginStoryboardName="story1"/>
</EventTrigger>
<EventTrigger SourceName="btnCenter" RoutedEvent="Button.Click">
<!--진행단계의 특정시간으로-->
<SeekStoryboard BeginStoryboardName="story1" Offset="0:0:2.5"/>
</EventTrigger>
</StackPanel.Triggers>
</StackPanel>
<Window.Resources>
<Style TargetType="{x:Type Button}">
<Setter Property="Width" Value="30"/>
<Setter Property="Height" Value="50"/>
<Setter Property="Background" Value="White"/>
<Setter Property="LayoutTransform">
<Setter.Value>
<ScaleTransform CenterX="15" CenterY="25"/>
<!--변화시길 기준좌표값-->
</Setter.Value>
</Setter>
<Style.Triggers>
<EventTrigger RoutedEvent="Button.MouseEnter">
<BeginStoryboard HandoffBehavior="Compose">
<!--Compose : 각 개체의 크기가 변할때 다른 개체를 가리지 않도록-->
<Storyboard>
<DoubleAnimation
Storyboard.TargetProperty="LayoutTransform.ScaleX"
Duration="0:0:.5"
From="1" To="2"
FillBehavior="Stop"
AutoReverse="True"/>
<DoubleAnimation
Storyboard.TargetProperty="LayoutTransform.ScaleY"
Duration="0:0:.5"
From="1" To="2"
FillBehavior="Stop"
AutoReverse="True"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
<EventTrigger RoutedEvent="Button.Click">
<BeginStoryboard>
<Storyboard>
<ColorAnimation
Storyboard.TargetProperty="Background.Color"
Duration="0:0:1"
From="White" To="Orange"
FillBehavior="Stop"
AutoReverse="True"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Style.Triggers>
</Style>
</Window.Resources>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Center" VerticalAlignment="Center">
<Button>0</Button>
<Button>1</Button>
<Button>2</Button>
<Button>3</Button>
<Button>4</Button>
<Button>5</Button>
<Button>6</Button>
<Button>7</Button>
<Button>8</Button>
<Button>9</Button>
</StackPanel>
<Window.Resources>
<LinearGradientBrush x:Key="gBrush" StartPoint="0,0" EndPoint="0,1">
<GradientStop Offset="0" Color="Gray"/>
<GradientStop Offset="0.3" Color="#FF222222"/>
<GradientStop Offset="0.3" Color="Black"/>
<GradientStop Offset="0.9" Color="Black"/>
<GradientStop Offset="0.9" Color="#FF222222"/>
<GradientStop Offset="1" Color="Gray"/>
</LinearGradientBrush>
<ScaleTransform x:Key="sTransform" ScaleX="3" ScaleY="{Binding RelativeSource={RelativeSource Self}, Path=ScaleX}"/><!--ScaleX와 ScaleY 바인딩-->
</Window.Resources>
<Grid ShowGridLines="True"><!--3행2열-->
<Grid.RowDefinitions>
<RowDefinition Height="50"/>
<RowDefinition Height="*"/>
<RowDefinition Height="55"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="70"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<!--실제내용-->
<Rectangle Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2" Fill="{StaticResource gBrush}"/>
<Rectangle Grid.Row="2" Grid.Column="0" Grid.ColumnSpan="2" Fill="{StaticResource gBrush}"/>
<Grid Grid.Row="1" Grid.Column="0" Background="White">
<Slider Margin="20" Orientation="Vertical" Minimum="1" Maximum="10" Height="100"
Name="slider" Value="{Binding Path=ScaleX, Source={StaticResource sTransform}, Mode=TwoWay}"/>
<!--역방향바인딩 : 영향을 주는 Slider쪽에서 Binding구현 -->
<!--양방향바인딩( two way : 서로가 서로에 영향을 줌) -->
</Grid>
<!--ScrollViewer.HorizontalScrollBarVisibility="Disabled" : 가로로 overflow생겨도
스크롤바 안생기게-->
<ListBox x:Name="pictureBox" Background="AliceBlue" Grid.Row="1" Grid.Column="1"
ScrollViewer.HorizontalScrollBarVisibility="Disabled">
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel /><!--자동개행-->
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<!--이미지 추가-->
<Image Source="D:\[06]WPF\Day03\Day03\bin\Debug\image\Autumn Leaves.jpg"
Margin="3,8" Height="35" LayoutTransform="{StaticResource sTransform}"/>
<!--나머지이미지 생략-->
</ListBox></Grid>
초기화면 : 양방향바인딩되서 Slider의 초기위치가 ScaleX값만큼 올라가있다.
<!--다수의 속성을 같은 값으로 변화시키고 싶을때-->
<!--Height값을 Width값과 Binding시키고 Width만 DoubleAnimation-->
<Ellipse HorizontalAlignment="Center" VerticalAlignment="Center" Width="48"
Height="{Binding RelativeSource={RelativeSource self}, Path=Width}" Fill="Pink">
<Ellipse.Triggers>
<EventTrigger RoutedEvent="Ellipse.MouseDown">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation
Storyboard.TargetProperty="Width"
From="48" To="300"
Duration="0:0:.5"
RepeatBehavior="3x"
FillBehavior="Stop"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Ellipse.Triggers>
</Ellipse>
</Grid>
<TextBlock Text="XAML" FontSize="150pt" FontFamily="Arial Black"
HorizontalAlignment="Center" VerticalAlignment="Center" RenderTransformOrigin=".5,.5">
<TextBlock.RenderTransform> <!--프로퍼티엘리먼트(속성) -데이터를 한개만 가질 수 있음-->
<TransformGroup> <!--동시에 두개이상의 변형을 주려할때 사용-->
<RotateTransform x:Name="xformRotate"/> <!--Transform객체에도 이름지정 가능-->
<ScaleTransform x:Name="xformScale"/>
</TransformGroup>
</TextBlock.RenderTransform>
<TextBlock.Triggers>
<EventTrigger RoutedEvent="TextBlock.MouseDown">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation
Storyboard.TargetName="xformRotate"
Storyboard.TargetProperty="Angle"
From="0" To="360"
Duration="0:0:5"
RepeatBehavior="Forever"/>
<DoubleAnimation
Storyboard.TargetName="xformScale"
Storyboard.TargetProperty="ScaleX"
From="-1" To="1"
Duration="0:0:3"
RepeatBehavior="Forever"
AutoReverse="True"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</TextBlock.Triggers>
</TextBlock>
<Grid>
<Grid.Resources>
<Style TargetType="{x:Type Ellipse}">
<Setter Property="VerticalAlignment" Value="Center"/>
<Setter Property="HorizontalAlignment" Value="Center"/>
<Setter Property="Width" Value="10"/>
<Setter Property="Height" Value="10"/>
<Setter Property="StrokeThickness" Value="2"/>
<Style.Triggers>
<!--TargetType="{x:Type Ellipse}"라고 명시해줬기때문에 Ellipse.Loaded로 안써도 된다-->
<EventTrigger RoutedEvent="Loaded">
<BeginStoryboard>
<!--모든 이벤트에 같은 속성을 적용시켜줄경우 여기에 명시해도 된다-->
<Storyboard FillBehavior="Stop" RepeatBehavior="Forever">
<DoubleAnimation
From="0" To="300"
Storyboard.TargetProperty="Width"
Duration="0:0:5"/>
<DoubleAnimation
From="0" To="300"
Storyboard.TargetProperty="Height"
Duration="0:0:5"/>
<DoubleAnimation
From="1" To="0"
Storyboard.TargetProperty="Opacity"
Duration="0:0:5"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Style.Triggers>
</Style>
</Grid.Resources>
<Ellipse Stroke="red" Margin="20,0,0,0"/>
<Ellipse Stroke="Orange" Margin="0,10,0,0"/>
<Ellipse Stroke="Yellow" Margin="0,0,20,0"/>
<Ellipse Stroke="Green" Margin="0,0,0,30"/>
<Ellipse Stroke="Blue" Margin="0,0,0,0"/>
<Ellipse Stroke="DarkBlue" Margin="0,30,10,0"/>
<Ellipse Stroke="Purple" Margin="30,0,0,10"/>
</Grid>
<Canvas Name="canvas1">
<Ellipse Width="48" Height="48" Fill="Blue" Name="ball" Canvas.Left="0" Canvas.Top="0"/>
<Canvas.Triggers>
<EventTrigger RoutedEvent="Canvas.SizeChanged">
<!--Canvas Size가 바뀔때(폼사이즈 변경시 canvas사이즈도 변경됨)-->
<BeginStoryboard>
<Storyboard><!--움직이는 영역의 To값을 canvas의 크기로 바운딩-->
<DoubleAnimation<!--Left값 변경-->
Storyboard.TargetName="ball"
Storyboard.TargetProperty="(Canvas.Left)"
<!--Ball이 움직이는 마지막 Left값을 Canvas의 현재Width값으로 바인딩-->
From="0" To="{Binding ElementName=canvas1, Path=ActualWidth}"
Duration="0:0:2"
AutoReverse="True"
RepeatBehavior="Forever"/>
<DoubleAnimation<!--Right값 변경-->
Storyboard.TargetName="ball"
Storyboard.TargetProperty="(Canvas.Top)"
<!--Ball이 움직이는 마지막 Top값을 Canvas의 현재Height값으로 바인딩-->
From="0" To="{Binding ElementName=canvas1, Path=ActualHeight}"
Duration="0:0:2"
AutoReverse="True"
RepeatBehavior="Forever"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Canvas.Triggers></Canvas>
<!--컨트롤전체에 Trigger일괄적용-->
<Window.Resources>
<Style TargetType="{x:Type Button}">
<Setter Property="HorizontalAlignment" Value="Center"/><!--적용할속성-->
<Setter Property="FontSize" Value="12"/>
<Style.Triggers>
<!--MouseEnter-->
<EventTrigger RoutedEvent="Button.MouseEnter">
<BeginStoryboard HandoffBehavior="Compose">
<!--HandoffBehavior="Compose" : 다른이벤트에 간섭을 덜 받는다(?)-->
<Storyboard>
<DoubleAnimation
Storyboard.TargetProperty="FontSize"
To="48"
Duration="0:0:1"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
<!--MouseLeave-->
<EventTrigger RoutedEvent="Button.MouseLeave">
<BeginStoryboard HandoffBehavior="Compose">
<Storyboard>
<DoubleAnimation
Storyboard.TargetProperty="FontSize"
To="12"
Duration="0:0:1"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Style.Triggers>
</Style></Window.Resources>
<Window x:Class="Day02.Ex21"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Ex21" Height="300" Width="300" Name="window1" Background="White">
<!--<Window>의 이름과 기본배경 설정-->
<StackPanel HorizontalAlignment="Center" VerticalAlignment="Center">
<RadioButton Content="Red">
<RadioButton.Triggers>
<EventTrigger RoutedEvent="RadioButton.Checked">
<BeginStoryboard>
<Storyboard>
<ColorAnimation
Storyboard.TargetName="window1"
Storyboard.TargetProperty="Background.Color"
<!--<window1>의 background를 변경하는게 아니라
<background><solidbrush>를 변경해야하므로-->
To="Red" AutoReverse="True" RepeatBehavior="3x"
Duration="0:0:1"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</RadioButton.Triggers>
</RadioButton>
</StackPanel>
</Window>
<Canvas><Ellipse Width="50" Height="50" Fill="Red" Canvas.Left="0" Canvas.Top="0">
<Ellipse.Triggers><!--click이벤트는 지원x-->
<EventTrigger RoutedEvent="Ellipse.MouseDown">
<BeginStoryboard>
<Storyboard SpeedRatio="1">
<!--SpeedRatio : 애니메이션 진행속도 - "1"이면 1배속-->
<DoubleAnimation
Storyboard.TargetProperty="(Canvas.Left)"
From="0" To="250"
Duration="0:0:3"
AutoReverse="True"
RepeatBehavior="5x"/>
<DoubleAnimation
Storyboard.TargetProperty="(Canvas.Top)"
From="0" To="450"
Duration="0:0:1"
AutoReverse="True"
RepeatBehavior="5x"
AccelerationRatio="1"/>
<!--AccelerationRatio : 0~1(디폴트0) 증가하는 속도(비율) 바닥으로 갈수록 빨라짐(중력이 있는듯)-->
<!--DeccelerationRatio : AccelerationRatio와 반대로 위쪽으로 갈수록 빨라짐(역중력느낌?)-->
</Storyboard>
</BeginStoryboard>
</EventTrigger></Ellipse.Triggers></Ellipse></Canvas>
RECENT COMMENT