從16示例繼續學習Prism；
- 分析16示例RegionContext
  - 1、參考關系
  - 2、分析ModuleA工程
    - 2.1、ModuleAModule.cs
    - 2.2、Views下的PersonDetail.xaml
    - 2.3、Personetail.cs
    - 2.4、ViewModel下的PersonDetailViewModel.cs
    - 2.5、Business下的Person.cs
    - 2.5、PersonList.xaml
    - 2.6、ViewModels下的PersonListViewModel.cs
  - 3、分析RegionContext工程
    - 3.1、App.xaml
    - 3.2、App.cs
    - 3.3、Views下的MainWindow.xaml
    - 3.4、ViewModels下的MainWindowViewModel.cs
  - 運行代碼
  - 4、創建WPFRegionContextNote解決方案，嘗試自己寫一遍這個專案
    - 4.1、一步一步完成專案的創建
我創建了一個C#相關的交流群，用于分享學習資料和討論問題，歡迎有興趣的小伙伴：QQ群：542633085

從16示例繼續學習Prism；

分析16示例RegionContext

1、參考關系

這個示例包含2個工程ModuleA工程和RegionContext主工程

ModuleA工程參考了Prism.Wpf;RegionContext工程參考了Prism.Unity和ModuleA

2、分析ModuleA工程

ModuleA工程參考了Prism.Wpf；

2.1、ModuleAModule.cs

ModuleAModule繼承自Prism.Modularity.IModule；

實作了OnInitialized()方法，在方法中關聯ContentRegion和PersonList、PersonDetailsRegion和PersonDetail；

  public void OnInitialized(IContainerProvider containerProvider)
        {
            var regionManager = containerProvider.Resolve<IRegionManager>();
            regionManager.RegisterViewWithRegion("ContentRegion", typeof(PersonList));
            regionManager.RegisterViewWithRegion("PersonDetailsRegion", typeof(PersonDetail));
        }

2.2、Views下的PersonDetail.xaml

PersonDetail.xaml中添加prism="http://prismlibrary.com/"

添加了附加依賴項屬性prism:ViewModelLocator.AutoWireViewModel=true用于關聯ViewModel

Grid被分為三行兩列，分別放入了用于顯示姓、名、年齡的TextBlock控制元件，并系結到了SelectedPerson物件的FirstName、LastName、Age屬性上，

  <Grid x:Name="LayoutRoot" Background="White">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto"/>
            <ColumnDefinition />
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
        </Grid.RowDefinitions>

        <!-- First Name -->
        <TextBlock Text="First Name:" Margin="5" />
        <TextBlock Grid.Column="1" Margin="5" Text="{Binding SelectedPerson.FirstName}" />

        <!-- Last Name -->
        <TextBlock Grid.Row="1" Text="Last Name:" Margin="5" />
        <TextBlock Grid.Row="1" Grid.Column="1"  Margin="5" Text="{Binding SelectedPerson.LastName}" />

        <!-- Age -->
        <TextBlock Grid.Row="2" Text="Age:" Margin="5"/>
        <TextBlock Grid.Row="2" Grid.Column="1"  Margin="5" Text="{Binding SelectedPerson.Age}"/>
    </Grid>

2.3、Personetail.cs

在建構式中使用RegionContext.GetObervableContext下的PropertyChanged注冊事件處理函式來接收處理內容，這里怎么觸發的我們還看不到，只看處理函式，接收了sender并轉換為ObservableObject型別，然后取出了value轉化為Person，然后賦值了ViewModel下的SelectedPerson，ViewModel和View下是通過這些屬性系結的，ViewModel更新了，View也更新了顯示的屬性，

  public PersonDetail()
        {
            InitializeComponent();
            RegionContext.GetObservableContext(this).PropertyChanged += PersonDetail_PropertyChanged;
        }

        private void PersonDetail_PropertyChanged(object sender, System.ComponentModel.PropertyChangedEventArgs e)
        {
            var context = (ObservableObject<object>)sender;
            var selectedPerson = (Person)context.Value;
            (DataContext as PersonDetailViewModel).SelectedPerson = selectedPerson;
        }

