2020年4月15日 星期三

WPF Prism 3 - 首次使用 Module 與 Prism 開發框架來製作一個 Hello World 教學說明程式

WPF Prism 3 - 首次使用 Module 與 Prism 開發框架來製作一個 Hello World 教學說明程式

在這篇文章,將會使用 Prism 中的 Module 模組功能,實作第一篇文章的 Hello World 相同功能,因此,在這裡將會建立一個類別庫,將相關 View & ViewModel 都建立在這個類別庫內。
這個說明專案的原始碼位於 WPFPrismHelloWorldWithModule

準備工作

  • 首先,先要安裝 [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 擴充功能
  • 點選右下角的 [下一步] 按鈕
  • 現在 [設定新的專案] 對話窗將會出現
  • 請在這個對話窗內,輸入適當的 [專案名稱] 、 [位置] 、 [解決方案名稱]
    在這裡請輸入 [專案名稱] 為 WPFPrismHelloWorld
  • 在最下方的 [架構] 部分,建議選取最新的 [.NET Framework 4.8]
  • 完成後,請點選 [建立] 按鈕
  • 當出現 [PRISM PROJECT WIZARD] 對話窗的時候
  • 請在 [Select Container] 選擇容器這個欄位之下拉選單,選擇你要使用的 DI 相依性注入容器,我個人習慣使用 Unity 這個 Ioc 容器
  • 之後,點選 [CREATE PROJECT] 這個按鈕
稍微等會一段時間,具有 Prism 開發框架的 WPF 專案將會建立起來

建立要設計 Module 的類別庫專案 - WPF 使用者控制項類別庫 (.NET Framework)

  • 滑鼠右擊方案節點,選擇 [加入] > [新增專案]
  • 當 [新增專案] 對話出現之後
  • 找到並且點選 [WPF 使用者控制項類別庫 (.NET Framework)]

    請注意

    這裡需要找到的是 使用 C# 程式語言,並且是 .NET Framework 用的 [WPF 使用者控制項類別庫 (.NET Framework)],這不是一般的 [類別庫 (.NET Framework)]
  • 選擇完後,點選 [下一步] 按鈕
  • 在 [專案名稱] 欄位中,輸入 HostModule
  • 點選 [建立] 按鈕

加入 WPF 套件

  • 滑鼠右擊剛剛建立的專案節點
  • 選擇 [管理 NuGet 套件]
  • 找到 [Prism.Wpf] 這個套件,並且安裝起來

在剛剛建立的專案中,加入兩個 View 與進行 Module 類別設計

  • 滑鼠右擊剛剛建立的專案,選擇 [加入] > [新增資料夾],建立 Views & ViewModels 這兩個資料夾
  • 滑鼠右擊 [Views] 資料夾
  • 選擇 [加入] > [新增項目]
  • 此時,[新增項目] 對話窗將顯示出來
  • 請在該對話窗的左方,展開節點到 [已安裝] > [Visual C#] > [Prism] > [WPF]
  • 在中間區域選擇 [Prism UserControl (WPF)] 選項
  • 在下方名稱欄位輸入 MyView
  • 最後點選 [新增] 按鈕
此時,將會看到該專案的 [Views] 資料夾內新產生了一個 [MyView.xaml] 這個檔案,另外,在 [ViewModel] 資料夾內也產生了一個 [MyViewViewModel] 這個類別檔案。
打開 [MyView.xaml] 檔案,填入底下 XAML 標記宣告
<UserControl x:Class="HostModule.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>
接下來,繼續產生一個 YourView 檢視
  • 首先,滑鼠右擊 [Views] 資料夾
  • 選擇 [加入] > [新增項目]
  • 此時,[新增項目] 對話窗將顯示出來
  • 請在該對話窗的左方,展開節點到 [已安裝] > [Visual C#] > [Prism] > [WPF]
  • 在中間區域選擇 [Prism UserControl (WPF)] 選項
  • 在下方名稱欄位輸入 YourView
  • 最後點選 [新增] 按鈕
此時,將會看到該專案的 [Views] 資料夾內新產生了一個 [YourView.xaml] 這個檔案,另外,在 [ViewModel] 資料夾內也產生了一個 [YourViewViewModel] 這個類別檔案。
打開 [YourView.xaml] 檔案,填入底下 XAML 標記宣告
<UserControl x:Class="HostModule.Views.YourView"
             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="Yellow">
        <TextBlock Text="Thank You" FontSize="48" Foreground="LightBlue"/>
    </Grid>
</UserControl>
  • 滑鼠右擊這個專案節點,選擇 [加入] > [類別]
  • 當 [新增項目] 對話窗出現後,在下方的 [名稱] 欄位中輸入 HostModuleModule
  • 將底下的 C# 程式碼,替換掉剛剛產生的檔案內容
using HostModule.Views;
using Prism.Ioc;
using Prism.Modularity;
using Prism.Regions;
using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

namespace HostModule
{
    public class HostModuleModule : IModule
    {
        public void OnInitialized(IContainerProvider containerProvider)
        {
        }

        public void RegisterTypes(IContainerRegistry containerRegistry)
        {
            containerRegistry.RegisterForNavigation<MyView>();
            containerRegistry.RegisterForNavigation<YourView>();
        }
    }
}

修正主專案並加入這個模組

  • 滑鼠右擊主專案 (也就是這個 WPFPrismHelloWorldWithModule 專案) 內的 [參考] > [加入參考]
  • 當 [參考管理員] 對話窗出現之後,勾選 [HostModule] 這個節點
  • 點選 [確定] 按鈕
  • 在該專案根目錄下,找到 App.xaml 這個檔案節點
  • 展開該節點,將會看到一個 [App.xaml.cs] 這個節點
  • 滑鼠雙擊打開 [App.xaml.cs] 這個節點
  • 建立一個覆寫 ConfigureModuleCatalog 方法
  • 將該方法修改成為底下的程式碼
using WPFPrismHelloWorldWithModule.Views;
using Prism.Ioc;
using Prism.Modularity;
using System.Windows;

namespace WPFPrismHelloWorldWithModule
{
    /// <summary>
    /// Interaction logic for App.xaml
    /// </summary>
    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<HostModule.HostModuleModule>();
        }
    }
}

設計 Shell 頁面架構

  • 在 [Views] 資料夾內,找到並打開 [MainWindow.xaml] 檔案
  • 將底下的 XAML 標記宣告,替換掉這個檔案原先內容
<Window x:Class="WPFPrismHelloWorldWithModule.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 Background="LightGray">
        <Grid.RowDefinitions>
            <RowDefinition Height="50"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <StackPanel
            HorizontalAlignment="Center"
            Orientation="Horizontal">
            <Button Command="{Binding SayHiCommand}" Width="150">Hi</Button>
            <Button Command="{Binding ThankYouCommand}" Width="150">Thank You</Button>
            <Button Command="{Binding RemoveCommand}" Width="150">Remove</Button>
        </StackPanel>
        <ContentControl Grid.Row="1" prism:RegionManager.RegionName="ContentRegion" />
    </Grid>
</Window>
  • 在 [ViewModels] 資料夾內,找到並打開 [MainWindowViewModel.cs] 檔案
  • 使用底下 C# 程式碼替換掉原先內容
using HostModule.Views;
using Prism.Commands;
using Prism.Ioc;
using Prism.Mvvm;
using Prism.Regions;

namespace WPFPrismHelloWorldWithModule.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 DelegateCommand SayHiCommand { get; set; }
        public DelegateCommand RemoveCommand { get; set; }
        public DelegateCommand ThankYouCommand { get; set; }
        public MainWindowViewModel(IRegionManager regionManager, IContainerExtension container)
        {
            SayHiCommand = new DelegateCommand(() =>
            {
                IRegion region = regionManager.Regions["ContentRegion"];
                region.RemoveAll();
                var view = container.Resolve<MyView>();
                region.Add(view);
            });
            ThankYouCommand = new DelegateCommand(() =>
            {
                IRegion region = regionManager.Regions["ContentRegion"];
                region.RemoveAll();
                var view = container.Resolve<YourView>();
                region.Add(view);
            });
            RemoveCommand = new DelegateCommand(() =>
            {
                IRegion region = regionManager.Regions["ContentRegion"];
                region.RemoveAll();
            });
        }
    }
}

