如何:當屬性值變更時觸發動畫
這個範例示範如何使用 Trigger ,在屬性值變更時啟動 Storyboard 。 您可以在 、 ControlTemplate 或 DataTemplate 內 Style 使用 Trigger 。
範例
下列範例會使用 Trigger ,在其 屬性變成 true
時 IsMouseOver ,以動畫顯示 Opacity 的 Button 。
<!-- PropertyTriggerExample.xaml
Shows how to use property triggers to start animations. -->
<Page
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
WindowTitle="Animate Properties with Storyboards">
<Page.Resources>
<Style x:Key="PropertyTriggerExampleButtonStyle" TargetType="{x:Type Button}">
<Setter Property="Opacity" Value="0.25" />
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Trigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="Opacity"
To="1" Duration="0:0:1" />
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
<Trigger.ExitActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="Opacity"
To="0.25" Duration="0:0:1" />
</Storyboard>
</BeginStoryboard>
</Trigger.ExitActions>
</Trigger>
</Style.Triggers>
</Style>
</Page.Resources>
<StackPanel Margin="20">
<Button Style="{StaticResource PropertyTriggerExampleButtonStyle}">
Move the mouse over me.
</Button>
</StackPanel>
</Page>
屬性 Trigger 物件所套用的動畫行為比 EventTrigger 使用 Storyboard 方法開始的動畫或動畫更為複雜。 它們會以其他 Trigger 物件定義的動畫「交接」,但會使用 EventTrigger 和 方法觸發的動畫來撰寫。
另請參閱
意見反應
https://aka.ms/ContentUserFeedback。
即將登場:在 2024 年,我們將逐步淘汰 GitHub 問題作為內容的意見反應機制,並將它取代為新的意見反應系統。 如需詳細資訊,請參閱:提交並檢視相關的意見反應