2.4、ViewModel下的PersonDetailViewModel.cs

PersonDetailViewModel繼承自Prism.Mvvm.BindableBase.

創建Person型別的SelectedPerson屬性用于關聯View下的顯示內容，

2.5、Business下的Person.cs

Person繼承自INotifyPropertyChanged，用于實作屬性通知，

包含依賴項屬性FirstName、LastName、Age、LastUpdated；

包含一個Event PropertyChanged，當屬性值變更時觸發OnPropertyChanged()方法，

2.5、PersonList.xaml

PersonList.xaml下添加命名空間 prism="http://prismlibrary.com/"

設定附加依賴項屬性prism:ViewModelLocator.AutoWireViewModel=true用于自動關聯View和ViewModel，

界面被分為了2行，上半部分高100單位，下半部分自適應，

ListBox系結People，高度100

ContentControl 設定區域RegionName名字為PersonDetailsRegion

設定了prism:RegionManager.RegionContext="{Binding SelectedItem, ElementName=_listOfPeople}", 我們看到RegionContext是一個object型別，傳入的引數為DependencyObject型別，我們知道使用DependencyObject的話，支持依賴項屬性，

也就是說這里設定了一個附加依賴項屬性RegionContext,內容為ListBox中選中的元素物件，cs檔案中無額外代碼，

2.6、ViewModels下的PersonListViewModel.cs

創建一個ObservableCollection型別用于接收一組Person物件的屬性;

在建構式中初始化People，添加10個Person物件，和View下的PersonList.xaml中的ListBox系結;

3、分析RegionContext工程

RegionContext工程參考了Prism.Unity、ModuleA；

3.1、App.xaml

添加命名空間prism="http://prismlibrary.com/"

移除StartUpUri屬性

修改Application為prism:PrismApplication

3.2、App.cs

修改App繼承自PrismApplication；

重寫CreateShell()設定啟動表單為MainWindow；

重寫ConfigureModuleCatalog()添加ModuleAModule；

3.3、Views下的MainWindow.xaml

添加命名空間prism="http://prismlibrary.com/"

設定附加依賴項屬性prism:ViewModelLocator.AutoWireViewModel=true關聯ViewModel

在界面添加ConentControl 顯示控制元件，并設定附加依賴項屬性RegionName，用于關聯View，cs檔案中無額外代碼，

3.4、ViewModels下的MainWindowViewModel.cs

MainWindowViewModel繼承自Prism.Mvvm.BindableBase;

添加屬性Title用于顯示View；

運行代碼

我們看到,點擊LIstBox中的內容，下面會顯示詳情，切換時詳情也會跟著變化，

通過前面的分析，我們發現主要的代碼在Views下的PersonList.xaml中，在ContenControl上添加了prism:RegionManager.RegionContext的附加依賴項屬性，我們前面分析了這個屬性是object，傳入的型別是DependencyObject型別，支持所有的依賴項屬性，這里傳入了在ListBox中選中的Item物件，詳情資訊的View中使用RegionContext.GetObservableContext注冊PropertyChanged事件，

cs代碼中，通過獲取ViewModel來修改SelectedPerson物件，SelectedPerson是Person型別，繼承自INotifyPropertyChanged，

主要是需要傳入的地方設定prism:RegionManager.RegionContext和需要使用的地方注冊RegionContext.GetObservableContext(this).PropertyChanged += PersonDetail_PropertyChanged;我們寫個DEMO，驗證一下，

4、創建WPFRegionContextNote解決方案，嘗試自己寫一遍這個專案

4.1、一步一步完成專案的創建

4.1.1、添加ModuleAModule工程，添加ModuleAModule中對Prism.wpf參考；

