网站开发的项目背景遵义市营商环境建设局网站

从 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 实现

---