[WPF 學習] 10.觸發器
阿新 • • 發佈:2020-04-22
原文:[WPF 學習] 10.觸發器
一、屬性觸發器
要改變的屬性值不能再控制元件裡面設定初始值,否則不能觸發,如下例的Width
<Rectangle Height="100" Fill="Black" Name="R1" RenderTransformOrigin="0.5,0.5">
<Rectangle.RenderTransform>
<RotateTransform></RotateTransform>
</Rectangle.RenderTransform >
<Rectangle.Style>
<Style TargetType="Rectangle">
<Setter Property="Width" Value="100"></Setter>
<Style.Triggers>
<Trigger Property="Fill" Value="Black">
<Trigger.EnterActions >
<BeginStoryboard>
<Storyboard RepeatBehavior="Forever" >
<DoubleAnimation Storyboard.TargetProperty="Height" From="100" To="200" Duration="0:0:1"></DoubleAnimation>
<DoubleAnimation Storyboard.TargetProperty="(Rectangle.RenderTransform).(RotateTransform.Angle)" From="0" To="360" Duration="0:0:1"></DoubleAnimation>
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
<Setter Property="Width" Value="200"></Setter>
</Trigger>
</Style.Triggers>
</Style>
</Rectangle.Style>
</Rectangle>
二、資料觸發器
相比對屬性觸發器而言,他可以繫結其他控制元件的屬性或者ViewModel裡面的屬性
<Rectangle Width="200" Name="R2" Fill="Green" RenderTransformOrigin="0.5,0.5">
<Rectangle.RenderTransform >
<RotateTransform x:Name="R2RT" Angle="0"></RotateTransform>
</Rectangle.RenderTransform>
<Rectangle.Style>
<Style TargetType="Rectangle">
<Setter Property="Height" Value="100"></Setter>
<Style.Triggers>
<DataTrigger Binding="{Binding ElementName=R1,Path=Fill}" Value="Black">
<Setter Property="Height" Value="200"></Setter>
<DataTrigger.EnterActions>
<BeginStoryboard>
<Storyboard RepeatBehavior="Forever" >
<DoubleAnimation Storyboard.TargetProperty="(Rectangle.RenderTransform).(RotateTransform.Angle)" From="0" To="360" Duration="0:0:1"></DoubleAnimation>
</Storyboard>
</BeginStoryboard>
</DataTrigger.EnterActions>
</DataTrigger>
</Style.Triggers>
</Style>
</Rectangle.Style>
</Rectangle>
三、事件觸發器
- 只能觸發故事板(不知道是否正確)
- 分為控制元件觸發器和樣式觸發器(這兩個名字自己取的,也不知道有沒有官方說法)
控制元件觸發器( Storyboard.TargetName似乎專為它服務)
<Rectangle Width="200" Height="200" Name="R3" RenderTransformOrigin="0.5,0.5" Fill="Yellow">
<Rectangle.RenderTransform>
<RotateTransform x:Name="R3RT"></RotateTransform>
</Rectangle.RenderTransform>
<Rectangle.Triggers>
<EventTrigger RoutedEvent="Mouse.MouseEnter">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetName="R2RT" Storyboard.TargetProperty="Angle" From="0" To="360" RepeatBehavior="Forever" Duration="0:0:1"></DoubleAnimation>
<DoubleAnimation Storyboard.TargetName="R3RT" Storyboard.TargetProperty="Angle" From="0" To="360" RepeatBehavior="Forever" Duration="0:0:1"></DoubleAnimation>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Rectangle.Triggers>
</Rectangle>
樣式觸發器
<Rectangle Width="200" Height="200" Name="R4" RenderTransformOrigin="0.5,0.5" Fill="Yellow">
<Rectangle.RenderTransform>
<RotateTransform x:Name="R4RT"></RotateTransform>
</Rectangle.RenderTransform>
<Rectangle.Style>
<Style TargetType="Rectangle">
<Style.Triggers>
<EventTrigger RoutedEvent="Mouse.MouseEnter">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="(Rectangle.RenderTransform).(RotateTransform.Angle)" From="0" To="360" RepeatBehavior="Forever" Duration="0:0:1"></DoubleAnimation>
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
</Style.Triggers>
</Style>
</Rectangle.Style>
</Rectangle>