4.1.2、添加ModuleAModule.cs；并繼承自Prism.Modularity.IModule;實作OnInitialized()但先什么也不寫;

using Prism.Ioc;
using Prism.Modularity;

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

        public void RegisterTypes(IContainerRegistry containerRegistry)
        {
            
        }
    }
}

4.1.3、創建Views檔案夾，并創建ProsonList.xaml自定義控制元件

ProsonList自定義控制元件中，包含一個ListBox用于顯示串列，包含一個ContentControl顯示控制元件，用于關聯詳情頁，布局為Grid，上下布局，上面高度為100，下面為自適應，

<UserControl x:
             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:ModuleAModule.Views"
             xmlns:prism="http://prismlibrary.com/"
             prism:ViewModelLocator.AutoWireViewModel="True"
             mc:Ignorable="d" 
             d:DesignHeight="450" d:DesignWidth="800">
      <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="100"/>
            <RowDefinition Height="Auto"/>
        </Grid.RowDefinitions>
        <ListBox x:Name="PeoplesListBox" />
        <ContentControl Grid.Row="1"/>
    </Grid>
</UserControl>

4.1.4、在Views下創建PersonDetail.xaml自定義控制元件

PersonDetail自定義控制元件包含3組顯示文本，用于顯示姓、名稱和年齡，

<UserControl x:
             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:ModuleAModule.Views" 
             xmlns:prism="http://prismlibrary.com/"
             prism:ViewModelLocator.AutoWireViewModel="True"
             d:DesignHeight="450" d:DesignWidth="800">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition />
            <RowDefinition/>
            <RowDefinition/>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition/>
            <ColumnDefinition/>
        </Grid.ColumnDefinitions>
        <TextBlock Text="First Name:" Margin="5"/>
        <TextBlock Grid.Column="1" Margin="5" />

        <TextBlock Text="Last Name" Grid.Row="1" Margin="5"/>
        <TextBlock Grid.Row="1" Grid.Column="1" Margin="5"/>

        <TextBlock Text="Age" Grid.Row="2" Margin="5"/>
        <TextBlock Grid.Row="2" Grid.Column="1" Margin="5"/>
    </Grid>
</UserControl>

這樣的話，整體的顯示就差不多了，我們現在開始關聯資料

4.1.5、創建Business檔案夾，添加Person.cs類

實作屬性通知，person繼承自INotifyPropertyChanged；

創建First Name、Last Name、Age屬性，并在Set中觸發通知

using System.ComponentModel;
using System.Runtime.CompilerServices;

namespace ModuleAModule.Business
{
    public class Person : INotifyPropertyChanged
    {
        private string _firstName = string.Empty;
        public string FirstName
        {
            get { return _firstName; }
            set
            {
                _firstName = value;
                OnPropertyChanged();
            }
        }

        private string _lastName = string.Empty;
        public string LastName
        {

            get { return _lastName; }
            set
            {
                _lastName = value;
                OnPropertyChanged();
            }
        } 

        private int _age;

        public int Age
        {
            get
            {
                return _age;
            }

            set
            {
                _age = value;
                OnPropertyChanged(); 
            }
        }

        protected void OnPropertyChanged([CallerMemberName] string propertyname = null)
        {
            PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyname));
        }
        public event PropertyChangedEventHandler PropertyChanged;

        /// <summary>
        /// 如果代碼是你手敲的，你就會注意這個注釋，這個tostring 你寫和不寫是2個效果，可以再最后寫完代碼是時候，，試驗一下，
        /// </summary>
        /// <returns></returns>
        public override string ToString()
        {
            return string.Format("{0}, {1}", LastName, FirstName);
        }
    }
}

4.1.6、創建ViewModel檔案夾并添加PersonListViewModel.cs

主要是創建PersonList.xaml下需要使用的資料，比如用于顯示在ListBox里的資料源，資料源是一個Person型別的資料集合，代碼如下：

