WPFとPrismを使用した画面表示

WPF

この記事の内容は、Visal Studio 2017 Professional 、.NET Framework 4.7.2、C# 7.3、Prism 7.1を使用しています。

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

Visal Studioのメニューバーから[ファイル]-[新規作成]-[プロジェクト]を選択します。ツリービューから[Visal C#]-[Prism]-[WPF]を選択し、[Prism Blank App(WPF)]を選択します。

f:id:mr-xxxx-bank-band:20181228111711j:plain

プロジェクトを作成すると以下の画面が表示されます。

f:id:mr-xxxx-bank-band:20181228111739j:plain

DIコンテナを選択する画面です。Unityを選択し、CREATE PROJECTをクリックします。

Moduleの作成

ソリューションにもう一つプロジェクトを追加します。[Prism Module(WPF)]を選択して、プロジェクトを追加してください。

f:id:mr-xxxx-bank-band:20181228111210j:plain

ここまで完了したら以下の画像のようなプロジェクト構成になっていると思います。

f:id:mr-xxxx-bank-band:20190107104602p:plain

このままの状態で実行してみると以下のアプリケーションが起動します。何も表示されないアプリケーションです・・・

f:id:mr-xxxx-bank-band:20181228111729j:plain

表示したい内容を作成

表示したい内容はModuleプロジェクトを変更していきます。ViewA.xamlを見てみるとTextBlockがデフォルトで記述されています。

<Grid>
    <TextBlock Text="{Binding Message}"
                HorizontalAlignment="Center"
                VerticalAlignment="Center" />
</Grid>

ViewAViewModel.csには以下のような記述があり、TextBlockにView A from your Prism Moduleが表示されそうですが表示されません。

namespace ScreenModule.ViewModels
{
    public class ViewAViewModel : BindableBase
    {
        private string _message;
        public string Message
        {
            get { return _message; }
            set { SetProperty(ref _message, value); }
        }

        public ViewAViewModel()
        {
            Message = "View A from your Prism Module";
        }
    }
}

Moduleの内容を表示する場合は、ShellにModuleの内容を読み込ませる必要があります。

Moduleの読込

Moduleの内容をShellに読み込ませていきましょう。細かい説明は後にして以下のコードを追加します。

ScreenModuleプロジェクト内のScreenModuleModule.cs(名前が微妙)を以下のように変更します。

namespace ScreenModule
{
    public class ScreenModuleModule : IModule
    {
        public void OnInitialized(IContainerProvider containerProvider)
        {
            var regionMan = containerProvider.Resolve<IRegionManager>();
            regionMan.RegisterViewWithRegion("ContentRegion", typeof(Views.ViewA));
        }

        public void RegisterTypes(IContainerRegistry containerRegistry)
        {

        }
    }
}

次にScreenViewプロジェクト内のApp.xaml.csを以下のように変更します。

namespace ScreenView
{
    public partial class App
    {
        protected override Window CreateShell()
        {
            return Container.Resolve<MainWindow>();
        }

        protected override void RegisterTypes(IContainerRegistry containerRegistry)
        {

        }

        protected override void ConfigureModuleCatalog(IModuleCatalog moduleCatalog)
        {
            moduleCatalog.AddModule<ScreenModuleModule>(InitializationMode.WhenAvailable);
        }
    }
}

この状態で実行すると以下のようになります。

f:id:mr-xxxx-bank-band:20181228111733j:plain

めでたくTextBlockの内容が表示されました。

説明

なぜ、テキストが表示されるようになったのかを説明していきます。

まず、ScreenModuleModule.csの以下の記述ですが、

var regionMan = containerProvider.Resolve<IRegionManager>();
regionMan.RegisterViewWithRegion("ContentRegion", typeof(Views.ViewA));

ContentRegionというRegionへViews.ViewAというViewが読み込まれるようになるという記述です。

ContentRegionがいきなり出てきましたが、ScreenViewプロジェクト内のMainWindow.xamlにを以下のような記述があります。ContentRegionというコントロール内にViewの読み込みや切り替えができるようになります。

<Grid>
    <ContentControl prism:RegionManager.RegionName="ContentRegion" />
</Grid>

最後に、App.xaml.csの記述です。

protected override void ConfigureModuleCatalog(IModuleCatalog moduleCatalog)
{
    moduleCatalog.AddModule<ScreenModuleModule>(InitializationMode.WhenAvailable);
}

これはShellにModuleを読み込ませるための記述です。

イメージとして、AddModuleでModule本体を読み込み、RegionManagerを使ってViewを表示されるという感じでしょうか。

参考

以下のサイトを参考にさせていただいています。

WPF Prism episode: 3 ~ Re: ゼロから始める Prism 生活 ~ | :: halation ghost ::
← 前回記事 【WPF Prism episode: 2 ~ WPF のフレームワーク決まってますか?迷ってますか? Prism を選択してもらっていいですか? ~】前回の記事では、Prism の Module を Shell へ読み込む手順を Prism 公式サンプル を使って紹介したので、今回からは実際にサンプルア...

コメント

タイトルとURLをコピーしました