執行與測試

現在可以執行這個使用 Prism 開發的 WPF 專案,看看是不是如同第一篇文章規劃的一樣方式來進行運作。



2020年4月14日 星期二

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

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));
        }
    }
}

執行與測試

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




2020年4月13日 星期一

WPF Prism 1 - 首次使用 Prism 開發框架來製作一個 Hello World 教學說明程式

WPF Prism 1 - 首次使用 Prism 開發框架來製作一個 Hello World 教學說明程式

在這篇文章,將會帶領想使用 Prism Library 這套開發框架,使用 MVVM 與許多 Prims 內建的設計模式 Design Pattern 功能,來讓想要了解如何進行 WPF 專案開發的程式設計師有實際練習實作 Hands-on 的參考說明教學。
在這個練習中,將會設計一個 Shell ,其中只有一個 Region ,不過,卻要提供三個按鈕,其中兩個按鈕,可以分別動態的加入所指定 View 到這個 Region 內,如此,將會看到這個視窗的畫面將會有所變化。而另外一個按鈕,將會把 Region 的 View 移除。
在這個練習中,將不會使用到 Module 這項功能,所有的相關設計,都將會在同一個專案 (.NET 組件 Assembly ) 下來開發。
這裡將會是一開始執行的畫面,在該畫面中,實際上是在 MainWindow 這個 Window 元件下所設計的成果,而最上方將會有三個按鈕,而在下方,則是一個 Region 區域,這塊區域將會使用 Prism 提供的機制,可以在執行時期,動態的新增、移除、導航到其他 View 上。
當點選了 Hi 按鈕之後,此時,將會透過 MainWindow 之 ViewModel 類別內(注意,這裡沒有使用到 callbehind 的設計方式,而 ViewModel 的指派,也是透過 Prism 提供 ViewModel Locator 定位器來自動設定完成) 的 DelegateCommand 命令物件進行執行相關委派程式碼,在此,將會透過 RegionManager 這個物件(該物件使用相依性注入的方式,透過建構式來取得該物件,也就是使用了建構式注入方法)來進行動態的指定使用 [MyView] 這個 檢視 View 到這個應用程式視窗的下方,如此,將會變成底下的畫面截圖。
第二個按鈕, Thank You ,設計方式如同 Hi 按鈕,只不過在這裡將會 [YourView] 注入到這個視窗的 Region 內。
第三個按鈕,則是更加簡單,那就是把這個 Region 內的 View ,全部都移除,當然,所完成的執行結果就是該視窗下方的 Region 區域,將沒有任何動態內容顯示出來。

