Avalonia系列文章之再试牛刀

通过前一篇文章，已经相识了AvaloniaUI的环境安装以及项目创建，磨刀不误砍柴工，今天继承进行Avalonia基础知识学习，如有不足之处，还请指正。
项目组成

在前一篇文章中，我们创建了第一个Avalonia项目“FirstAvalonia”，通过分析发现，默认创建的解决方案，有两部分组成：

• FirstAvalonia.Desktop，此项目体现我们创建的项目是基于Windows桌面程序的，Program类中的Main方法为程序启动入口。
  
• FirstAvalonia，此项目为多平台之间共享的主要项目，默认基于MVVM模式进行开发，主要程序结构如下：
  
  
  • Views，存放视图页面，为了与WPF创建的".xaml"进行区分，Avalonia UI 使用了自己的.axaml扩展名——'Avalonia XAML'。
    
  • ViewModels，存放视图模子，默认创建的ViewModel根据选择的“Design Pattern”不同，继承不同的基类，实现具备关照功能的属性。
    
  • Assets，主要存放一些静态资源，如图片等。
    
  • App.axaml，为应用程序的入口，可以定义主题样式等内容。
    
  
  

默认创建的项目示例，如下图所示：

视图文件

默认创建的MainWindow.axaml文件，是一个典型的Avalonia视图文件，主要包含Window标签以及一些属性和一个内容，它体现一个窗口，以及一些窗口设置，和它的内容（MainView是一个用户控件）。
根节点定义了视图页面的类型（如：Window，Page，UserControl等），它有三个重要属性：

• xmlns="https://github.com/avaloniaui" ——这是 Avalonia UI 本身的XAML命名空间声明。这是必需的，否则文件将无法被辨认为Avalonia XAML文档；
  
• xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" ——这是XAML语言命名空间的声明；
  
• x: ——这是上面声明的扩展（用于'x'）告诉XAML编译器在文件中找到相关联的类的位置。这个类在代码后台文件中定义，通常用C#编写。
  

详细如下所示：

