【Avalonia】Avalonia的学习笔记以及与WPF的不同点

以下均为初学入门写的一些学习记录，不保证理解都对啊。。。

1.axaml中引用命名空间

xmlns:model="using:IDataTemplateSample.Models"

2.Grid支持行列的简化写法

<Grid RowDefinitions="Auto, Auto, *" ColumnDefinitions="Auto, *"/>

3.DataTemplate 根据DataType自动选择对应类型的样式，使用Window.DataTemplates加载多个DataTemplate自动选择显示不同样式，类似WPF的DataTemplateSelector选择器

<Window.DataTemplates>
        <!--  Add a DataTemplate for a Student  -->
        <!--  Mind the order of the Templates. Begin with the most specific first.  -->
        <DataTemplate DataType="model:Student">
            <StackPanel>
                <TextBlock FontWeight="Bold" Text="{Binding Grade, StringFormat='I am a student in {0}. grade'}" />
                <!--  We re-use the PersonTemplate here by using DynamicResource  -->
                <ContentControl Content="{Binding}" ContentTemplate="{DynamicResource My.DataTemplates.Person}" />
            </StackPanel>
        </DataTemplate>
 
        <!--  Add a DataTemplate for a Teacher  -->
        <DataTemplate DataType="model:Teacher">
            <StackPanel>
                <TextBlock FontWeight="Bold" Text="{Binding Subject, StringFormat='I am a teacher for: &quot;{0}&quot;'}" />
                <!--  We use a UserControl here to display the data  -->
                <view:PersonView />
            </StackPanel>
        </DataTemplate>
 
    </Window.DataTemplates>

 4.前面说使用Window.DataTemplates类似WPF的选择器，实则Avalonia也有选择器

先创建一个选择器，选择器的Key和Datatemplate组成ShapesTemplateSelector的数据，根据DataType的类型然后通过选择器的Build创建出对应的数据模版。 

<Window.DataTemplates>
        <dataTemplates:ShapesTemplateSelector>
            <DataTemplate x:Key="RedCircle" DataType="model:ShapeType">
                <Ellipse Width="50"
                         Height="50"
                         Fill="Red"
                         Stroke="DarkRed"
                         StrokeThickness="2" />
            </DataTemplate>
            <DataTemplate x:Key="BlueCircle" DataType="model:ShapeType">
                <Ellipse Width="50"
                         Height="50"
                         Fill="Blue"
                         Stroke="DarkBlue"
                         StrokeThickness="2" />
            </DataTemplate>
            <DataTemplate x:Key="RedSquare" DataType="model:ShapeType">
                <Rectangle Width="50"
                           Height="50"
                           Fill="Red"
                           Stroke="DarkRed"
                           StrokeThickness="2" />
            </DataTemplate>
            <DataTemplate x:Key="BlueSquare" DataType="model:ShapeType">
                <Rectangle Width="50"
                           Height="50"
                           Fill="Blue"
                           Stroke="DarkBlue"
                           StrokeThickness="2" />
            </DataTemplate>
        </dataTemplates:ShapesTemplateSelector>
    </Window.DataTemplates>

public class ShapesTemplateSelector : IDataTemplate
    {
        // This Dictionary should store our shapes. We mark this as [Content], so we can directly add elements to it later.
        [Content]
        public Dictionary<string, IDataTemplate> AvailableTemplates { get; } = new Dictionary<string, IDataTemplate>();
 
        // Build the DataTemplate here
        public Control Build(object? param)
        {
            var key = param?.ToString(); // Our Keys in the dictionary are strings, so we call .ToString() to get the key to look up
            if (key is null) // If the key is null, we throw an ArgumentNullException
            {
                throw new ArgumentNullException(nameof(param));
            }
            return AvailableTemplates[key].Build(param); // finally we look up the provided key and let the System build the DataTemplate for us
        }
 
        // Check if we can accept the provided data
        public bool Match(object? data)
        {
            // Our Keys in the dictionary are strings, so we call .ToString() to get the key to look up
            var key = data?.ToString();
 
            return data is ShapeType                       // the provided data needs to be our enum type
                   && !string.IsNullOrEmpty(key)           // and the key must not be null or empty
                   && AvailableTemplates.ContainsKey(key); // and the key must be found in our Dictionary
        }
    }