using ModuleAModule.Business;
using Prism.Mvvm;
using System.Collections.ObjectModel;

namespace ModuleAModule.ViewModels
{
    public class PersonListViewModel : BindableBase
    {
        ObservableCollection<Person> _people;
        public ObservableCollection<Person> People
        {
            get { return _people; }

            set { SetProperty(ref _people, value); }
        }
        public PersonListViewModel()
        {
            CreatePeple();
        }

        private void CreatePeple()
        {
            var people = new ObservableCollection<Person>();

            for (int i = 0; i < 10; i++)
            {
                people.Add(new Person()
                {
                    FirstName = $"First {i}",
                    LastName = $"Last {i}",
                    Age = i,
                }); 
            }
            People = people;
        }
    }
}

4.1.7、創建完PersonListViewModel.cs回到Views下的PersonList.xaml系結VM，

  <ListBox x:Name="PeoplesListBox" ItemsSource="{Binding People}"/>

4.1.8、添加WPFRegionContext的exe主工程用于顯示List

添加WPF程式，設定名字為WPFRegionContext，添加Prism.Unity包參考、添加ModuleAModule工程的參考；

打開App.xaml，添加命名空間xmlns:prism="http://prismlibrary.com/"; 移除StartUpUri屬性；修改Application繼承自PrismApplication；

打開App.cs，修改App繼承自PrismApplication；

重寫CreateShell()方法，（這里我默認打完override沒有智能提示，我從新生成一次工程后，提示有了，手動using Prism.Ioc解決回傳window報錯為object問題），設定默認啟動頁；

重寫RegisterTypes()不重寫報錯；

重寫ConfigureModuleCatalog()添加對ModuleAModule的參考，代碼如下：

using Prism.Unity;
using Prism.Ioc;
using System.Windows;
using Prism.Modularity;

namespace WPFRegionContext
{
    /// <summary>
    /// App.xaml 的互動邏輯
    /// </summary>
    public partial class App : PrismApplication
    {
        protected override Window CreateShell()
        {
            return Container.Resolve<MainWindow>();
        }
        protected override void RegisterTypes(IContainerRegistry containerRegistry)
        {
           
        }
        protected override void ConfigureModuleCatalog(IModuleCatalog moduleCatalog)
        {
            base.ConfigureModuleCatalog(moduleCatalog);
            moduleCatalog.AddModule<ModuleAModule.ModuleAModule>();
        }
    }
}

4.1.9、打開MainWindow.xaml添加用于顯示ListBox的ContentControl

添加命名空間、設定自動關聯ViewModel、添加顯示控制元件，設定RegionName；代碼如下

<Window x:
        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:WPFRegionContext"
        xmlns:prism="http://prismlibrary.com/"
        prism:ViewModelLocator.AutoWireViewModel="True"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Grid>
        <ContentControl prism:RegionManager.RegionName="ContentRegion"/>
    </Grid>
</Window>

4.1.10、打開ModuleAModule工程下的ModuleAModule.cs

再OnInitialized()方法中關聯Region和PersonList

 public void OnInitialized(IContainerProvider containerProvider)
        {
            var regionManager = containerProvider.Resolve<IRegionManager>();
            regionManager.RegisterViewWithRegion("ContentRegion", typeof(PersonList));
        }

注意這里是RegisterViewWithRegion，這樣就關聯了起來，我們先跑起來看看，能否正確顯示ListBox的內容；如下圖，嘗試修改Person.cs下的tostring()方法，或去掉該方法，看一下效果，這里也可以用控制元件模板，再修改，

我們繼續往下，這里就是該示例最關鍵的RegionContext了，

4.1.11、打開Views下的PersonList.xaml，找到我們添加的ContentControl顯示物件，用于顯示選中的listbox物件，先系結，然后設定RegionContext，RegionContext是object型別，傳入的是DependencyObject，主要是添加了ContentControl顯示控制元件的2個附加依賴項屬性，整體代碼如下：