1. <Window xmlns="https://github.com/avaloniaui"
2. <Window xmlns="https://github.com/avaloniaui"
3.         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
4.         xmlns:vm="using:FirstAvalonia.ViewModels"
5.         xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
6.         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
7.         xmlns:views="clr-namespace:FirstAvalonia.Views"
8.         mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
9.         x:
10.         Icon="/Assets/avalonia-logo.ico"
11.         Title="FirstAvalonia">
12.         <views:MainView />
13. </Window>xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
14. <Window xmlns="https://github.com/avaloniaui"
15.         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
16.         xmlns:vm="using:FirstAvalonia.ViewModels"
17.         xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
18.         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
19.         xmlns:views="clr-namespace:FirstAvalonia.Views"
20.         mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
21.         x:
22.         Icon="/Assets/avalonia-logo.ico"
23.         Title="FirstAvalonia">
24.         <views:MainView />
25. </Window>xmlns:vm="using:FirstAvalonia.ViewModels"
26. <Window xmlns="https://github.com/avaloniaui"
27.         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
28.         xmlns:vm="using:FirstAvalonia.ViewModels"
29.         xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
30.         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
31.         xmlns:views="clr-namespace:FirstAvalonia.Views"
32.         mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
33.         x:
34.         Icon="/Assets/avalonia-logo.ico"
35.         Title="FirstAvalonia">
36.         <views:MainView />
37. </Window>xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
38. <Window xmlns="https://github.com/avaloniaui"
39.         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
40.         xmlns:vm="using:FirstAvalonia.ViewModels"
41.         xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
42.         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
43.         xmlns:views="clr-namespace:FirstAvalonia.Views"
44.         mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
45.         x:
46.         Icon="/Assets/avalonia-logo.ico"
47.         Title="FirstAvalonia">
48.         <views:MainView />
49. </Window>xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
50. <Window xmlns="https://github.com/avaloniaui"
51.         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
52.         xmlns:vm="using:FirstAvalonia.ViewModels"
53.         xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
54.         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
55.         xmlns:views="clr-namespace:FirstAvalonia.Views"
56.         mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
57.         x:
58.         Icon="/Assets/avalonia-logo.ico"
59.         Title="FirstAvalonia">
60.         <views:MainView />
61. </Window>xmlns:views="clr-namespace:FirstAvalonia.Views"
62. <Window xmlns="https://github.com/avaloniaui"
63.         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
64.         xmlns:vm="using:FirstAvalonia.ViewModels"
65.         xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
66.         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
67.         xmlns:views="clr-namespace:FirstAvalonia.Views"
68.         mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
69.         x:
70.         Icon="/Assets/avalonia-logo.ico"
71.         Title="FirstAvalonia">
72.         <views:MainView />
73. </Window>mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
74. <Window xmlns="https://github.com/avaloniaui"
75.         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
76.         xmlns:vm="using:FirstAvalonia.ViewModels"
77.         xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
78.         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
79.         xmlns:views="clr-namespace:FirstAvalonia.Views"
80.         mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
81.         x:
82.         Icon="/Assets/avalonia-logo.ico"
83.         Title="FirstAvalonia">
84.         <views:MainView />
85. </Window>x:
86. <Window xmlns="https://github.com/avaloniaui"
87.         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
88.         xmlns:vm="using:FirstAvalonia.ViewModels"
89.         xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
90.         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
91.         xmlns:views="clr-namespace:FirstAvalonia.Views"
92.         mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
93.         x:
94.         Icon="/Assets/avalonia-logo.ico"
95.         Title="FirstAvalonia">
96.         <views:MainView />
97. </Window>Icon="/Assets/avalonia-logo.ico"
98. <Window xmlns="https://github.com/avaloniaui"
99.         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
100.         xmlns:vm="using:FirstAvalonia.ViewModels"
101.         xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
102.         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
103.         xmlns:views="clr-namespace:FirstAvalonia.Views"
104.         mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
105.         x:
106.         Icon="/Assets/avalonia-logo.ico"
107.         Title="FirstAvalonia">
108.         <views:MainView />
109. </Window>Title="FirstAvalonia">
110. <Window xmlns="https://github.com/avaloniaui"
111.         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
112.         xmlns:vm="using:FirstAvalonia.ViewModels"
113.         xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
114.         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
115.         xmlns:views="clr-namespace:FirstAvalonia.Views"
116.         mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
117.         x:
118.         Icon="/Assets/avalonia-logo.ico"
119.         Title="FirstAvalonia">
120.         <views:MainView />
121. </Window><views:MainView />
122. </Window>

复制代码

与XAML一样，在Avalonia XAML文件中，可以根据需要声明命名空间，并以此来找到XAML文件中使用的元素的定义。可以使用xmlns属性添加命名空间。命名空间声明的格式如下：

1. xmlns:alias="definition"

复制代码

通常在根元素中定义您要使用的所有命名空间是标准做法。此中alias是命名控件的别名，别名在文件内始终保持唯一。此中命名空间的引用，通常采用命名空间前缀，格式为“clr-namespace:命名空间”，当代码存在于与XAML相同的程序会适时，您可以使用此语法，如：xmlns:views="clr-namespace:FirstAvalonia.Views"；如果代码在另一个被引用的程序会合（例如一个库中），您必须扩展阐明以包含被引用程序集的名称：xmlns:别名="clr-namespace:命名空间;assembly=程序集"。
code-behind文件

与WPF一样，Avalonia视图文件有一个关联的code-behind文件，并以“.axaml.cs”为文件后缀，主要用来处理变乱以及其他逻辑等。通常情况下，在Visual Studio 开发工具中， code-behind文件，显示在视图文件的下一级。

code-behind类包含一个与视图文件同名的类，并用“partial”关键字修饰，体现一个部分类，在编译时，视图页面和code-behind类，会编译成一个类。

