WPF Prism 2 - 啟動 WPF 程式之後，在不使用 Module 情況下，如何自動顯示 Region 內的 View

2020年4月14日星期二

WPF Prism 2 - 啟動 WPF 程式之後，在不使用 Module 情況下，如何自動顯示 Region 內的 View

在上一篇文章中，已經說明如何使用 Prism Template Pack 這個 Visual Studio 擴充功能工具，建立一個使用 Prism 開發框架的 WPF 專案，並且在這個專案中展示出如何自動加入、切換、移除 Region 內的 View，這一切的呈現的功能都是在執行時期所發生的。

不過，關於上一篇文章的範例專案若一開始執行的話，將會發現到新顯示的視窗內，並沒有任何 View 顯示出來，必須要點選按鈕之後，才會顯示出來；因此，若想要做到 App 一起動的話，就要自動顯示在螢幕上的功能，可以參考這篇文章的做法，這裡是使用了 [IRegionManager.RegisterViewWithRegion] 方法來做到，不過，在這裡還是同樣的，不使用 Code Behind 的作法，而是採用了 MVVM 的做法，那就是在 Shell 的 ViewModel 內來完成這個工作。

這個說明專案的原始碼位於 WPFPrismNoModuleAutoView

準備工作

首先，先要安裝 [Prism Template Pack] 到 Visual Studio 2019 內
打開 Prism Template Pack 擴充功能網站
下載並且安裝這個擴充功能

建立 WPF for Prism 的專案

打開 Visual Studio 2019
點選右下方的 [建立新的專案] 按鈕
[建立新專案] 對話窗將會顯示在螢幕上
從[建立新專案] 對話窗的中間區域，找到 [Prism Blank App (WPF)] 這個專案樣板選項，並且選擇這個項目

若沒有看到這個選項，則表示你的 Visual Studio 2019 開發環境中，還沒有安裝 Prism Template Pack 擴充功能
點選右下角的 [下一步] 按鈕
現在 [設定新的專案] 對話窗將會出現
請在這個對話窗內，輸入適當的 [專案名稱] 、 [位置] 、 [解決方案名稱]

在這裡請輸入 [專案名稱] 為 WPFPrismNoModuleAutoView
在最下方的 [架構] 部分，建議選取最新的 [.NET Framework 4.8]
完成後，請點選 [建立] 按鈕
當出現 [PRISM PROJECT WIZARD] 對話窗的時候
請在 [Select Container] 選擇容器這個欄位之下拉選單，選擇你要使用的 DI 相依性注入容器，我個人習慣使用 Unity 這個 Ioc 容器
之後，點選 [CREATE PROJECT] 這個按鈕

稍微等會一段時間，具有 Prism 開發框架的 WPF 專案將會建立起來

加入 View

首先，滑鼠右擊 [Views] 資料夾
選擇 [加入] > [新增項目]
此時，[新增項目] 對話窗將顯示出來
請在該對話窗的左方，展開節點到 [已安裝] > [Visual C#] > [Prism] > [WPF]
在中間區域選擇 [Prism UserControl (WPF)] 選項
在下方名稱欄位輸入 MyView
最後點選 [新增] 按鈕

此時，將會看到該專案的 [Views] 資料夾內新產生了一個 [MyView.xaml] 這個檔案，另外，在 [ViewModel] 資料夾內也產生了一個 [MyViewViewModel] 這個類別檔案。

打開 [MyView.xaml] 檔案，填入底下 XAML 標記宣告

<UserControl x:Class="WPFPrismHelloWorld.Views.MyView"
             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">
    <Grid Background="LightGreen">
        <TextBlock Text="Hello World" FontSize="48" Foreground="HotPink"/>
    </Grid>
</UserControl>

設定 Region 要自動顯示的 View

在 [ViewModels] 資料夾下，找到並且打開 [MainWindowViewModel.cs] 這個檔案
找到建構式，加入 IRegionManager 這個參數型別，要求容器使用建構式注入的方式，注入這個具體實作類別進來
在建構函式內，使用 [IRegionManager.RegisterViewWithRegion] 這個方法，進行 Region 要使用哪個 View 的註冊與加入的行為要求

在 RegisterViewWithRegion 方法的第一個參數，使用的 "ContentRegion" 這個字串，這是因為在這個 App Shell 中，僅宣告一個 Region，而該 Region 的名稱就是 "ContentRegion"；這點可以從 [MainWindow.xaml] 這個檔案內看的出來

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

關於 [MainWindowViewModel.cs] 的完整程式碼，將會如下所示

using Prism.Mvvm;
using Prism.Regions;
using WPFPrismNoModuleAutoView.Views;

namespace WPFPrismNoModuleAutoView.ViewModels
{
    public class MainWindowViewModel : BindableBase
    {
        private string _title = "Prism Application";
        private readonly IRegionManager regionManager;

        public string Title
        {
            get { return _title; }
            set { SetProperty(ref _title, value); }
        }

        public MainWindowViewModel(IRegionManager regionManager)
        {
            this.regionManager = regionManager;
            regionManager.RegisterViewWithRegion("ContentRegion", typeof(MyView));
        }
    }
}

執行與測試

這個範例專案的執行結果將會如底下螢幕截圖

C# .NET Blazor MAUI Xamarin Research

2020年4月14日星期二