やりたいこと

Prismを使って、画面遷移(とMVVM)の基本部分のひな型を作っておけば、今後WPFで簡単なアプリなど作ろうとしたときに役に立ちそうと思ったので、ひな型を作ってみる。それをする上でのメモを残しておく。

前提

下記の、かずきさんの教育用githubをベースに実験して、自分用にまとめ。
https://github.com/runceel/PrismEdu/tree/master/06.Navigation
https://blog.okazuki.jp/entry/2014/09/11/224645

作業手順

PrismをNugetからインストール

prism.core(今回は6.3.0)

prism.Unity(今回は6.3.0)

Bootstrapper.cs作成

アプリ起動時に、Prism.Unityがしかるべき処理をできるように、起動処理を作ってやる。
(一旦どうしてこういう作りになるかは置いといて、こういうものとして「おまじない」扱いに一旦しとく)

Bootstrapper.cs

using Microsoft.Practices.Unity;
using PrismSample.Views;
using Prism.Unity;
using System.Linq;
using System.Windows;
using System;

namespace PrismSample
{
    class Bootstrapper : UnityBootstrapper
    {
        protected override DependencyObject CreateShell()
        {
            return this.Container.Resolve<Shell>();
        }

        protected override void InitializeShell()
        {
            ((Window)this.Shell).Show();
        }

        protected override void ConfigureContainer()
        {
            base.ConfigureContainer();

            // ViewをDIコンテナに登録(！！！すべて「Object型」で登録すること！！！(なぜかは不明))
            this.Container.RegisterTypes(
                AllClasses.FromLoadedAssemblies()
                    .Where(x => x.Namespace.EndsWith(".Views")),
                getFromTypes: _ => new[] { typeof(object) },
                getName: WithName.TypeName);
        }
    }
}

App.xamlをメンテ

起動時に上で作ったブートストラップを実施してくれるよう、StartupUriの行を、Startup="Application_Startup"にする。

App.xaml

<Application x:Class="NavigationSampleApp.App"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:local="clr-namespace:NavigationSampleApp"
             Startup="Application_Startup"> <!-- ★←ココ -->
    <Application.Resources>

    </Application.Resources>
</Application>

App.xaml.csをメンテ

APp.xamlでStartup時処理に指定したApplication_Startupを、App.xaml.csに記述する。

App.xaml.cs

using System.Windows;

namespace PrismSample
{
    /// <summary>
    /// App.xaml の相互作用ロジック
    /// </summary>
    public partial class App : Application
    {
        private void Application_Startup(object sender, StartupEventArgs e)
        {
            // Bootstrapperを起動する
            new Bootstrapper().Run();
        }
    }
}

親画面(Shell.xaml)を作成

ここに、画面遷移のための「ContentControl」を作成し、RegionNameを記述する。
ここで作ったContentControlに、後で作成する画面用UserControlが表示されることになる。

shell.xaml

<Window x:Class="PrismSample.Views.Shell"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:PrismSample.Views"
        xmlns:prism="http://prismlibrary.com/"
        prism:ViewModelLocator.AutoWireViewModel="True"
        xmlns:ViewModels="clr-namespace:PrismSample.ViewModels"
        mc:Ignorable="d"
        Title="Shell"
        Height="300"
        Width="300">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="*"/>
            <RowDefinition Height="20"/>
        </Grid.RowDefinitions>
        <ContentControl Grid.Row="0" prism:RegionManager.RegionName="MainRegion" />
        <Button Grid.Row="1" Content="ボタン" Command="{Binding ButtonCommand}"/>
    </Grid>
</Window>

下で作るViewModelと自動で連携するために、下記をWindowに付け加えること。
※後でつくる、UserControlも同様！忘れるとViewModelがViewと紐づかない。

xmlns:prism="http://prismlibrary.com/"
prism:ViewModelLocator.AutoWireViewModel="True"