1. using Avalonia.Controls;namespace FirstAvalonia.Views;public partial class MainWindow : Window{    public MainWindow()    {<Window xmlns="https://github.com/avaloniaui"
2. <Window xmlns="https://github.com/avaloniaui"
3.         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
4.         xmlns:vm="using:FirstAvalonia.ViewModels"
5.         xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
6.         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
7.         xmlns:views="clr-namespace:FirstAvalonia.Views"
8.         mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
9.         x:
10.         Icon="/Assets/avalonia-logo.ico"
11.         Title="FirstAvalonia">
12.         <views:MainView />
13. </Window>xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
14. <Window xmlns="https://github.com/avaloniaui"
15.         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
16.         xmlns:vm="using:FirstAvalonia.ViewModels"
17.         xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
18.         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
19.         xmlns:views="clr-namespace:FirstAvalonia.Views"
20.         mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
21.         x:
22.         Icon="/Assets/avalonia-logo.ico"
23.         Title="FirstAvalonia">
24.         <views:MainView />
25. </Window>xmlns:vm="using:FirstAvalonia.ViewModels"
26. <Window xmlns="https://github.com/avaloniaui"
27.         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
28.         xmlns:vm="using:FirstAvalonia.ViewModels"
29.         xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
30.         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
31.         xmlns:views="clr-namespace:FirstAvalonia.Views"
32.         mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
33.         x:
34.         Icon="/Assets/avalonia-logo.ico"
35.         Title="FirstAvalonia">
36.         <views:MainView />
37. </Window>xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
38. <Window xmlns="https://github.com/avaloniaui"
39.         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
40.         xmlns:vm="using:FirstAvalonia.ViewModels"
41.         xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
42.         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
43.         xmlns:views="clr-namespace:FirstAvalonia.Views"
44.         mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
45.         x:
46.         Icon="/Assets/avalonia-logo.ico"
47.         Title="FirstAvalonia">
48.         <views:MainView />
49. </Window>xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
50. <Window xmlns="https://github.com/avaloniaui"
51.         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
52.         xmlns:vm="using:FirstAvalonia.ViewModels"
53.         xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
54.         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
55.         xmlns:views="clr-namespace:FirstAvalonia.Views"
56.         mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
57.         x:
58.         Icon="/Assets/avalonia-logo.ico"
59.         Title="FirstAvalonia">
60.         <views:MainView />
61. </Window>xmlns:views="clr-namespace:FirstAvalonia.Views"
62. <Window xmlns="https://github.com/avaloniaui"
63.         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
64.         xmlns:vm="using:FirstAvalonia.ViewModels"
65.         xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
66.         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
67.         xmlns:views="clr-namespace:FirstAvalonia.Views"
68.         mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
69.         x:
70.         Icon="/Assets/avalonia-logo.ico"
71.         Title="FirstAvalonia">
72.         <views:MainView />
73. </Window>mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
74. <Window xmlns="https://github.com/avaloniaui"
75.         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
76.         xmlns:vm="using:FirstAvalonia.ViewModels"
77.         xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
78.         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
79.         xmlns:views="clr-namespace:FirstAvalonia.Views"
80.         mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
81.         x:
82.         Icon="/Assets/avalonia-logo.ico"
83.         Title="FirstAvalonia">
84.         <views:MainView />
85. </Window>x:
86. <Window xmlns="https://github.com/avaloniaui"
87.         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
88.         xmlns:vm="using:FirstAvalonia.ViewModels"
89.         xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
90.         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
91.         xmlns:views="clr-namespace:FirstAvalonia.Views"
92.         mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
93.         x:
94.         Icon="/Assets/avalonia-logo.ico"
95.         Title="FirstAvalonia">
96.         <views:MainView />
97. </Window>Icon="/Assets/avalonia-logo.ico"
98. <Window xmlns="https://github.com/avaloniaui"
99.         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
100.         xmlns:vm="using:FirstAvalonia.ViewModels"
101.         xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
102.         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
103.         xmlns:views="clr-namespace:FirstAvalonia.Views"
104.         mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
105.         x:
106.         Icon="/Assets/avalonia-logo.ico"
107.         Title="FirstAvalonia">
108.         <views:MainView />
109. </Window>Title="FirstAvalonia">
110. <Window xmlns="https://github.com/avaloniaui"
111.         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
112.         xmlns:vm="using:FirstAvalonia.ViewModels"
113.         xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
114.         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
115.         xmlns:views="clr-namespace:FirstAvalonia.Views"
116.         mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
117.         x:
118.         Icon="/Assets/avalonia-logo.ico"
119.         Title="FirstAvalonia">
120.         <views:MainView />
121. </Window><views:MainView />
122. </Window>InitializeComponent();    }}

