はじめに
Avalonia UIを使ったクロスプラットフォームGUIアプリケーション（SampleApp）を、Visual Studio Code (VS Code) で開発・実行する手順を紹介します。
環境構築
はじめに、開発に必要なツールをインストールします。
.NET SDK
.NET 8.0 SDKをインストールします。
Ubuntu/Debianの場合:
sudo apt-get update
sudo apt-get install -y dotnet-sdk-8.0
ライセンスの取得
難しくはないですが、理解して取得された方が良いと思いますので記載しません。
https://portal.avaloniaui.net/
Avalonia UI開発ツール
（AvaloniaUI.DeveloperTools）
dotnet tool install --global AvaloniaUI.Parcel
VS Code と 拡張機能
VS Codeに、C#とAvalonia UIの開発をサポートする以下の拡張機能をインストールします。
- C# Dev Kit: Microsoft公式のC#開発拡張機能
- Avalonia for VSCode: XAMLのプレビューや入力補完（インテリセンス）を提供
プロジェクトの作成
ターミナルを開き、以下のコマンドで SampleApp という名前のプロジェクトを作成します。
dotnet new avalonia.app -o SampleApp
cd SampleApp
プロジェクト構成とコード解説
今回作成した SampleApp の主要なファイルについて解説します。
Program.cs: アプリケーションのエントリーポイントです。BuildAvaloniaApp メソッドでAvaloniaの設定（プラットフォーム検出、フォント設定、ログ設定など）を行い、Main メソッドでアプリを開始します。
App.axaml.cs: アプリケーション全体のライフサイクルを管理します。OnFrameworkInitializationCompleted でメインウィンドウを設定しています。
MainWindow.axaml.cs: メインウィンドウのロジック（コードビハインド）です。ボタンクリック時のイベントハンドラなどが記述されます。
実行方法
VS Codeのターミナルを開き、以下のコマンドを実行します。
dotnet run
ウィンドウが表示され、ボタンをクリックして動作を確認できれば成功です。
using Avalonia;
using System;
namespace SampleApp;
class Program
{
// Initialization code. Don't use any Avalonia, third-party APIs or any
// SynchronizationContext-reliant code before AppMain is called: things aren't initialized
// yet and stuff might break.
[STAThread]
public static void Main(string[] args) => BuildAvaloniaApp()
.StartWithClassicDesktopLifetime(args);
// Avalonia configuration, don't remove; also used by visual designer.
public static AppBuilder BuildAvaloniaApp()
=> AppBuilder.Configure<App>()
.UsePlatformDetect()
.WithInterFont()
.LogToTrace();
}
using Avalonia;
using Avalonia.Controls.ApplicationLifetimes;
using Avalonia.Markup.Xaml;
namespace SampleApp;
public partial class App : Application
{
public override void Initialize()
{
AvaloniaXamlLoader.Load(this);
}
public override void OnFrameworkInitializationCompleted()
{
if (ApplicationLifetime is IClassicDesktopStyleApplicationLifetime desktop)
{
desktop.MainWindow = new MainWindow();
}
base.OnFrameworkInitializationCompleted();
}
}
<Window xmlns="https://github.com/avaloniaui"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d" d:DesignWidth="500" d:DesignHeight="450"
x:Class="SampleApp.MainWindow"
Title="SampleApp">
<StackPanel Spacing="10" Margin="20" VerticalAlignment="Center">
<TextBox Watermark="ここにテキストを入力..."/>
<Button Content="クリックしてください" Click="Button_Click"/>
</StackPanel>
</Window>
using Avalonia.Controls;
using Avalonia.Interactivity;
using Avalonia.Markup.Xaml;
namespace SampleApp;
public partial class MainWindow : Window
{
public MainWindow()
{
// `InitializeComponent` はビルド時にXAMLから自動生成されるメソッドです。
// このエラーは、ビルド構成の問題などで、その生成が失敗していることを示唆しています。
// 回避策として、実行時にXAMLを手動で読み込む `AvaloniaXamlLoader.Load(this)` を使用します。
//AvaloniaXamlLoader.Load(this);
InitializeComponent();
}
private void Button_Click(object? sender, RoutedEventArgs e)
{
if (sender is Button button) button.Content = "クリックされました！";
}
}
トラブルシューティング
InitializeComponent が見つからないというエラーが出る場合
デバック実行はできます。
私の環境ではVS Codeで InitializeComponent() に赤い波線が表示され、「'MainWindow' に 'InitializeComponent' の定義が含まれていません」といったエラーが出ました。
これは、XAMLからC#コードを自動生成するビルドプロセスがまだ完了していない場合に発生します。多くの場合、一度 dotnet build や dotnet run を実行すれば解決するようです。
私のように解決しない場合の回避策として、MainWindow.axaml.cs のコンストラクタで InitializeComponent() の代わりに AvaloniaXamlLoader.Load(this) を呼び出せば、回避できます。