즐거운인생

<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>

<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;

}

<!--템플릿을 써서 CheckBox의 모양을 다르게 재정의-->

<Window.Resources>

<ControlTemplate x:Key="switch"TargetType="{x:Type CheckBox}"> <!--쓰기편하게 Type명시-->

<Grid><!--비쥬얼-->

<Grid.RowDefinitions> <!--1행2열 정의-->

<RowDefinition Height="Auto"/>

<RowDefinition Height="Auto"/>

</Grid.RowDefinitions>

<Border Grid.Row="0" Width="96" Height="48" BorderBrush="Black" BorderThickness="1"><!--1행1열-->

<Canvas Background="LightGray">

<TextBlock Canvas.Left="0" Canvas.Top="0" Foreground="Black" Text="0ff" Margin="2" Name="txtOff"/>

<TextBlock Canvas.Left="0" Canvas.Top="0" Foreground="Black" Text="0n" Margin="2" Name="txtOn"/>

<!--x1y1에서 x2y2로 가는 선을 그려줌/ 시작과끝부분은 둥글게/ 검은색에 두께8-->

<Line Name="lineOff" StrokeThickness="8" Stroke="Black" X1="48" Y1="40" X2="20" Y2="16"

StrokeStartLineCap="Round" StrokeEndLineCap="Round"/>

<!--두번째 선은 감춰져서 시작-->

<Line Name="lineOn" StrokeThickness="8" Stroke="Black" X1="48" Y1="40" X2="76" Y2="16"

StrokeStartLineCap="Round" StrokeEndLineCap="Round" Visibility="Hidden"/> 

</Canvas>

</Border>

<!--CheckBox의Content를 가져오기 위해 사용-->

<ContentPresenter Grid.Row="1" Content="{TemplateBinding Content}" HorizontalAlignment="Center"/>

</Grid>

<ControlTemplate.Triggers> <!--이벤트-->

<Trigger Property="IsChecked" Value="True">

<!--TargetName을 정하면 정해진 대상의 Property변경 가능-->

<Setter TargetName="lineOff" Property="Visibility" Value="Hidden"/>

<Setter TargetName="lineOn" Property="Visibility" Value="Visible"/>

<Setter TargetName="txtOff" Property="Visibility" Value="Hidden"/>

<Setter TargetName="txtOn" Property="Visibility" Value="Visible"/>

</Trigger>

</ControlTemplate.Triggers>

</ControlTemplate>

</Window.Resources>

<Grid HorizontalAlignment="Center" VerticalAlignment="Center">

<CheckBox Content="Switch" Template="{StaticResource switch}"></CheckBox>

</Grid>

Check안됐을때

check됐을때

<Window.Resources>

<!--템플릿 : ControlTemplate  >> 컨트롤의 집합을 모아놓고 자원으로 활용-->

<ControlTemplate x:Key="btnTemplate">

<Grid>

<Ellipse Width="100" Height="100"> <!--바깥쪽의 큰원-->

<Ellipse.Fill>

 <!--위에서 아래방향-->

<LinearGradientBrush StartPoint="0,0" EndPoint="0,1">

<GradientStop Offset="0" Color="Blue"/> <!--시작색-->

<GradientStop Offset="1" Color="Red"/> <!--끝색-->

</LinearGradientBrush>

</Ellipse.Fill>

</Ellipse>

<Ellipse Width="80" Height="80"> <!--안쪽은 좀 작은원-->

<Ellipse.Fill>

<LinearGradientBrush StartPoint="0,0" EndPoint="0,1">

<GradientStop Offset="0" Color="White"/>

<GradientStop Offset="1" Color="Transparent"/>

</LinearGradientBrush>

</Ellipse.Fill>

</Ellipse>

</Grid>

<ControlTemplate.Triggers>

<Trigger Property="Button.IsPressed" Value="True">

<!--기준점-->

<Setter Property="RenderTransformOrigin" Value=".5,.5" />

<Setter Property="RenderTransform">

<Setter.Value>

<!--크기를 줄여줌-->

<ScaleTransform ScaleX="0.9" ScaleY="0.9" />

</Setter.Value>

</Setter>

</Trigger>

</ControlTemplate.Triggers>

</ControlTemplate>

</Window.Resources>

<Grid HorizontalAlignment="Center" VerticalAlignment="Center">

<!--버튼이지만 버튼스타일이 아니라 템플릿 안에서 선언된 스타일대로 그려진다-->

<Button Template="{StaticResource btnTemplate}">버튼</Button>

</Grid>

<!--Triggers-->

<Window.Resources>

<!--Type명시하면 Setter에 property에 'Button.'을 빼도 된다-->

<Style x:Key="btnStyle" TargetType="{x:Type Button}">

 <Setter Property="FontSize" Value="22"/>

<Setter Property="Background" Value="yellow"/>

<Setter Property="Width" Value="80"/>

<Setter Property="Height" Value="80"/>

<Setter Property="RenderTransformOrigin" Value=".5,.5"/>

<!--트리거 : 조건을 만족시켰을때 적용할 스타일-->

<!--서식변화를 줄때 많이 사용-->

<Style.Triggers> 

 <!--Button에 MouseOver가 True면 아래문장 처리--><!--스타일의 이벤트같은거-->

<Trigger Property="IsMouseOver" Value="True">

<!--변환은 바로 값을 넣어줄 수 없으므로 아래와 같이 처리-->

<Setter Property="RenderTransform">

<Setter.Value>

<RotateTransform Angle="20"/>

</Setter.Value>

</Setter>                             <!--여기까지가 변환처리-->

<Setter Property="FontSize" Value="30" />

<Setter Property="Foreground" Value="Red"/> 

</Trigger>

<!--두번째 조건 : 버튼이 눌렸을때-->

<Trigger Property="IsPressed" Value="True">

<Setter Property="RenderTransform">

<Setter.Value>

<RotateTransform Angle="-40"/>

</Setter.Value>

</Setter>

<Setter Property="FontSize" Value="45" />

<Setter Property="Foreground" Value="Blue"/>

</Trigger>

</Style.Triggers>

</Style>

</Window.Resources>

<StackPanel Orientation="Horizontal" HorizontalAlignment="Center">

<Button Style="{StaticResource btnStyle}">1</Button>

<Button Style="{StaticResource btnStyle}">2</Button>

<Button Style="{StaticResource btnStyle}">3</Button>

</StackPanel>

 초기상태MouseOver

<StackPanel.Resources> <!--StackPanel내에서만 사용하는 Resource-->

<!--모든버튼에 편하게 일괄적용 but 버튼구별은 못함-->

<Style TargetType="{x:Type Button}">

<Setter Property="Button.Margin" Value="3,3"/>

<Setter Property="Button.Background" Value="yellow"/>

<Setter Property="Button.RenderTransformOrigin" Value="0.5, 0.5"/>

<Setter Property="Button.RenderTransform">

<Setter.Value>

<RotateTransform Angle="20" />

</Setter.Value>

</Setter>

</Style>

<Style x:Key="redStyle">

<Setter Property="Button.Margin" Value="3,3"/>

<Setter Property="Button.Background" Value="red"/>

</Style>

</StackPanel.Resources>

<Button >버튼</Button>

<Button>버튼</Button>

<!--역시나 더 적은 범위의 Style이 적용됨-->

<Button Style="{StaticResource redStyle}">버튼</Button>

<Button>버튼</Button>

<Button>버튼</Button>