<UserControl x:
             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:ModuleAModule.Views"
             xmlns:prism="http://prismlibrary.com/"
             prism:ViewModelLocator.AutoWireViewModel="True"
             mc:Ignorable="d"  
             d:DesignHeight="450" d:DesignWidth="800" >
      <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="100"/>
            <RowDefinition Height="Auto"/>
        </Grid.RowDefinitions>
        <ListBox x:Name="PeoplesListBox" ItemsSource="{Binding People}"/>
        <ContentControl
            Grid.Row="1"
            prism:RegionManager.RegionName="PersonDetailRegion" 
            prism:RegionManager.RegionContext="{Binding ElementName=PeoplesListBox,Path=SelectedItem}"/>
    </Grid>
</UserControl>

4.1.12、添加完了RegionName 和RegionContext，我們去關聯區域和顯示的視圖，打開ModuleAModule.cs檔案修改代碼如下：

 public void OnInitialized(IContainerProvider containerProvider)
        {
            var regionManager = containerProvider.Resolve<IRegionManager>();
            regionManager.RegisterViewWithRegion("ContentRegion", typeof(PersonList));
            regionManager.RegisterViewWithRegion("PersonDetailRegion", typeof(PersonDetail));
        }

4.1.13、添加ViewModels下的PersonDetailViewModel.cs用于關聯View下的顯示內容

using ModuleAModule.Business;
using Prism.Mvvm;

namespace ModuleAModule.ViewModels
{
    public class PersonDetailViewModel : BindableBase
    {
        private Person _selectPerson;
        public Person SelectPerson
        {
            get { return _selectPerson; }
            set { 
                SetProperty(ref _selectPerson, value);
            }
        }
        public PersonDetailViewModel()
        {
            
        }
    }
}

4.1.14、回到Views下的PersonDetail.xaml檔案夾，系結顯示控制元件和ViewModel下元素的顯示關系；這里請注意，我們的系結關系是再SelectPerson的物件下的屬性，所以View中要寫全SelectPerson，整體代碼如下：

<UserControl x:
             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:ModuleAModule.Views" 
             xmlns:prism="http://prismlibrary.com/"
             prism:ViewModelLocator.AutoWireViewModel="True" >
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition />
            <RowDefinition/>
            <RowDefinition/>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition/>
            <ColumnDefinition/>
        </Grid.ColumnDefinitions>
        <TextBlock Text="First Name:" Margin="5"/>
        <TextBlock Grid.Column="1" Margin="5" Text="{Binding SelectPerson.FirstName}" />

        <TextBlock Text="Last Name" Grid.Row="1" Margin="5"/>
        <TextBlock Grid.Row="1" Grid.Column="1" Margin="5" Text="{Binding SelectPerson.LastName}"/>

        <TextBlock Text="Age" Grid.Row="2" Margin="5"/>
        <TextBlock Grid.Row="2" Grid.Column="1" Margin="5" Text="{Binding SelectPerson.Age}"/>
    </Grid>
</UserControl>

運行代碼，就可以看到啦，這篇就寫這么多啦，這里可以嘗試以下為什么RegionContext的物件需要和PersonList放一起，拿出去放在MainWindow下可以嗎，Region多次重疊之后，這個RegionContext是什么樣的啊，都可以實驗一下，

我創建了一個C#相關的交流群，用于分享學習資料和討論問題，歡迎有興趣的小伙伴：QQ群：542633085

轉載請註明出處，本文鏈接：https://www.uj5u.com/net/295839.html

標籤：WPF

上一篇：dotnet 對指標轉換為結構體多個不同方法的性能分析

下一篇：WPF進階技巧和實戰07--自定義元素02

七、從GitHub瀏覽Prism示例代碼的方式入門WPF下的Prism之RegionContext