复制代码

code-behind类名与XAML文件的名称匹配，而且在Window元素的x:Class属性中也有引用。

1. <Window xmlns="https://github.com/avaloniaui"
2. <Window xmlns="https://github.com/avaloniaui"
3.         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
4.         xmlns:vm="using:FirstAvalonia.ViewModels"
5.         xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
6.         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
7.         xmlns:views="clr-namespace:FirstAvalonia.Views"
8.         mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
9.         x:
10.         Icon="/Assets/avalonia-logo.ico"
11.         Title="FirstAvalonia">
12.         <views:MainView />
13. </Window>xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
14. <Window xmlns="https://github.com/avaloniaui"
15.         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
16.         xmlns:vm="using:FirstAvalonia.ViewModels"
17.         xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
18.         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
19.         xmlns:views="clr-namespace:FirstAvalonia.Views"
20.         mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
21.         x:
22.         Icon="/Assets/avalonia-logo.ico"
23.         Title="FirstAvalonia">
24.         <views:MainView />
25. </Window>xmlns:vm="using:FirstAvalonia.ViewModels"
26. <Window xmlns="https://github.com/avaloniaui"
27.         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
28.         xmlns:vm="using:FirstAvalonia.ViewModels"
29.         xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
30.         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
31.         xmlns:views="clr-namespace:FirstAvalonia.Views"
32.         mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
33.         x:
34.         Icon="/Assets/avalonia-logo.ico"
35.         Title="FirstAvalonia">
36.         <views:MainView />
37. </Window>xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
38. <Window xmlns="https://github.com/avaloniaui"
39.         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
40.         xmlns:vm="using:FirstAvalonia.ViewModels"
41.         xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
42.         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
43.         xmlns:views="clr-namespace:FirstAvalonia.Views"
44.         mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
45.         x:
46.         Icon="/Assets/avalonia-logo.ico"
47.         Title="FirstAvalonia">
48.         <views:MainView />
49. </Window>xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
50. <Window xmlns="https://github.com/avaloniaui"
51.         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
52.         xmlns:vm="using:FirstAvalonia.ViewModels"
53.         xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
54.         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
55.         xmlns:views="clr-namespace:FirstAvalonia.Views"
56.         mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
57.         x:
58.         Icon="/Assets/avalonia-logo.ico"
59.         Title="FirstAvalonia">
60.         <views:MainView />
61. </Window>xmlns:views="clr-namespace:FirstAvalonia.Views"
62. <Window xmlns="https://github.com/avaloniaui"
63.         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
64.         xmlns:vm="using:FirstAvalonia.ViewModels"
65.         xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
66.         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
67.         xmlns:views="clr-namespace:FirstAvalonia.Views"
68.         mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
69.         x:
70.         Icon="/Assets/avalonia-logo.ico"
71.         Title="FirstAvalonia">
72.         <views:MainView />
73. </Window>mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
74. <Window xmlns="https://github.com/avaloniaui"
75.         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
76.         xmlns:vm="using:FirstAvalonia.ViewModels"
77.         xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
78.         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
79.         xmlns:views="clr-namespace:FirstAvalonia.Views"
80.         mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
81.         x:
82.         Icon="/Assets/avalonia-logo.ico"
83.         Title="FirstAvalonia">
84.         <views:MainView />
85. </Window>x:
86. <Window xmlns="https://github.com/avaloniaui"
87.         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
88.         xmlns:vm="using:FirstAvalonia.ViewModels"
89.         xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
90.         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
91.         xmlns:views="clr-namespace:FirstAvalonia.Views"
92.         mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
93.         x:
94.         Icon="/Assets/avalonia-logo.ico"
95.         Title="FirstAvalonia">
96.         <views:MainView />
97. </Window>Icon="/Assets/avalonia-logo.ico"
98. <Window xmlns="https://github.com/avaloniaui"
99.         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
100.         xmlns:vm="using:FirstAvalonia.ViewModels"
101.         xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
102.         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
103.         xmlns:views="clr-namespace:FirstAvalonia.Views"
104.         mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
105.         x:
106.         Icon="/Assets/avalonia-logo.ico"
107.         Title="FirstAvalonia">
108.         <views:MainView />
109. </Window>Title="FirstAvalonia">
110. <Window xmlns="https://github.com/avaloniaui"
111.         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
112.         xmlns:vm="using:FirstAvalonia.ViewModels"
113.         xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
114.         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
115.         xmlns:views="clr-namespace:FirstAvalonia.Views"
116.         mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
117.         x:
118.         Icon="/Assets/avalonia-logo.ico"
119.         Title="FirstAvalonia">
120.         <views:MainView />
121. </Window><views:MainView />
122. </Window>