親画面のViewModelを作成

ボタンをつけて、それを押したらUserControlで作った画面に遷移するようにした。

※本当は、UserControl1の画面を初期表示させたくてコンストラクタでRequestNavigateしたかったが、コンストラクタを通った時点ではRegionManagerがまだ注入されておらずnullのため、RegionManagerで遷移処理ができなかった。どうすればよいか、要調査。

→画面起動時に遷移させてやる方法があった。この記事の下の方に追記した。

ShellViewModel.cs

using PrismSample.Views;
namespace PrismSample.ViewModels
{
    class ShellViewModel : BindableBase
    {
        [Dependency]
        public IRegionManager RegionManager { get; set; }

        public DelegateCommand ButtonCommand { get; }

        public ShellViewModel()
        {
            this.ButtonCommand = new DelegateCommand(() =>
            {
                this.RegionManager.RequestNavigate("MainRegion", nameof(UserControl1));
            });
        }

    }
}

画面のUserControlを作る

Shell.xamlに配置したContentControlに出したい画面を作る。
まずは、Viewを作る。

UserControl1.xaml

<UserControl x:Class="PrismSample.Views.UserControl1"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             xmlns:local="clr-namespace:PrismSample.Views"
             xmlns:prism="http://prismlibrary.com/"
             prism:ViewModelLocator.AutoWireViewModel="True"
             mc:Ignorable="d" 
             d:DesignHeight="450" d:DesignWidth="800">
    <Grid Background="Beige">
        <Grid.RowDefinitions>
            <RowDefinition Height="*"/>
            <RowDefinition Height="60"/>
        </Grid.RowDefinitions>

        <TextBlock Grid.Row="0" Text="画面１" FontSize="60"/>
        <Button Grid.Row="1" Content="画面１のボタン" Command="{Binding ButtonCommand}"/>
    </Grid>
</UserControl>

画面のUserControlに対応したViewModelを作成する

★注意点

画面のViewに対応するViewModelを作る。prismに自動でViewと関連付けてもらうために、名前は「Viewの名前ViewModel」にすること（今回の場合はUserControl1ViewModel）
ViewModelなので画面にバインドするのに便利なようにBindableBaseを継承すること
PrismのRegionを使えるように、INavigationAwareインターフェースを実装すること。
- IsNavigationTargetメソッドは、画面のインスタンスを使いまわすかどうか制御するためのもの(src内コメント参照)
- OnNavigatedFromメソッドは、この画面から他の画面に遷移するときの処理
- OnNavigatedToメソッドは、他の画面からこの画面に遷移したときの処理。ここで遷移元からのパラメータを受け取れる。
[Dependency]をつけて、RegionManagerプロパティを作成しておくこと。これは、Unityコンテナから注入されてくる画面遷移処理に使用するマネージャー。

UserControl1ViewModel.cs

using Microsoft.Practices.Unity;
using Prism.Commands;
using Prism.Mvvm;
using Prism.Regions;
using PrismSample.Views;

namespace PrismSample.ViewModels
{
    class UserControl1ViewModel : BindableBase, INavigationAware
    {
        [Dependency]
        public IRegionManager RegionManager { get; set; }

        public DelegateCommand ButtonCommand { get; }

        public UserControl1ViewModel()
        {
            this.ButtonCommand = new DelegateCommand(() =>
            {
                // Shell.xaml.csで作成したリージョンの名前と、画面のUserControlクラス名を指定して、画面遷移させる。
                // (パラメータを渡すこともできる)
                this.RegionManager.RequestNavigate("MainRegion", nameof(UserControl2), new NavigationParameters($"id=1"));
            });
        }

        public bool IsNavigationTarget(NavigationContext navigationContext)
        {
            // このメソッドの返す値により、画面のインスタンスを使いまわすかどうか制御できる。
            // true ：インスタンスを使いまわす(画面遷移してもコンストラクタ呼ばれない)
            // false：インスタンスを使いまわさない(画面遷移するとコンストラクタ呼ばれる)
            // メソッド実装なし：trueになる
            // ※コンストラクタは呼ばれないが、Loadedイベントは起きる
            return false;
        }

