Day 1 - Avalonia 环境与运行

Console.WriteLine
Console.ReadLine

Window
Layout
Control
Event
Binding

<TextBlock Text="欢迎使用 Avalonia" />

using Avalonia;
 
namespace ProductApp;
 
sealed class Program
{
    [STAThread]
    public static void Main(string[] args)
    {
        BuildAvaloniaApp()
            .StartWithClassicDesktopLifetime(args);
    }
 
    public static AppBuilder BuildAvaloniaApp()
    {
        return AppBuilder.Configure<App>()
            .UsePlatformDetect()
            .WithInterFont()
            .LogToTrace();
    }
}

<Window xmlns="https://github.com/avaloniaui"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        x:Class="ProductApp.Views.MainWindow"
        Title="ProductApp">
  <StackPanel>
    <TextBlock Text="Hello Avalonia" />
  </StackPanel>
</Window>

当前目录有没有 .csproj
dotnet build 是否通过
MainWindow.axaml 的 x:Class 是否和代码文件命名空间一致
ViewModel 命名空间是否和 XAML 里的 xmlns:vm 一致

dotnet new install Avalonia.Templates
dotnet new avalonia.mvvm -o ProductApp
cd ProductApp
dotnet run

ProductApp/
  ProductApp.csproj
  Program.cs
  App.axaml
  App.axaml.cs
  ViewLocator.cs
  Views/
    MainWindow.axaml
    MainWindow.axaml.cs
  ViewModels/
    MainWindowViewModel.cs
    ViewModelBase.cs

Program.cs
-> 创建 App
-> App.axaml / App.axaml.cs 做应用级配置
-> MainWindow.axaml 打开主窗口
-> MainWindow.axaml.cs 配合窗口初始化
-> 窗口里显示控件

dotnet --version

dotnet new install Avalonia.Templates

dotnet new avalonia.mvvm -o ProductApp

cd ProductApp
dotnet run

dotnet build

Views/MainWindow.axaml

<Window xmlns="https://github.com/avaloniaui"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        x:Class="ProductApp.Views.MainWindow"
        Width="420"
        Height="260"
        Title="Avalonia 运行成功">
  <StackPanel Margin="24" Spacing="12">
    <TextBlock Text="Avalonia 项目已经跑起来" FontSize="24" />
    <Button Content="我看到了窗口" />
  </StackPanel>
</Window>

dotnet run

using Avalonia.Controls;
 
namespace ProductApp.Views;
 
public partial class MainWindow : Window
{
    public MainWindow()
    {
        InitializeComponent();
    }
}

MainWindow.axaml 写界面。
MainWindow.axaml.cs 写这个窗口对应的 C# 代码。

dotnet new avalonia.app -n HelloAvalonia
cd HelloAvalonia
dotnet run

<Window
    xmlns="https://github.com/avaloniaui"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    x:Class="HelloAvalonia.MainWindow"
    Title="我的第一个 Avalonia 程序"
    Width="600"
    Height="400">
</Window>

<Window
    xmlns="https://github.com/avaloniaui"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    x:Class="HelloAvalonia.MainWindow"
    Title="Hello Avalonia"
    Width="600"
    Height="400">
    <TextBlock
        Text="Hello Avalonia"
        HorizontalAlignment="Center"
        VerticalAlignment="Center" />
</Window>

1. Avalonia 是什么，它和控制台程序有什么区别
2. 如何安装 Avalonia 模板
3. 如何创建并运行第一个 Avalonia 应用

<Window xmlns="https://github.com/avaloniaui"
        Width="900" Height="600"
        Title="设备监控上位机">
  <TextBlock Text="系统已启动"
             HorizontalAlignment="Center"
             VerticalAlignment="Center" />
</Window>

出现标题为“设备监控上位机”的窗口

<StackPanel Margin="24" Spacing="12">
  <TextBlock Name="StatusText" Text="尚未连接" />
  <Button Content="连接设备" Click="Connect_Click" />
</StackPanel>

窗口显示状态文字和连接按钮

private void Connect_Click(object? sender, RoutedEventArgs e)
{
    StatusText.Text = "PLC-01 已连接";
}

点击按钮后显示 PLC-01 已连接

dotnet new install Avalonia.Templates
dotnet new avalonia.mvvm -o ProductApp
cd ProductApp
dotnet run

<Window xmlns="https://github.com/avaloniaui"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        x:Class="ProductApp.Views.MainWindow"
        Width="420"
        Height="260"
        Title="Avalonia 运行成功">
  <StackPanel Margin="24" Spacing="12">
    <TextBlock Text="Avalonia 项目已经跑起来" FontSize="24" />
    <TextBlock Text="今天只确认环境、项目结构和窗口显示。" />
    <Button Content="我看到了窗口" />
  </StackPanel>
</Window>