复制代码

留意：如果在代码中对类名或其命名空间进行了任何更改，请确保x:Class属性始终匹配，否则会出现错误。
用户控件

默认创建的项目中，在MainWindow页面的Window根节点下，有一个内容节点MainView，此节点体现一个自定义的用户控件，用于显示内容，这样可以到达控件的有用复用。

• 首先引入MainView所在的命名空间，并将别名命名为views，因为MainWindow和MainView在同一个程序集内，所以直接通过xmlns:views="clr-namespace:FirstAvalonia.Views"引入即可，不需要添加程序集阐明。
  
• 其次引入命名空间后，即可访问MainView视图，格式为：。
  

MainView和MainWindow不但根节点不同，在code-behind类中，所继承的父类也不同，体现它们属于不同的控件形式。以MainView视图为例，MainView的根节点为UserControl，体现一个自定义的用户控件，由于Avalonia默认采用MVVM开发模式，与平凡控件有以下几点需要留意：

• 在此页面中，首先引入MainViewModel所在的命名空间，语句为：xmlns:vm="clr-namespace:FirstAvalonia.ViewModels"。
  
• 声明xataType类型为MainViewModel类型，语句为：xataType="vm:MainViewModel"。
  
• 将UI页面的DataContext设置为MainViewModel。
  

另外，我们还可以给UserControl添加UI元素，如TextBlock，Button等，如下所示：

