<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);//실행
}
<StackPanel>
<Label Content="AngleX"/>
<ScrollBar Name="xScroll" Orientation="Horizontal" Minimum="-90" Maximum="90" Value="0"/>
<TextBlock HorizontalAlignment="Center" Margin="12" Text="{Binding ElementName=xScroll, Path=Value}"/>
<Label Content="AngleY"/>
<ScrollBar Name="yScroll" Orientation="Horizontal" Minimum="-90" Maximum="90" Value="0"/>
<TextBlock HorizontalAlignment="Center" Margin="12" Text="{Binding ElementName=yScroll, Path=Value}"/>
<Label Content="CenterX"/>
<ScrollBar Name="xCenter" Orientation="Horizontal" Minimum="-100" Maximum="100" Value="0"/>
<TextBlock HorizontalAlignment="Center" Margin="12" Text="{Binding ElementName=xCenter, Path=Value}"/>
<Label Content="CenterY"/>
<ScrollBar Name="yCenter" Orientation="Horizontal" Minimum="-100" Maximum="100" Value="0"/>
<TextBlock HorizontalAlignment="Center" Margin="12" Text="{Binding ElementName=yCenter, Path=Value}"/>
<Canvas>
<Line X1="100" Y1="0" X2="100" Y2="1000" Stroke="Black"/>
<Line X1="0" Y1="100" X2="1000" Y2="100" Stroke="Black"/>
<Button Name="btn1" Content="버튼" Canvas.Left="100" Canvas.Top="100">
<Button.RenderTransform>
<SkewTransform AngleX="{Binding ElementName=xScroll, Path=Value}"
AngleY="{Binding ElementName=yScroll, Path=Value}"
CenterX="{Binding ElementName=xCenter, Path=Value}"
CenterY="{Binding ElementName=yCenter, Path=Value}" />
</Button.RenderTransform>
</Button>
</Canvas>
<Button Click="Button_Click">클릭</Button><!--C#에서 Transform줄때-->
</StackPanel>
=======
이벤트
private void Button_Click(object sender, RoutedEventArgs e)
{
btn1.RenderTransformOrigin = new Point(0, 0); //Origin
btn1.RenderTransform = new RotateTransform(45); //Transform
}
<Grid>
<!--Plyline = 다중라인-->
<!--Plyline의 속성을 바인딩시키기-->
<Polyline Margin="0.5in, 1.5in,0,0" Points="50 0, 400 25, 50 50" VerticalAlignment="Center"
Stroke="Blue" StrokeThickness=
"{Binding ElementName=sliderThickness, Path=Value}"
StrokeStartLineCap=
"{Binding ElementName=listBoxStartLineCap, Path=SelectedItem.Content}"
StrokeEndLineCap=
"{Binding ElementName=listBoxEndLineCap, Path=SelectedItem.Content}"
StrokeLineJoin=
"{Binding ElementName=listBoxLineJoin, Path=SelectedItem.Content}"
StrokeMiterLimit=
"{Binding ElementName=sliderMiterLimit, Path=Value}"/>
<StackPanel Grid.Column="0" Margin="0,12,0,0" Orientation="Horizontal">
<StackPanel.Resources>
<Style x:Key="uiGroup">
<Setter Property="StackPanel.VerticalAlignment" Value="Top" />
<Setter Property="StackPanel.Width" Value="100" />
<Setter Property="StackPanel.Height" Value="12,0,12,0" />
</Style>
</StackPanel.Resources>
<!--StrockThickness 바인딩-->
<StackPanel Style="{StaticResource uiGroup}">
<Label Content="_Thickness"/>
<Slider Name="sliderThickness" Minimum="0" Maximum="100" Value="24"/>
</StackPanel>
<!--StrokeStartLineCap 바인딩-->
<!--시작점-->
<StackPanel Style="{StaticResource uiGroup}">
<Label Content="_StartLineCap"/>
<ListBox Name="listBoxStartLineCap">
<ListBoxItem Content="{x:Static PenLineCap.Flat}"/>
<!-- {}안 : 특정속성/자료값등을 얻어올때 쓰는 표현-->
<ListBoxItem Content="{x:Static PenLineCap.Square}"/>
<ListBoxItem Content="{x:Static PenLineCap.Round}"/>
<ListBoxItem Content="{x:Static PenLineCap.Triangle}"/>
</ListBox>
</StackPanel>
<!--끝점-->
<StackPanel Style="{StaticResource uiGroup}">
<Label Content="_EndLineCap"/>
<ListBox Name="listBoxEndLineCap">
<ListBoxItem Content="{x:Static PenLineCap.Flat}"/>
<ListBoxItem Content="{x:Static PenLineCap.Square}"/>
<ListBoxItem Content="{x:Static PenLineCap.Round}"/>
<ListBoxItem Content="{x:Static PenLineCap.Triangle}"/>
</ListBox>
</StackPanel>
<!--StrokeLineJoin 바인딩-->
<StackPanel Style="{StaticResource uiGroup}">
<Label Content="_LineJoin"/>
<ListBox Name="listBoxLineJoin">
<ListBoxItem Content="{x:Static PenLineJoin.Bevel}"/>
<ListBoxItem Content="{x:Static PenLineJoin.Round}"/>
<ListBoxItem Content="{x:Static PenLineJoin.Miter}"/>
</ListBox>
</StackPanel>
<!--StrockMiterLimit 바인딩-->
<StackPanel Style="{StaticResource uiGroup}">
<Label Content="_MiterLimit"/>
<Slider Name="sliderMiterLimit" Minimum="0" Maximum="100" Value="10"/>
</StackPanel>
</StackPanel>
</Grid>
<StackPanel>
<!--데이터바인딩-->
<!--스크롤바가 움직일때 마다 위치를 label에 넣기-->
<!--ValueChanged에 이벤트를 걸고 C#에서 처리-->
<Label Name="label1" HorizontalAlignment="Center"/>
<ScrollBar Name="scroll1" Orientation="Horizontal" Margin="20" Minimum="1" Maximum="100"
LargeChange="10" SmallChange="1" ValueChanged="scroll1_ValueChanged"/>
<!--데이터바인딩 이용-->
<Label Name="label2" HorizontalAlignment="Center" Content="{Binding ElementName = scroll2, Path = Value}"/>
<Button FontSize="{Binding ElementName = scroll2, Path = Value}">버튼</Button>
<ScrollBar Name="scroll2" Orientation="Horizontal" Margin="20" Minimum="1" Maximum="100"
LargeChange="10" SmallChange="1" />
<TextBox Name="txt1"/>
<TextBox Name="txt2" Text="{Binding ElementName=txt1, Path=Text}"/>
<!--바인딩되어 txt2는 txt1에 종속적이 되버림-->
</StackPanel>
============================================================================
이벤트
private void scroll1_ValueChanged(object sender,
RoutedPropertyChangedEventArgs<double> e)
{
label1.Content = scroll1.Value;
}
RECENT COMMENT