Avalonia跨平台上位机控件开发之水泵

随着国产化的推进，越来越多的开发者选择使用跨平台的框架来创建上位机应用，而Avalonia正是一个优秀的选择。本文将探讨如何利用Avalonia框架进行水泵控件的开发，并重点记录在开发的过程中所碰到的一些问题。

控件的构成

水泵控件主要在控件的内部需要创建一个旋转的动画来表示水泵当前的运行状态，在没有工作时为静止状态没有任何动画，当水泵启动时会对中间的部分进行连续的旋转。运行效果如下：

动画的创建

在控件中为了方便控制旋转动画的编写，我这边使用了一个Canvas将需要旋转的部分包裹在其中，这样在制作动画的时候直接对这个Canvas进行旋转就可以了，否则要旋转部分的Path的坐标数据为相对于最外层Canvas的坐标进行绘制，此时要找到旋转中心是一个很困难的事情。同时为这个Canvas指定了一个名称，方便后续在制作动画时的Selector处理。

<Canvas
        Canvas.Left="19.5"
        Canvas.Top="39.5"
        Height="34.5"
        Name="BumpCircle"
        UseLayoutRounding="False"
        Width="34.2">
        <Path
                Fill="#ffffffff"
                Stroke="#ff6c6c6c"
                StrokeJoin="Miter"
                StrokeThickness="2.05166">
                      <Path.Data>
                      		<PathGeometry Figures="M 11.3573 15.4557 C 6.78011 13.3704 4.04416 9.6096 3.14943 4.1733 M 11.3573 19.7314 C 6.82241 21.3797 2.37649 20.6383 -1.98048 17.5071 M 15.4612 22.6354 C 13.3753 27.2112 9.61334 29.9464 4.17541 30.8408 M 19.7381 22.6354 c 1.64889 4.53351 0.907239 8.97809 -2.22494 13.3338 m 5.12991 -17.4365 c 4.57717 2.08531 7.31313 5.84611 8.20786 11.2824 M 22.6431 14.2571 c 4.53487 -1.64839 8.98079 -0.906966 13.3378 2.22428 M 18.5392 11.353 c 2.08594 -4.5758 5.84787 -7.31093 11.2858 -8.20539 m -15.5627 8.20539 c -1.64889 -4.53351 -0.907239 -8.97809 2.22494 -13.3338 m 4.50314 14.9864 c 2.20369 2.20302 2.20369 5.77484 0 7.97786 c -2.20369 2.20302 -5.77658 2.20302 -7.98027 0 c -2.20369 -2.20302 -2.20369 -5.77484 0 -7.97786 c 2.20369 -2.20302 5.77658 -2.20302 7.98027 0 m 9.43124 -9.4284 c 7.41241 7.41018 7.41241 19.4245 0 26.8347 c -7.41241 7.41019 -19.4304 7.41019 -26.8428 0 c -7.41241 -7.41018 -7.41241 -19.4245 0 -26.8347 c 7.41241 -7.41019 19.4304 -7.41019 26.8428 0" />
                          </Path.Data>
            </Path>
</Canvas>

动画的部分定义了一个伪类running，用来表示当前水泵已经处在了运行状态。因此在进行动画编写的时候先使用一下Selector选择伪类为running

<Style Selector="controls|Pump.running">

然后需要选择到我们需要需要进行动画的部分，使用如下的Selector进行选择

<Style Selector="^ /template/ Canvas#BumpCircle">

^ : 继承上一层Selector
/template/ ：进入到控件内部的Template
Canvas#BumpCircle：选择名字为BumpCircle的Canvas

使用Selector选择到需要动画的控件部分后就可以进行动画的编写，动画的完整代码如下：

<Style Selector="controls|Pump.running">
  <Style Selector="^ /template/ Canvas#BumpCircle">
    <Style.Animations>
      <Animation Duration="0:0:5" IterationCount="INFINITE">
        <KeyFrame Cue="0%">
          <Setter Property="RotateTransform.Angle" Value="0" />
        </KeyFrame>
        <KeyFrame Cue="100%">
          <Setter Property="RotateTransform.Angle" Value="360" />
        </KeyFrame>
      </Animation>
    </Style.Animations>
  </Style>
</Style>

以上代码创建了一个0到360度的旋转动画。

踩到的坑

创建伪类时的一个小知识点

当在avalonia中使用伪类的时候经常会碰到:pointerover等内置的一些伪类，而要使用Selector来选择这些伪类的时候通常我们会使用

<Style Selector="Button:pointerover"/>

但是当我们定义了一个自定义的伪类时，比如上面控件用到的running，此时我们在使用Selector的时候需要使用如下格式

<Style Selector="Pump.running"/>

在平时的开发中要注意以上的一些不同

在属性改变时为控件添加伪类

为了表示控件的运行状态，我在控件的C#代码中添加了一个名为Running的StyledProperty，用这个属性来区分水泵的运行状态，因此我需要在Running属性进行修改的时候为控件添加或移除running伪类。而为了方便测试我将这个Running绑定至了Checkbox的IsChecked属性，代码如下：

<CheckBox
          Canvas.Left="600"
          Canvas.Top="250"
          Name="CheckBox">
  运行状态
</CheckBox>

<controls:Pump
               Canvas.Left="600"
               Canvas.Top="100"
               Height="100"
               Running="{Binding #CheckBox.IsChecked}"
               Width="100" />

开始时我将伪类的创建与移除代码编写在Runing属性的set中进行处理，代码如下：

    public bool? Running
    {
        get => GetValue(RunningProperty);
        set
        {
            SetValue(RunningProperty, value);
            if (value == true)
            {
                PseudoClasses.Add("running");
            }
            else
            {
                PseudoClasses.Remove("running");
            }
        }
    }

但是以上的代码在CheckBox的IsChecked属性变更时并没有办法触发到set方法，导致动画无法被触发。

经过一段时间的摸索正确的做法为在OnPropertyChanged方法中进行相关的处理，代码如下：

    protected override void OnPropertyChanged(AvaloniaPropertyChangedEventArgs change)
    {
        base.OnPropertyChanged(change);

        if (change.Property == RunningProperty)
        {
            if (change.NewValue != null && (bool)change.NewValue)
            {
                PseudoClasses.Add("running");
            }
            else
            {
                PseudoClasses.Remove("running");
            }
        } 
    }