1. <Window xmlns="https://github.com/avaloniaui"
2. <Window xmlns="https://github.com/avaloniaui"
3.         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
4.         xmlns:vm="using:FirstAvalonia.ViewModels"
5.         xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
6.         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
7.         xmlns:views="clr-namespace:FirstAvalonia.Views"
8.         mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
9.         x:
10.         Icon="/Assets/avalonia-logo.ico"
11.         Title="FirstAvalonia">
12.         <views:MainView />
13. </Window>xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
14. <Window xmlns="https://github.com/avaloniaui"
15.         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
16.         xmlns:vm="using:FirstAvalonia.ViewModels"
17.         xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
18.         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
19.         xmlns:views="clr-namespace:FirstAvalonia.Views"
20.         mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
21.         x:
22.         Icon="/Assets/avalonia-logo.ico"
23.         Title="FirstAvalonia">
24.         <views:MainView />
25. </Window>xmlns:vm="using:FirstAvalonia.ViewModels"
26. <Window xmlns="https://github.com/avaloniaui"
27.         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
28.         xmlns:vm="using:FirstAvalonia.ViewModels"
29.         xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
30.         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
31.         xmlns:views="clr-namespace:FirstAvalonia.Views"
32.         mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
33.         x:
34.         Icon="/Assets/avalonia-logo.ico"
35.         Title="FirstAvalonia">
36.         <views:MainView />
37. </Window>xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
38. <Window xmlns="https://github.com/avaloniaui"
39.         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
40.         xmlns:vm="using:FirstAvalonia.ViewModels"
41.         xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
42.         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
43.         xmlns:views="clr-namespace:FirstAvalonia.Views"
44.         mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
45.         x:
46.         Icon="/Assets/avalonia-logo.ico"
47.         Title="FirstAvalonia">
48.         <views:MainView />
49. </Window>xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
50. <Window xmlns="https://github.com/avaloniaui"
51.         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
52.         xmlns:vm="using:FirstAvalonia.ViewModels"
53.         xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
54.         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
55.         xmlns:views="clr-namespace:FirstAvalonia.Views"
56.         mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
57.         x:
58.         Icon="/Assets/avalonia-logo.ico"
59.         Title="FirstAvalonia">
60.         <views:MainView />
61. </Window>xmlns:views="clr-namespace:FirstAvalonia.Views"
62. <Window xmlns="https://github.com/avaloniaui"
63.         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
64.         xmlns:vm="using:FirstAvalonia.ViewModels"
65.         xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
66.         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
67.         xmlns:views="clr-namespace:FirstAvalonia.Views"
68.         mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
69.         x:
70.         Icon="/Assets/avalonia-logo.ico"
71.         Title="FirstAvalonia">
72.         <views:MainView />
73. </Window>mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
74. <Window xmlns="https://github.com/avaloniaui"
75.         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
76.         xmlns:vm="using:FirstAvalonia.ViewModels"
77.         xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
78.         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
79.         xmlns:views="clr-namespace:FirstAvalonia.Views"
80.         mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
81.         x:
82.         Icon="/Assets/avalonia-logo.ico"
83.         Title="FirstAvalonia">
84.         <views:MainView />
85. </Window>x:
86. <Window xmlns="https://github.com/avaloniaui"
87.         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
88.         xmlns:vm="using:FirstAvalonia.ViewModels"
89.         xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
90.         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
91.         xmlns:views="clr-namespace:FirstAvalonia.Views"
92.         mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
93.         x:
94.         Icon="/Assets/avalonia-logo.ico"
95.         Title="FirstAvalonia">
96.         <views:MainView />
97. </Window>Icon="/Assets/avalonia-logo.ico"
98. <Window xmlns="https://github.com/avaloniaui"
99.         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
100.         xmlns:vm="using:FirstAvalonia.ViewModels"
101.         xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
102.         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
103.         xmlns:views="clr-namespace:FirstAvalonia.Views"
104.         mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
105.         x:
106.         Icon="/Assets/avalonia-logo.ico"
107.         Title="FirstAvalonia">
108.         <views:MainView />
109. </Window>Title="FirstAvalonia">
110. <Window xmlns="https://github.com/avaloniaui"
111.         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
112.         xmlns:vm="using:FirstAvalonia.ViewModels"
113.         xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
114.         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
115.         xmlns:views="clr-namespace:FirstAvalonia.Views"
116.         mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
117.         x:
118.         Icon="/Assets/avalonia-logo.ico"
119.         Title="FirstAvalonia">
120.         <views:MainView />
121. </Window><views:MainView />
122. </Window>  

复制代码

在上述示例中，TextBlock控件的Text属性，通过Binding的方式动态的显示ViewModel中的Greeting对应的值。

1. namespace FirstAvalonia.ViewModels;
3. public class MainViewModel : ViewModelBase
4. {
5.     public string Greeting => "Welcome to Avalonia!";
6. }

复制代码

默认创建的MainView.axaml中，只有一个TextBlock控件，它用于显示只读文本，我们还可以添加其他控件，控件的元素标签和类名相同，一个UI可以由多种不同类型的控件组成，不要如果要组织不同的控件显示在UI页面中，则需要布局控件进行排版才行。否则所有的控件都会堆积在一起。如果要添加一个按钮在在页面中，代码如下所示：

1. <UserControl xmlns="https://github.com/avaloniaui"
2.         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
3.     <Button>Hello World!</Button>
4. </UserControl>

复制代码

还可以通过给元素添加属性来设置空间的呈现方式，如配景色Background等属性，如果要给一个按钮设置蓝色的配景色，则可以如下设置：

1. <UserControl xmlns="https://github.com/avaloniaui"
2.         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
3.     <Button>Hello World!</Button>
4. </UserControl>

复制代码

在上述示例中Button按钮的包含起始标签，和结束标签，而在两个标签之间则是按钮的内容，也可以通过Content属性来设置内容。
筹划预览

在Visual Studio开发工具中，通过预览功能，我们可以实时的查看页面布局效果，方便实时调整。，如下所示：

 
以上就是《Avalonia系列文章之再试牛刀》的全部内容。

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。