1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

Linux上でAvaloniaUI+VSCodeを使用してdebugするまで

Last updated at Posted at 2025-02-25

いいね、ストック、badボタン、低評価が励みになります!

AvaloniaUIの開発環境構築を行う。
やってみると結構面倒だった上に、わかりにくい点があったので整理してみる。
蛇足だがKali linuxを使用している。
とりあえずLinuxOSであれば何でも良いだろう(Kali LinuxはDebian系)

Avaloniaを使わずともLinux上でWPFプロジェクトをビルドできるようで、そちらもそのうち試したい。

参考にしたサイト

まずVSCode入れる

参考

本稿ではdebを使用

image.png

sudo dpkg -i code_1.97.2-1739406807_amd64.deb

.net 9をインストールする

.net8のほうが安定するというのが現行の記述ではあるが、Project作成に必要なAvalonia for VSCodeが.net9.0を要求するため。
尚、.net8.0を指定してビルドすることは可能である。

image.png

不親切なことにMicrosoftのドキュメントに飛ばされるので、目的のものを探す(ここではDebian)

以下にたどり着く

コマンド群の実行
以下はMicrosoftの公式パッケージリポジトリをDebian 12に追加します。

wget https://packages.microsoft.com/config/debian/12/packages-microsoft-prod.deb -O packages-microsoft-prod.deb
sudo dpkg -i packages-microsoft-prod.deb
rm packages-microsoft-prod.deb

上記を実行の上で以下を行う
image.png

ランタイムをインストールする

色々検証したが、.net9.0で問題ないっぽい。

sudo apt-get install -y aspnetcore-runtime-9.0

VSCodeを起動する

VSCode経由でAvaroniaのテンプレート等を入れてみる。

image.png

valonia TemplatesAvalonia for VSCode

Avalonia for VSCodeはPreview版で、.net9.0を必要とする。

導入後、VSCodeでAvaroniaプロジェクト作成のためのボタンが表示されるようになる(要VSCode再起動)。

Create Avalonia Projectの表示位置

.net9.0がインストールされ、 Avaronia for VScodeが有効になった時点で
下記画像の通り、一番上のExploreタブで表示される

image.png

デバッグにはC#とC# devkitも必要で、これは入門のlink先に書いてなかった。
テストを実行すると以下のように出る

Do you want to install the recommended 'C# Dev Kit' extension from Microsoft for the C# language?

image.png

先程と同様にVSCode拡張からインストールする。

test projectを作成する

新規タブから、Create Avalonia Projectをクリック
今回はAvaronia MVVM Appを作成する。
名前をtestAlllwomanareSheepGloryなどという長くて仰々しい名前にしておく。わかりやすいから。

作成先フォルダとしてAvaloniaとした。なんでも良いだろう
image.png

無事にtestAlllwomanareSheepGloryプロジェクトが作成された。

image.png

更にエラーが出る

You don't have an extension for debugging 'Avalonia XAML'. Should we find a 'Avalonia XAML' extension in the Marketplace?

image.png

検証が非常に面倒だったのだが、どうやらavalonia-css-extension が必要だと判明。尚、どこにも書いてないからそれっぽいExtentionを一つずつ丁寧に試すしかなかった。

image.png

最終的には以下のVSCode拡張が必要となる。

必要なVSCode拡張

Avalonia Templates
Avalonia for VSCode(Preview)
avalonia-css-extension
C#
C# Dev kit
以下は自動的に追加?
.Net Install tool
.Net Extention Pack

余分なExtentionは可能な限り省いている
image.png

起動時スクリーンショット

低スペノートのせいでもあるがビルドはかなり遅い印象。

直接貼れないので間接的に表示する形式で

Linuxk系OSがソフト数自体少ない上にディストリビューションによってはそのOSに入れられないことがあり、開発に挑戦してみようかと思っている。もういい歳なんだけど。
Windows向けの便利なソフトがもっとあっていいと思うのだ

あとがき

以上でデバッグを実行し、アプリを起動するところまで実現することが出来ました。よくみたら参考linkの記述よりもMicrosoftドキュメント寄りの記述になってた。

実行可能なファイルも生成されるので、圧縮ファイルとして配布も可能ではないかと思います。やったことないけど....

高評価はgoodボタン、低評価はbadボタン、ストックされると励みになります。編修リクは基本受け付けません(slimではないとか)。

1
1
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
1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?