Windows上でのAvalonia UIクロスプラットフォームアプリケーション開発

Last updated at 2025-09-27Posted at 2025-09-21

Page 1 of 19

嫌いな記事：いいねされない記事。　
好きな記事：言い値される記事。
期限はだいたい1年ぐらいです。

5ストック以上でデザイナをVSCode上で表示させる方法を解禁します。
↦　掲載

Linux上でAvaloniaUI+VSCodeを使用してdebugするまで　のWindows版。

WindowsにしろLinuxにしろ、両者のOSをターゲットにクロスコンパイルすることが最終目標です。
まあどっちから作り始めてもいいだろうということで。

VSCodeよりも、JetBrains RiderまたはVisual Studioが推奨されています。

https://docs.avaloniaui.net/docs/get-started/set-up-an-editor

若者はVSCodeがお勧めです~~自分で何とかするというMが味わえる~~

本稿ではVSCodeを扱っています ~~(爆)~~

チュートリアル：シンプルにつくる｜Avalonia UI入門

VsCodeで開発する場合

正直言って開発体験はあまりよくないです。
まあ慣れてないせいなんだろうが

以前執筆した以下の記事
Linux上でAvaloniaUI+VSCodeを使用してdebugするまで
でいいが

どういうわけか

このCreate Avaronia Projectが出ないことがある。

→　一応新規WindowのVSCodeなら出る

もし出ない場合はcommandで同じテンプレートが作成できます。
→ おそらくsetting.jsonも関係している

入れた方が便利な拡張機能

Avalonia Document Outline
https://marketplace.visualstudio.com/items?itemName=LegendTheDeveloper.avalonia-document-outline
XAMLタグの認識とか
無くても動く。
Avalonia for VSCode
https://marketplace.visualstudio.com/items?itemName=AvaloniaTeam.vscode-avalonia

commandのガイドも載ってる。

.NET SDKをインストール

winget install Microsoft.DotNet.SDK.9

参考：Use WinGet to install and manage applications

Windowsで既にC#開発者の方は不要かもしれないです（わざわざ新規に入れてもけっこう時間食うので）

dotnet --versionかdotnet --list-sdksに以下が含まれていればOK

参考：How to check that .NET is already installed

dotnet --list-sdks
9.0.301 [C:\Program Files\dotnet\sdk]
9.0.304 [C:\Program Files\dotnet\sdk]

つまり面倒なのでパス。

あとは　チュートリアル：シンプルにつくる｜Avalonia UI入門　を参照すればよいです（AIに聞くよりは早いと思います）。

クロスプラットフォーム用のテンプレートを出力

対象のディレクトリ上で

dotnet new avalonia.app -o SampleApp

SampleAppファルダが出力される。
Dotnet Buildする必要がある。

defaultでクロスプラットフォーム対応とのこと。

参考：Supported Platforms(Avalonia UIドキュメント)

厨：参考URLAvalonia UI 超入門に載ってる

dotnet new avalonia.xplat -o SampleXPlatApp
はモバイル・Webアプリ開発向けだそうです。

参考：Platform-specific .NET -Avaronia Docs

トラブルシューティング

VSCodeで対象のフォルダを開いた直後はビルドが通るのに、特定のファイルを選択状態にするとビルドに失敗する

ということが起きて難儀しました。

※以下はAI談です。

なぜ「フォルダーを選んだときは動く」のか？

　VS Code のデバッグは launch.json に従いますが、
もし launch.json が無い場合や設定が曖昧な場合、VS Code は「現在アクティブなファイル」を基準に実行構成を推測します。

フォルダーを開いた状態 → プロジェクトルート (VoiseLanchuorApp.csproj) を見つけて「アプリ起動」と推測

個別のファイル (例: ViewModel.cs) を選択 → 「単なる C# ファイルを実行しようとして」失敗

つまり「VS Code がどのファイルをエントリポイントと見なしているか」が違っているんです。

....だそうです。

対処法:.vscode/launch.jsonで明示的に指定する

テンプレート作成時はlaunch.jsonが作成されません
→ 何と自分で新規作成して書く必要がある(！)
Dllや.slnもdotnet Buildしないと作成されません。

Avaloniaテンプレートとして生成されたものです。(Visual Studioでも開く事が出来る)

※自分でフォルダを作成してください。

以下の様に指定しました。
例によってお手軽AI生成ですが、必ず裏付けを取りますのでご安心を。

参考
The launch.json file for the DevTools extension
launch.json を活用して VS Code デバッグ環境を最適化

.vscode/launch.json

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Debug Avalonia App",
      "type": "coreclr",
      "request": "launch",
+      "program": "${workspaceFolder}/bin/Debug/net9.0/VoiseLanchuorApp.dll",
      "cwd": "${workspaceFolder}",
      "stopAtEntry": false,
      "console": "integratedTerminal"
    }
  ]
}

ポイント　
"program" を csproj ビルド後の dll に固定 → ファイル選択の影響を受けない
"cwd" を "${workspaceFolder}" に設定 → 常にプロジェクトルートから開始

VSCodeでマウスカーソル当てたら出てきたドキュメント

起動するアプリケーション dll または.NET Core ホスト実行可能ファイルへのパス。このプロパティは通常、次の形式にな
w#d: ${workspaceFolder}/bin/Debug/(target-framework) /(project-name. dll)

:${workspaceFolder}/bin/Debug/netcoreapp1.1/MyProject.dll

場所:(target-framework)は、デバッグ対象のプロジェクトがビルドされているフレームワークです。これは通常、
TargetFramework プロパティとしてプロジェクトファイルで見つかります。

(project-name.d1l)は、デバッグ対象プロジェクトのビルド出力dll の名前です。これは通常、プロジェクトファイ
ル名と同じですが、拡張子は .dll'です。
'program": "${workspaceFolder}/bin/Debug/net9.0/VoiseLanchuor
d". "$sworksnaceFolder}"

dot net Buildする

dotnet Build

これでDllと.slnが作成される（VSCodeとVisual Studio両方に対応）。

※.vscode\launch.jsonが作成されない。

プレーンテキストをデバッグするための拡張機能がありません。Marketplace にプレーンテキストの拡張機能
があるかどうかを検索しますか?

ってビルド時にmessageが出るけど、お知らせ機能みたいなものだそうなので無視しても良い（入れた方が便利らしい）

.vscode/launch.jsonを作成した時点で出なくなる。

デザイナについて

参考：Avalonia UI 超入門 -環境を充実させる

VSCode上でもデザイナ(Designer)を出すことが出来る。
が、条件がややこしい。
下記のどれか一つでも欠けたら表示されない

Preview Buttonを出すまで

必要な拡張機能
Avalonia for VSCode
Avalonia for VSCode Community　←　切ると表示されなくなる
Avalonia Templates
avalonia-css-extension
どれか一つでも切るとPreview Buttonが表示されなくなる模様
YourApp.csprojを編集。
以下を追加

<ItemGroup>
 <PackageReference Include="Avalonia.Desktop" Version="11.3.6" />
</ItemGroup>

.vscodeフォルダにsettings.jsonを作成
以下を追加する

    {
+   "avalonia.preview.enable": true,
  "avalonia.languageServer.diagnostics.enable": true,
  "avalonia.languageServer.completion.enable": true
}