從 WPF 到 Avalonia 的遷移系列實戰篇7：EventTrigger 的遷移

在 WPF 中，EventTrigger 是非常常用的功能，它可以讓我們直接在 XAML 中綁定事件與動畫或動作，實現 UI 的交互效果。例如按鈕點擊時旋轉、鼠標懸停時變色等。

然而，Avalonia 與 WPF 在事件觸發機制上有所不同，直接遷移 WPF 的 EventTrigger 是行不通的，需要一些替代方案。Avalonia 中的過渡效果受到 CSS 動畫的啟發，它監聽目標屬性值的變化，并根據參數對變化進行動畫處理。下面通過一個簡單示例展示遷移思路：

---

1?? WPF 實現（原版 EventTrigger）

<ButtonBackground="{StaticResource PrimaryColorBrush}"Content="EventTrigger"FontSize="{StaticResource DefaultFontSize}"FontWeight="{StaticResource BoldFontWeight}"Foreground="DodgerBlue"Grid.Column="0"Grid.Row="3"Height="80"HorizontalAlignment="Center"RenderTransformOrigin="0.5,0.5"Style="{StaticResource RoundedButtonStyle}"VerticalAlignment="Center"Width="300"><Button.RenderTransform><RotateTransform Angle="0" /></Button.RenderTransform><Button.Triggers><EventTrigger RoutedEvent="Button.MouseEnter"><BeginStoryboard><Storyboard FillBehavior="Stop" RepeatBehavior="Forever"><ColorAnimationDuration="0:0:0.2"Storyboard.TargetProperty="(Button.Foreground).(SolidColorBrush.Color)"To="Red" /></Storyboard></BeginStoryboard></EventTrigger><EventTrigger RoutedEvent="Button.MouseLeave"><BeginStoryboard><Storyboard><ColorAnimationDuration="0:0:0.5"Storyboard.TargetProperty="(Button.Foreground).(SolidColorBrush.Color)"To="DodgerBlue" /></Storyboard></BeginStoryboard></EventTrigger><EventTrigger RoutedEvent="Button.Click"><BeginStoryboard><Storyboard><DoubleAnimationBy="360"Duration="0:0:0.5"Storyboard.TargetProperty="(Button.RenderTransform).(RotateTransform.Angle)" /></Storyboard></BeginStoryboard></EventTrigger></Button.Triggers>
</Button>

? 說明：

• 鼠標懸停時文字變紅，離開恢復藍色。
• 點擊時按鈕旋轉 360°。
• WPF 可以直接通過 EventTrigger + Storyboard 寫在 XAML 中。

---

2?? Avalonia 實現（遷移示例）

<ButtonBackground="{StaticResource PrimaryColorBrush}"Classes="rounded"Content="EventTrigger"FontSize="{StaticResource DefaultFontSize}"FontWeight="{StaticResource BoldFontWeight}"Foreground="DodgerBlue"Grid.Column="1"Grid.Row="2"Height="80"HorizontalAlignment="Center"VerticalAlignment="Center"Width="300"><Button.Transitions><Transitions><TransformOperationsTransition Duration="0:0:0.2" Property="RenderTransform" /></Transitions></Button.Transitions><Button.Styles><!-- 鼠標懸停變色 --><Style Selector="Button:pointerover"><Style.Animations><Animation Duration="0:0:0.5" IterationCount="Infinite"><KeyFrame Cue="0%"><Setter Property="Foreground" Value="DodgerBlue" /></KeyFrame><KeyFrame Cue="100%"><Setter Property="Foreground" Value="Red" /></KeyFrame></Animation></Style.Animations></Style><!-- 鼠標懸停按下旋轉 --><Style Selector="Button:pointerover:pressed"><Setter Property="RenderTransform" Value="rotate(360deg)" /></Style></Button.Styles>
</Button>

? 說明：

• Avalonia 使用 Transitions + Animations + 樣式選擇器 來替代 WPF 的 EventTrigger。
• Button:pointerover 類似 CSS 的 :hover，控制鼠標懸停動畫。
• Button:pointerover:pressed 類似 CSS 的 :hover:active，處理點擊旋轉。
• 更復雜的點擊動畫（如連續旋轉、平滑緩動）需要結合 C# 動畫 API 實現。

---

3?? 遷移思路總結

1. EventTrigger 事件觸發 → 樣式選擇器 + Transitions/Animation
2. WPF Storyboard → Avalonia Animation + KeyFrame
3. 鼠標懸停、按下效果可以直接用 Avalonia 的偽狀態選擇器 pointerover / pressed 實現
4. 復雜動畫（連續旋轉、組合動畫）建議在 View 或 ViewModel 中用 Animation.RunAsync 實現

---