SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

Windowsで進化するマルチプラットフォームGUI開発

マルチプラットフォームのGUIフレームワーク「Avalonia UI」でMVVMアプリを始めよう

Windowsで進化するマルチプラットフォームGUI開発 第5回

  • X ポスト
  • このエントリーをはてなブックマークに追加

基本のMVVMアプリ

 まずは、テンプレートプロジェクトを使って基本となるMVVMアプリを作成してみましょう。

最初のプロジェクト作成

 Visual StudioでAvalonia UIを利用するには、拡張機能を追加するのが手軽です。Visual Studioのメインメニュー[拡張機能]ー[拡張機能の管理]を開き、Avaloniaで検索します。すると次のような拡張機能が見つかりますので、「Avalonia for Visual Studio 2022」をダウンロードしてインストールします。

拡張機能の管理
拡張機能の管理

 拡張機能の「Avalonia for Visual Studio 2022」をインストールすると、プロジェクトテンプレートに次のようなテンプレートが追加されます。

新しいプロジェクトの作成
新しいプロジェクトの作成

 テンプレートの名称どおり「MVVM」を含むものがMVVMパターンでのプロジェクトで、もう一方がMVVMパターンではないシンプルなプロジェクトになります。2つのテンプレートでの大きな違いは、ViewModel関連のクラスがあるかないかになります。

 今回はMVVMパターンを使ったアプリを解説しますので、「Avalonia MVVM Application」を選んで新規プロジェクトを作成しましょう。

動作の確認

 プロジェクト名や場所などを適宜設定すると、プロジェクトが作成されます。このままビルドして起動してみましょう。

Avalonia MVVMアプリ
Avalonia MVVMアプリ

 ウィンドウに文字列を表示するだけの、お決まりのHelloWorldアプリが起動するはずです。

プロジェクトのフォルダー構成

 新規作成されたプロジェクトのファイル/フォルダー構成は、次のようになっています。

ファイル/フォルダー構成
ファイル/フォルダー構成
\Assets         ----- アイコンなどのリソースファイル
\Models         ----- モデルクラス用(空フォルダー)
\ViewModels     ----- ビューモデルクラス
\Views          ----- ビュークラス
App.axaml       ----- Applicationクラスの定義
Program.cs      ----- エントリーポイントとなるクラス定義
ViewLocator.cs  ----- ViewModelとViewを関連づけるクラス

 Viewsフォルダーには、メイン画面となるMainWindow.axaml、ViewModelsフォルダーには、メイン画面のViewModelとなるクラス定義、MainWindowViewModel.csが含まれています。

 Avalonia UIでは、画面定義はXAMLベースなのですが、XAMLファイルの拡張子は標準ではWPFのような.xamlではなく「.axaml」となっています。文法的にはWPFのXAMLと違いはありませんが、UI要素の属性などはWPFとは微妙に異なっている部分もあります。

データバインディング

 ビューとなるMainWindow.axamlは次のようになっています。UI要素の定義は1つだけです。

[リスト1]MainWindow.axaml
<Window xmlns="https://github.com/avaloniaui"
~中略~
    <TextBlock Text="{Binding Greeting}" HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Window>

 UI要素の<TextBlock>は、テキストを表示するラベルのようなものです。HorizontalAlignment、VerticalAlignment属性で、上下左右の位置を指定しています。サンプルではCenterとなっているので、ウィンドウの中央に表示されることになります。

 <TextBlock>のText属性で、表示する文字列を指定します。ただし、直接文字列を記述していません。ここでは次のような書式で、ビューモデルであるMainWindowViewModelクラスのGreetingプロパティにバインディングしています。

"{Binding プロパティ名}"

 MainWindowViewModelクラスのほうは、Greetingプロパティの定義のみとなっています。

[リスト2]MainWindowViewModel.axaml
~中略~
public class MainWindowViewModel : ViewModelBase
{
    public string Greeting => "Welcome to Avalonia!";
}

 MainWindowViewModelクラスの初期化時に、Greetingプロパティに文字列を設定しています。アプリが起動してウインドウが生成されると、この文字列が表示されます。このようにプロパティを参照するだけ(OneWay)のバインディングがデフォルトです。

 単なる表示ではなくテキスト入力などのUI要素は、双方向のバインディングが必要です。その場合XAML定義では、Mode属性にTwoWayと指定します。

"{Binding プロパティ名, Mode=TwoWay}"

次のページ
予測気温表示アプリ

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加
Windowsで進化するマルチプラットフォームGUI開発連載記事一覧

もっと読む

この記事の著者

WINGSプロジェクト 高江 賢(タカエ ケン)

WINGSプロジェクトについて>有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2018年11月時点での登録メンバは55名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂きたい。著書記事多数。 RSS X: @WingsPro_info(公式)、@WingsPro_info/wings(メンバーリスト) Facebook

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

山田 祥寛(ヤマダ ヨシヒロ)

静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for Visual Studio and Development Technologies。執筆コミュニティ「WINGSプロジェクト」代表。主な著書に「独習シリーズ(Java・C#・Python・PHP・Ruby・JSP&サーブレットなど)」「速習シリーズ(ASP.NET Core・Vue.js・React・TypeScript・ECMAScript、Laravelなど)」「改訂3版JavaScript本格入門」「これからはじめるReact実践入門」「はじめてのAndroidアプリ開発 Kotlin編 」他、著書多数

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/17163 2023/01/18 11:00

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング