11
8

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

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

Last updated at Posted at 2025-09-21
Page 1 of 19

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

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

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

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


関連記事

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


VsCodeで開発する場合

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

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

どういうわけか
image.png
このCreate Avaronia Projectが出ないことがある。

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

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


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

commandのガイドも載ってる。


.NET SDKをインストール

winget install Microsoft.DotNet.SDK.9

参考:Use WinGet to install and manage applications

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

dotnet --versiondotnet --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や.slndotnet Buildしないと作成されません。


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

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

image.png

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


.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)を出すことが出来る。
が、条件がややこしい。わざわざ教えたくない
のでストック5以上で解禁にしましょう💡

Visual Studioで拡張機能を入れた方が簡単です。

WPFとほぼ変わらない操作感。
image.png


image.png

AXAMLのプレビュー用ツールなんだけど
1.直接編集が出来ない
2.表示がビルド時に反映される(リアルタイムじゃない)
3.エラーが出ると表示されない(普通か)

というカンジで割と不便です。ないよりはマシなのかもしれないけど、無くてもあんま変わらないのではないか

動作は軽快ですが。


image.png

Build Failures
日本語訳で「ビルドに失敗しました」

c:¥TestCode¥VoiseLanchuorApp¥VoiseLanchuorApp.csproj' failed to build. Would you like to
continue and run the last successful build?
が結構よく出る。

→ ビルド前にエラーとして表示してくれない。
VSCode上で拡張機能 Avalonia for Visual Studio Code を入れれば出ます。

image.png
入れないと出ないようなので注意。
それでもビルドしてからじゃないと出ないが。

→ エラーメッセージはVSCodeを日本語に設定すれば日本語で出る


プロジェクトファイル(.sln)がLinux上のVSCodeで動くかどうか実験。

これが本題のようなものなので。

わざわざUSB等にぶち込むのも面倒なのでGitに上げましょう💡 プロジェクトは提示しませんが、報告だけ。

成功はしたけど、Githubに上ゲてLinux側に落とすのが難儀で(Privateリポジトリだから)
Linux側も微妙に環境の差異の問題でなかなか上手く行きませんでした。後日まとめようと思います。

どうしてこういつもいつも厄介なのか


あとがき

スライドモードを試したのですが、思った以上に読みやすいですね。今後もコレで書いてもいいな。

11
8
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
11
8

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?