5.可以创建Styles.axaml文件，里面添加多个样式，使用Design.PreviewWith进行样式预览

<Styles xmlns="https://github.com/avaloniaui"
        xmlns:controls="using:RatingControlSample.Controls"
        xmlns:converter="using:RatingControlSample.Converter"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <Design.PreviewWith>
        <StackPanel Spacing="10">
            <controls:RatingControl Value="0" NumberOfStars="5" />
            <controls:RatingControl Value="2" NumberOfStars="5" />
            <controls:RatingControl Value="6" NumberOfStars="6" />
        </StackPanel>
    </Design.PreviewWith>

通过selector定义名字，具体名称="控件名.名称"，不带名字则表示该类控件全部生效

<Style Selector="TextBlock.txt">
      <Setter Property="FontSize" Value="24"/>
      <Setter Property="FontWeight" Value="Bold"/>
</Style>

通过classes来使用样式，支持以空格分割的样式类，可以组合多个样式

<TextBlock Classes="txt xxx yyy" Text="TextBlock"/>

也支持代码增加删除样式：

在其他文件中引用样式，添加StyleInclude进行引用,设置Source属性

 6.样式主题

有时候我们可以需要把多个样式组合起来一起使用， 定义一个主题，比如Dark主题，Light主题、Mac主题、Win主题等

下面我们定义俩个文件夹。里面都新增一个Styles文件

俩个文件这俩个颜色设置为不同的，便于区分

然后定义俩个主题文件， 这俩个类里面 include 各文件夹下的所有Style文件，

至于对应的cs文件，需要手动添加，同时继承Styles类。

全部代码如下图所示

接下来，我们就可以在启动的时候，通过判断不同的平台环境。来加载不同的样式资源

运行过程中也可以再次修改

var btnWindow = this.FindControl<Button>("btnWindow");
            btnWindow.Click += (s, e) =>
            {
                this.Styles.Clear();
                this.Styles.Add(new WindowsTheme());
            };
 
            var btnMacos = this.FindControl<Button>("btnMacos");
            btnMac.Click += (s, e) =>
            {
                this.Styles.Clear();
                this.Styles.Add(new MacosTheme());
            };

参考：https://www.cnblogs.com/mchuang/p/17326477.html

7.和WPF一样,WPF中MouseUp直接使用没有效果，avalonia中的PointerReleased事件也不能直接触发，需要调用AddHandler

           this.AddHandler(Button.PointerReleasedEvent, btnClose_PointerReleased/*事件调用函数*/, Avalonia.Interactivity.RoutingStrategies.Bubble, true);

 8.在Styles中使用触发器

如下代码功能是鼠标悬浮在类名为rightDirection的按钮的子控件Border上背景变红，此处Border是重写了Button的Template里面加了Border。

  <Style Selector="Button.rightDirection>Border:pointerover">
    <Setter Property="Background" Value="Red"></Setter>
  </Style>

 9.按钮想要高度适应父控件，WPF Grid Row的高度是* 就可以了，但是avalonia好像不行，需要设置VerticalAlignment="Stretch"

    <Button Name="btnRight"  Classes="rightDirection" Margin="0" Grid.Row="0" Grid.Column="2" Grid.RowSpan="2"  VerticalAlignment="Stretch"></Button>

 10、又遇到了一个问题，在后台使用 this.DataContext=new ViewModel();貌似绑定没生效。

 this.DataContext = _viewmodel = new MainWindowViewModel();//这样没生效
//下面这样就生效了在Xaml里面写
  <Design.DataContext>
    <vm:MainWindowViewModel></vm:MainWindowViewModel>
  </Design.DataContext>