<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>
<EventTrigger RoutedEvent="Button.Click" SourceName="btn1">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation
Storyboard.TargetName="btn1" Storyboard.TargetProperty="FontSize"
<!--Storyboard.TargetName 은 대상이 다를 경우에 사용한다-->
From="12" To="48"
Duration="0:0:1"
FillBehavior="HoldEnd"
<!--FillBehavior = "Stop" : story진행후 제자리로 돌아옴/ HoleEnd : 최종상태 유지(이게 디폴트)-->
IsAdditive="True"
<!--IsAdditive="True" : 이벤트가 누적됨(계속 커짐) (false가 디폴트)-->
AutoReverse="True"
<!--AutoReverse="True" : 상태가 되돌아 갈때(FillBehavior가 Stop 이여야함) 다시 부드럽게 돌아감-->
RepeatBehavior="3x"/>
<!--BeginTime : 이벤트 호출까지의 시간(첫 호출때만 적용)-->
<!--RepeatBehavior="3x" : 작업 반복/ "1.5x"일 경우는 중간에 멈춤/ "Forever"일 경우는 무한반복. -->
<!--RepeatBehavior="0:0:10" 과 같이 시간을 넣어도 작동됨(그 시간만큼 반복)-->
</Storyboard>
</BeginStoryboard>
</EventTrigger>
<Grid>
<Button FontSize="12" HorizontalAlignment="Center" VerticalAlignment="Center">
<Button.Content>Expanding Button</Button.Content>
<Button.Triggers>
<!--EventTrigger : C#의 이벤트와 가장 비슷한 개념-->
<!--RoutedEvent : 이벤트 종류 설정-->
<EventTrigger RoutedEvent="Button.Click">
<BeginStoryboard><!--애니메이션 사용-->
<Storyboard>
<DoubleAnimation
From="12"
To="72"
Duration="0:0:.5"
Storyboard.TargetProperty="FontSize"/>
<!--수치값변화-->
<!-- 12부터 72까지 0시간0분0.5초동안 FontSize변화-->
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Button.Triggers>
</Button>
</Grid>
c#구현
private double init = 12; //멤버변수
private double max = 72;
private Button btn;
public Trigger()
{
InitializeComponent();
btn = new Button();
btn.Content = "Expanding Button";
btn.FontSize = init;
btn.HorizontalAlignment = HorizontalAlignment.Center; //정렬위치
btn.VerticalAlignment = VerticalAlignment.Center;
btn.Click += new RoutedEventHandler(btn_Click);//Click Event
this.Content = btn;//버튼추가
}
void btn_Click(object sender, RoutedEventArgs e)
{
DoubleAnimation da = new DoubleAnimation(); //DoubleAnimation
da.From = init; //시작값
da.To = max; //끝값
da.Duration = new Duration(TimeSpan.FromSeconds(2));//
btn.BeginAnimation(Button.FontSizeProperty, da);//실행
}
RECENT COMMENT