当前位置：首页 > news >正文

WPF迁移avalonia之触发器

news 2025/9/11 6:45:09

在WPF中经常有使用前台的触发器，常见的有Trigger，EventTrigger，DataTrigger，MultiTrigger等常用事件触发器，但是在WPF迁移至Avalonia平台时，由于avalonia前端界面写法与WPF有较大差异，给部分对avalonia还不太熟悉的人造成困扰。从个人经验角度，提供以下解决方案，仅供参考。

Trigger

属性触发器:在WPF中，Trigger是基于控件属性值的条件触发器。而Avalonia推荐使用选择器（Selector）来实现类似功能，如":pointerover"伪类。

WPF写法：

<Ellipse><Ellipse.Style><Style TargetType="Ellipse" BasedOn="{StaticResource {x:Type Ellipse}}"><Style.Triggers><Trigger Property="IsMouseOver" Value="True"><Setter Property="Fill" Value="Coral" /></Trigger></Style.Triggers></Style></Ellipse.Style>
</Ellipse>

avalonia写法：

 <Ellipse><Ellipse.Styles><Style Selector="Ellipse:pointerover"><Setter Property="Fill" Value="Coral" /></Style></Ellipse.Styles></Ellipse>

EventTrigger

事件触发器（EventTrigger），在WPF中，EventTrigger用于响应事件（比如Loaded、Click），一般配合BeginStoryboard使用。

WPF写法：

<Ellipse Margin="0,10,0,0"><Ellipse.Style><Style TargetType="Ellipse" BasedOn="{StaticResource {x:Type Ellipse}}"><Style.Triggers><EventTrigger RoutedEvent="MouseEnter"><BeginStoryboard><Storyboard><ColorAnimation Storyboard.TargetProperty="(Ellipse.Fill).(SolidColorBrush.Color)" To="Coral" Duration="0:0:0.35" /></Storyboard></BeginStoryboard></EventTrigger><EventTrigger RoutedEvent="MouseLeave"><BeginStoryboard><Storyboard><ColorAnimation Storyboard.TargetProperty="(Ellipse.Fill).(SolidColorBrush.Color)" To="LightGreen" Duration="0:0:0.35" /></Storyboard></BeginStoryboard></EventTrigger></Style.Triggers></Style></Ellipse.Style></Ellipse>

avalonia中的写法

<Ellipse><Ellipse.Styles><Style Selector="Ellipse:pointerover"><Setter Property="Fill" Value="Coral" /></Style></Ellipse.Styles>参考CSS3的过渡(transitions)属性<Ellipse.Transitions><Transitions><BrushTransition Property="Fill" Duration="0:0:0.35" /></Transitions></Ellipse.Transitions>
</Ellipse>

DataTrigger

对于数据触发器（DataTrigger）在WPF中，DataTrigger根据绑定的数据值进行触发。Avalonia中可以添加Avalonia.Xaml.Behaviors包引用，进一步设置触发式事件

WPF中的写法：在当前这个实例中，使用了behaviors，对MouseUp事件绑定命令，该命令修改IsFlag属性，属性变化进而影响触发。

xmlns:b="http://schemas.microsoft.com/xaml/behaviors"
<Ellipse Margin="0,10,0,0"><Ellipse.Style><Style TargetType="Ellipse" BasedOn="{StaticResource {x:Type Ellipse}}"><Style.Triggers><DataTrigger Binding="{Binding IsFlag}" Value="True"><Setter Property="Fill" Value="Coral" /></DataTrigger></Style.Triggers></Style></Ellipse.Style><b:Interaction.Triggers><b:EventTrigger EventName="MouseUp"><b:InvokeCommandAction Command="{Binding FlagCommand}" /></b:EventTrigger></b:Interaction.Triggers>
</Ellipse>

在avalonia中写法

<Ellipse Classes.flag="{Binding Flag}"><Ellipse.Styles><Style Selector="Ellipse.flag"><Setter Property="Fill" Value="Coral" /></Style></Ellipse.Styles><Interaction.Behaviors><EventTriggerBehavior EventName="PointerPressed"><InvokeCommandAction Command="{Binding FlagCmd}" /></EventTriggerBehavior></Interaction.Behaviors>
</Ellipse>

在avalonia后台写法

[ObservableProperty]
bool flag;[RelayCommand]
public void FlagCmd()
{Flag = !Flag;
}

MultiTrigger

在WPF中，MultiTrigger是多个条件组合的触发器。目前 Avalonia 不支持 MultiTrigger（没有原生组合条件）,考虑用用Selector 的组合伪类。

<Button Content="Submit"><Button.Style><Style TargetType="Button"><Style.Triggers><MultiTrigger><MultiTrigger.Conditions><Condition Property="IsMouseOver" Value="True"/><Condition Property="IsEnabled" Value="True"/></MultiTrigger.Conditions><Setter Property="Foreground" Value="Red"/></MultiTrigger></Style.Triggers></Style></Button.Style>
</Button>

avalonia中的写法

<Button Content="Submit"><Button.Styles><Style Selector="Button"><Setter Property="Width" Value="200" /><Setter Property="Height" Value="120" /><Setter Property="Background" Value="LightGreen" /><Setter Property="HorizontalAlignment" Value="Center" /><Setter Property="BorderThickness" Value="0" /></Style><Style Selector="Button[IsEnabled=True]:pointerover"><Setter Property="Foreground" Value="Red" /></Style></Button.Styles>
</Button>