Prismを使ったMVVMアプリケーションの基本

こんにちは、皆さん！今回は、Prismを使用して非常にシンプルなMVVMアプリケーションを作成する手順をご紹介します。この投稿の目標は、MainWindowに「Hello Prism!」のTextBlockを表示するだけのシンプルな構成で、Prismの基本的な使用法に慣れることが目的です。

ステップ 1: 新しいWPFアプリケーションを作成

まず、Visual Studioで新しいWPFアプリケーションを作成します。

Prismのインストールは別の記事で説明しているので、Prismのライブラリがプロジェクトに追加されていることを確認してください。

1.Prismでプロジェクト作成

2.Prismライブラリの確認

通常のC#プロジェクトと同じように作成するフォルダを選択します。

3.DIコンテナの選択

DIコンテナを選択する画面が出ますので「Unity」を選択して「CREATE PROJECT」をクリックしてください。
※DIコンテナについては後日記事にします。

ステップ 2: MainWindowの作成

この時点でブランクの画面が出来上がりました。
MainWindow.xaml(View)とMainWindowViewModel(ViewModel)が作成されており、MVVMの内M(Model)以外が作成されています。
F5キーなどでデバッグ実行すると何もない画面の表示が確認できます。

これは内部でViewとViewModelが自動で紐付けされているためです。

次に、MainWindow.xamlを編集して、画面に「Hello Prism！」のメッセージを表示します。

1.MainWindow.xamlの編集
Views/MainWindow.xamlを開いて、以下のように修正します。
名前空間などは各自の環境に合わせてください。

<Window x:Class="BlankApp1.Views.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:prism="http://prismlibrary.com/"
        prism:ViewModelLocator.AutoWireViewModel="True"
        Title="{Binding Title}" Height="350" Width="525" >
    <Grid>
        <TextBlock Text="{Binding Text}" HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="24"/>
    </Grid>
</Window>

これで、アプリケーションを起動すると「Hello Prism!」というメッセージが画面中央に表示されます。

ステップ 3: MainWindowViewModelの作成

次に、MainWindow.xamlに対応するViewModelを修正します。

1.「Hello Prism！」用のプロパティを追加

ViewModels/MainWindowViewModel.csというファイルを以下のように実装します。
名前空間などは各自の環境に合わせてください。

using Prism.Mvvm;

namespace BlankApp1.ViewModels
{
    public class MainWindowViewModel : BindableBase
    {
        private string _title = "Prism Application";
        public string Title
        {
            get { return _title; }
            set { SetProperty(ref _title, value); }
        }

        private string _text = "Hello Prism!";

        public string Text
        {
            get { return _text; }
            set { SetProperty(ref _text, value);}
        }

        public MainWindowViewModel()
        {

        }
    }
}

このViewModelはシンプルなもので、特にプロパティやメソッドを追加していませんが、今後の拡張が可能です。

ステップ 4: ViewModelとのバインド

Prismでは、MainWindow.xamlとMainWindowViewModelの自動バインディングが行われます。特別な設定をせずに、ViewとViewModelが関連付けられるため、コードを追加する必要はありません。

ステップ 5: 実行

あとはこのままF5キー押下などで実行してもらえれば画面に「Hallo Prism!」と表示されます。

---

以上で、シンプルなPrismを使ったMVVMアプリケーションが完成です。今回は、MainWindowに「Hello Prism!」を表示するだけですが、この基本をベースにして、次回以降に機能を拡張していくことができます。

質問があれば、コメント欄で教えてください！

今回使用したソースコードはこちらからダウンロードしてください。