        public void OnNavigatedFrom(NavigationContext navigationContext)
        {
            // この画面から他の画面に遷移するときの処理
        }

        public void OnNavigatedTo(NavigationContext navigationContext)
        {
            // 他の画面からこの画面に遷移したときの処理

            // 画面遷移元から、この画面に遷移したときにパラメータを受け取れる。
            string Id = navigationContext.Parameters["id"] as string;
        }
    }
}

画面遷移について

上のUserControl1内でほかの画面(今回の場合はUserControl2)に遷移させたい場合は、下記のようにする。
NavigationParametersを使って、遷移先にパラメータを渡すこともできる。(遷移先画面のOnNavigatedToメソッドで受け取る(src参照))

this.RegionManager.RequestNavigate("MainRegion", nameof(UserControl2), new NavigationParameters($"id=1"));

ほかの画面のViewとViewModelを作る

今回は、画面を2つ作ってお互いを遷移させるようなことをするので、UserControl2'というビューをつくり、それに対応するUserControl2ViewModelを作る。内容は、UserCOntrol1`とほぼ同じのため、内容は割愛。

不要なものを削除する

プロジェクト作成時にできていたMainWindow.xamlは使用しないため、削除しておく。

できあがり

一旦これで出来上がり。ファイル/フォルダ構成はこのようにした。

動作としては、下記のような画面遷移をする。

190521追記

最初に一回ボタンを押さないと初期画面(UserControl1)を出せていなかったが、ウインドウのActivatedイベント時にRegionManagerを使うことで、初期画面を表示することができた。(本当はViewModel内でやりたかったが...)
※Loadedの方が良いかも。

→ViewModel内でやる方法があった。この記事の下の方に追記した。

Shell.xaml

<Window x:Class="PrismSample.Views.Shell"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:PrismSample.Views"
        xmlns:prism="http://prismlibrary.com/"
        prism:ViewModelLocator.AutoWireViewModel="True"
        xmlns:ViewModels="clr-namespace:PrismSample.ViewModels"
        xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity"
        xmlns:ei="http://schemas.microsoft.com/expression/2010/interactions"
        mc:Ignorable="d"
        Title="Shell"
        Height="300"
        Width="300"
        Activated="Window_Activated">   <!-- ★追記 -->
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="*"/>
            <RowDefinition Height="20"/>
        </Grid.RowDefinitions>
        <ContentControl Grid.Row="0" prism:RegionManager.RegionName="MainRegion" />
        <!--<Button Grid.Row="1" Content="ボタン" Command="{Binding ButtonCommand}"/>-->
    </Grid>
</Window>

Shell.xaml.cs

using Microsoft.Practices.Unity;
using Prism.Regions;
using System;
using System.Windows;

namespace PrismSample.Views
{
    /// <summary>
    /// Shell.xaml の相互作用ロジック
    /// </summary>
    public partial class Shell : Window
    {
        [Dependency]
        public IRegionManager RegionManager { get; set; }

        public Shell()
        {
            InitializeComponent();
        }

        private void Window_Activated(object sender, EventArgs e)
        {
            this.RegionManager.RequestNavigate("MainRegion", nameof(UserControl1));
        }
    }
}

20/09/03追記

こちらの記事でやったように、EventTriggerを使ってLoadedイベントにViewModelのコマンドを結び付けてあげれば、コードビハインドを使わず、ViewModelに画面遷移の処理を集めることができそう。

※その記事にも書いているが、下記の参照追加などが必要なので注意。

System.Windows.Interactivity.dllを参照に追加
Microsoft.Expression.Interactionsを参照に追加
xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity" xamlの上に追加