WPF迁移avalonia之触发器

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

Trigger

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

WPF写法：

cs 复制代码

<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写法：

cs 复制代码

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

EventTrigger

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

WPF写法：

cs 复制代码

<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中的写法

cs 复制代码

<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属性，属性变化进而影响触发。

cs 复制代码

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中写法

cs 复制代码

<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后台写法

cs 复制代码

[ObservableProperty]
bool flag;

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

MultiTrigger

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

cs 复制代码

<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中的写法

cs 复制代码

<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>