更多關於 Blazor 教學影片,可以參考 Blazor 教學影片播放清單 或者 Blazor 快速體驗教學影片撥放清單。也歡迎訂閱本 .NET / Blazor / Xamarin.Forms 影片頻道 。

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

準備工作

  • 首先,先要安裝 [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 擴充功能
  • 點選右下角的 [下一步] 按鈕
  • 現在 [設定新的專案] 對話窗將會出現
  • 請在這個對話窗內,輸入適當的 [專案名稱] 、 [位置] 、 [解決方案名稱]
    在這裡請輸入 [專案名稱] 為 WPFPrismHelloWorld
  • 在最下方的 [架構] 部分,建議選取最新的 [.NET Framework 4.8]
  • 完成後,請點選 [建立] 按鈕
  • 當出現 [PRISM PROJECT WIZARD] 對話窗的時候
  • 請在 [Select Container] 選擇容器這個欄位之下拉選單,選擇你要使用的 DI 相依性注入容器,我個人習慣使用 Unity 這個 Ioc 容器
  • 之後,點選 [CREATE PROJECT] 這個按鈕
稍微等會一段時間,具有 Prism 開發框架的 WPF 專案將會建立起來
WPF for Prism

加入兩個 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>
接下來,繼續產生一個 YourView 檢視
  • 首先,滑鼠右擊 [Views] 資料夾
  • 選擇 [加入] > [新增項目]
  • 此時,[新增項目] 對話窗將顯示出來
  • 請在該對話窗的左方,展開節點到 [已安裝] > [Visual C#] > [Prism] > [WPF]
  • 在中間區域選擇 [Prism UserControl (WPF)] 選項
  • 在下方名稱欄位輸入 YourView
  • 最後點選 [新增] 按鈕
此時,將會看到該專案的 [Views] 資料夾內新產生了一個 [YourView.xaml] 這個檔案,另外,在 [ViewModel] 資料夾內也產生了一個 [YourViewViewModel] 這個類別檔案。
打開 [YourView.xaml] 檔案,填入底下 XAML 標記宣告
<UserControl x:Class="WPFPrismHelloWorld.Views.YourView"
             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="Yellow">
        <TextBlock Text="Thank You" FontSize="48" Foreground="LightBlue"/>
    </Grid>
</UserControl>
  • 在該專案根目錄下,找到 App.xaml 這個檔案節點
  • 展開該節點,將會看到一個 [App.xaml.cs] 這個節點
  • 滑鼠雙擊打開 [App.xaml.cs] 這個節點
  • 在 [App.xaml.cs] 檔案內,找到 RegisterTypes 方法
  • 將該方法修改成為底下的程式碼
protected override void RegisterTypes(IContainerRegistry containerRegistry)
{
    containerRegistry.RegisterForNavigation<MyView>(nameof(MyView));
    containerRegistry.RegisterForNavigation<YourView>(nameof(YourView));
}

設計 Shell 頁面架構

  • 在 [Views] 資料夾內,找到並打開 [MainWindow.xaml] 檔案
  • 將底下的 XAML 標記宣告,替換掉這個檔案原先內容
<Window x:Class="WPFPrismHelloWorld.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 Background="LightGray">
        <Grid.RowDefinitions>
            <RowDefinition Height="50"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <StackPanel
            HorizontalAlignment="Center"
            Orientation="Horizontal">
            <Button Command="{Binding SayHiCommand}" Width="150">Hi</Button>
            <Button Command="{Binding ThankYouCommand}" Width="150">Thank You</Button>
            <Button Command="{Binding RemoveCommand}" Width="150">Remove</Button>
        </StackPanel>
        <ContentControl Grid.Row="1" prism:RegionManager.RegionName="ContentRegion" />
    </Grid>
</Window>
  • 在 [ViewModels] 資料夾內,找到並打開 [MainWindowViewModel.cs] 檔案
  • 使用底下 C# 程式碼替換掉原先內容
using Prism.Commands;
using Prism.Ioc;
using Prism.Mvvm;
using Prism.Regions;
using WPFPrismHelloWorld.Views;

namespace WPFPrismHelloWorld.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 DelegateCommand SayHiCommand { get; set; }
        public DelegateCommand RemoveCommand { get; set; }
        public DelegateCommand ThankYouCommand { get; set; }
        public MainWindowViewModel(IRegionManager regionManager, IContainerExtension container)
        {
            SayHiCommand = new DelegateCommand(() =>
            {
                IRegion region = regionManager.Regions["ContentRegion"];
                region.RemoveAll();
                var view = container.Resolve<MyView>();
                region.Add(view);
            });
            ThankYouCommand = new DelegateCommand(() =>
            {
                IRegion region = regionManager.Regions["ContentRegion"];
                region.RemoveAll();
                var view = container.Resolve<YourView>();
                region.Add(view);
            });
            RemoveCommand = new DelegateCommand(() =>
            {
                IRegion region = regionManager.Regions["ContentRegion"];
                region.RemoveAll();
            });
        }
    }
}

執行與測試

現在可以執行這個使用 Prism 開發的 WPF 專案,看看是不是如同最初說明一樣的方式來進行運作。