四、從GitHub瀏覽Prism示例程式碼的方式入門WPF下的Prism之Mvvm的13示例

上一篇之分析了示例,沒有最終寫DEMO,把這一篇分析完,總結後一起寫Prism下的MVVM例子。

這一篇開始分析從13示例開始,分析到MVVM主要部分結束然後寫一個分析後的總結DEMO

添加一段新的內容:Prism中新的內容還是挺多的,之前的思路是一篇裡面寫好幾個Prism的例子,過一遍示例的程式碼,過完所有的Prism也就學完了。結果到第13篇的時候,卡住我了,2天才解決完這一個示例,而且發現其實只是Prism的一個特性,這個Prism還是要慢慢學,不要著急。有可能他新的一個介面,只有很少的程式碼,但是實際上實際幹了很多的事情。比如這一篇里實際就是在講IActiveAware介面。關鍵參數只有2個。但是整整2天我才搞明白是怎麼回事。最近工作上、家庭上的事情比較多,感覺太累了,但是我會調整好狀態,堅持下去。

這一篇示例主要是分析IActiveAware;

從13示例繼續學習Prism下的MVVM思想

分析13UsingCompositeCommands示例

1、引用關係

UsingCompositeCommands包含3個工程

1.1、ModuleA工程引用了Prism.Wpf包、UsingCompositeCommands.Core;

1.2、UsingCompositeCommands工程引用了Prism.Unity包、ModuleA項目、UsingCompositeCommands.Core

1.3、UsingCompositeCommands.Core引用了Prism.Core包

我們從引用關係最小的開始看,UsingCompositeCommands.Core

2、分析UsingCompositeCommands.Core工程

2.1、新增ApplicationComands.cs

創建了ApplicationCommands介面,包含了一個屬性SaveCommand;

添加類,並繼承自IApplicationCommands介面

 public class ApplicationCommands : IApplicationCommands
    {
        private CompositeCommand _saveCommand = new CompositeCommand(true);
        public CompositeCommand SaveCommand
        {
            get { return _saveCommand; }
        }
    }

這裡和12例子有一個明顯的差別,在初始化_SaveCommand的時候new CompositeCommand(true),傳入了True。這裡比較重要, 這裡使用F12可以看到參數monitorCommandActivity,傳入這個參數為True時,CompositeCommand類將會進行以下行為:

  • CanExecute。只有當所有的活動命令可以被執行時,才會返回true。非活動的命令將不會執行。
  • Execute。執行處於活動狀態的命令,非活動的命令不會執行。

通過在ViewModel中實現IActiveAware介面,在Region中的子View變成活動窗口或者非活動窗口時都會被通知。當子View狀態改變時,只有當前處於活動狀態的View下的ViewModel的Command才會被執行。

3、分析主工程UsingCompositeCommands

引用了Prism.Unity包;

引用了ModuleA;

引用了UsingCompositeCommands.Core;

3.1、App.xaml

添加命名空間:xmlns:prism=”//prismlibrary.com/“;

修改Appication為prism:PrismApplication;

去掉StartupUri屬性;

3.2、App.cs

重寫CreateShell()方法設置啟動窗體

重寫RegisterTypes()

使用容器注入UsingCompositeCommands.Core中的IApplicationCommands,以便在ViewModel中使用;

重寫ConfigureModuleCatalog()

使用程式碼載入ModuleA項目中的ModuleAModule;

3.3、Views下的MainWindow.xaml

關鍵部分:

添加命名空間xmlns:prism=”//prismlibrary.com/

設置prism.ViewModelLocator.AutoWireViewModel=Ture

添加了TabControl控制項,並設置了附加依賴項屬性RegionName,用於設置關聯View的顯示區域。

添加了Button按鈕,設置了Command為ViewModel下的ApplicationCommands.SaveCommand,ApplicationCommands是App.cs在啟動是重寫RegisterTypes()時註冊的。cs中無新增程式碼

3.4、ViewModel下的MainWindowViewModel.cs

MaindowViewModel繼承自BindableBase

創建了IApplicationCommands屬性並構造函數中初始化IApplicationCommands,

4、分析ModuleA工程

ModuleA工程引用Prism.Wpf包;

引用UsingComoisuteCommands.Core;

4.1、ModuleAModule

ModuleAModule繼承自IModule,

在OInitialized方法中,使用containerProvider關聯了Region和View。用於在顯示區域添加View

4.2、ViewModels下的TabViewModel.cs

TabViewModel繼承自BindableBase和IActiveAware。

就是這個IActiveAware卡了我兩天。

其他的地方不講,跟12示例一樣,就講13示例里不一樣的。

看屬性IsActive。在Set時觸發了OnIsActiveChanged()

根據調試時的情況。當只點擊一個TabView的時候,IsActive只觸發一次,第二次點擊的時候,有2個IsActive進入兩次,點擊第三個的時候有3個。

 bool _isActive;
        public bool IsActive
        {
            get { return _isActive; }
            set
            {
                _isActive = value;
                OnIsActiveChanged();
            }
        }
        private void OnIsActiveChanged()
        {
            UpdateCommand.IsActive = IsActive;

            IsActiveChanged?.Invoke(this, new EventArgs());
        }

一直沒搞明白後來F12跳轉到了IActiveAware才明白,這個是用來控制活動View和ViewModel下的Command的。而決定這個是否工作的就是在UsingCompositeCommands.Core下的ApplicationCommands 在初始化_saveCommand欄位時的true參數

private CompositeCommand _saveCommand = new CompositeCommand(true);

我在看明白後,嘗試設置true為false,發現所有的View的Command都會執行了,

執行主工程下的Save時,3個TabView都會更新。而值為true的時候,只有處於激活狀態的TabViewModel才會更新。

結合上一篇的內容我們寫一個DEMO

打開12、13示例,我們先回憶一遍12、13示例在幹什麼。我們從邏輯關聯最少的開始回憶道邏輯關聯最多的。這裡希望我們自己去回憶,想不起來了,在去看。

1.1 兩個示例的UsingCompositeCommands.Core都引用了Prism.Core;

創建了IApplicationCommands和ApplicationCommands;

添加了2個CompsiteCommand,一個是不帶參數的,一個是帶參數true的。這個是配合Modules下的IactivateAware介面使用的,用於是是否只更新活動狀態下的ViewModel的內容。Prism.Core的內容就結束了

1.2 兩個UsingCompositeCommands.Modues都引用了Prism.Wpf和UsingCompositeCommands.Core;

ModuleAModule都繼承自ImOdule 並重寫了OnInitialized方法,在裡面完成了Region跟View的關聯,和初始化。Views和ViewModels通過在xaml中編寫Prism.ViewModelLocator.AutoWrieViewModel=true實現自動關聯,在ViewModel中通過構造函數傳入了IApplicationCommands介面,創建_applicationCommands對象綁定並註冊對應的事件,用於執行全局的Command。

1.3主工程UsingCompsiteCommands引用了Prism.Unity、ModuleA和UsingCompositeCommands.Core;

重寫App為PrismApplication,重寫CreteShell()方法,設置啟動對象。

重寫RegisterTypes()載入UsingCompsiteCommands.Core下的ApplicationCommands

重寫ConfigureModuleCatalog()用於載入Module。

ViewModel中創建屬性IApplicationCommands並在構造函數中初始化。

View的XAML中使用Prism.ViewModelLocator.AutoWireViewModel=true關聯ViewModel

View的XAML中直接設置Command為自己ViewModel下的ApplicationCommands的方法,用於關聯。

同時設置顯示區域控制項並設置Region屬性,用於在Modules下關聯顯示內容。

回憶完之後,在繼續向下看;如果沒有,建議在回憶一遍,接下來我們結合12 13示例,開始寫DEMO程式碼;

我們結合12、13示例,創建一個有多個TabControl的顯示頁面,編寫2個全局按鈕功能,一個是全局的AllSave方法觸發時所有頁面更新、一個全局的CurrentSave方法觸發時當前頁面更新,子頁面包含兩個Textblock和一個Button,Textblock用於顯示標題和當前時間,button用於觸發更能當前時間。用於熟悉Command和IActiveAware實現不同的Command的邏輯執行。

PrismMvvmDemo.Core

引用Prism.Core、添加IApplicationCommands介面,編寫2個保存的Command

using Prism.Commands;

namespace PrismMvvmDemo.Core
{
    public interface IApplicationCommands
    {
        CompositeCommand AllSave { get; }
        CompositeCommand CurrentSave { get; }
    }
    public class ApplicationCommands:IApplicationCommands
    {
        private CompositeCommand _allSave = new CompositeCommand();
        public CompositeCommand AllSave
        {
            get
            {
                return _allSave;
            }
        }

        private CompositeCommand _currentSave = new CompositeCommand(true);
        public CompositeCommand CurrentSave
        {
            get
            {
                return _currentSave;
            }
        }
    }
}

PrismMvvmDemo.Modules

引用了Prism.Wpf、PrismMvvmDemo.Core

添加ModuleAModule 並繼承自IModule,並在OnInitialized()方法中關聯region和View。

ModuleAModule.cs的程式碼

添加3個TabView設置Title並關聯到TabViewControlRegion顯示區域。程式碼如下:還沒有添加View和ViewModels,顯示區域TabControlRegion也沒有添加。

using Prism.Ioc;
using Prism.Modularity;
using Prism.Regions;
using PrismMvvmDemo.Modules.ViewModels;
using PrismMvvmDemo.Modules.Views;

namespace PrismMvvmDemo.Modules
{
    public class ModuleAModule : IModule
    {
        public void OnInitialized(IContainerProvider containerProvider)
        {
            var regionManager = containerProvider.Resolve<IRegionManager>();
            var region = regionManager.Regions["TabControlRegion"];
            var tabViewA = containerProvider.Resolve<TabView>();
            SetTitle("TabViewA", tabViewA);
            region.Add(tabViewA);
            var tabViewB = containerProvider.Resolve<TabView>();
            SetTitle("TabViewB", tabViewB);
            region.Add(tabViewB);
            var tabViewC = containerProvider.Resolve<TabView>();
            SetTitle("TabViewC", tabViewC);
            region.Add(tabViewC);

        }

        public void RegisterTypes(IContainerRegistry containerRegistry)
        {

        }

        private void SetTitle(string title, TabView tabView)
        {
            (tabView.DataContext as TabViewModel).Title = title;
        }

    }
}

再Modules下添加Views目錄和ViewModels目錄

Views下添加自定義控制項TabView.xaml,主要設置Prism:ViewModelLocator.AutoWireViewModel=true

然後綁定CurrentTime、Binding UpdateTimeCommand。

<UserControl x:Class="PrismMvvmDemo.Modules.Views.TabView"
             xmlns="//schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="//schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="//schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="//schemas.microsoft.com/expression/blend/2008" 
             xmlns:local="clr-namespace:PrismMvvmDemo.Modules.Views"
             xmlns:prism="//prismlibrary.com/"
             prism:ViewModelLocator.AutoWireViewModel="True"
             mc:Ignorable="d" 
             d:DesignHeight="450" d:DesignWidth="800">
    <StackPanel>
        <TextBlock Text="當前時間:"/>
        <TextBlock  Text="{Binding CurrentTime}"/>
        <Button Width="120" Height="30" Content="單擊更新時間" Command="{Binding UpdateTimeCommand}"/>
    </StackPanel>
</UserControl>

ViewModels下TabViewModel.cs程式碼,主要是繼承自BindableBase和IActiveAware。通過構造函數綁定了ApplicationCommands並關聯到了ViewModel下的Command。

using Prism;
using Prism.Commands;
using Prism.Mvvm;
using PrismMvvmDemo.Core;
using System;

namespace PrismMvvmDemo.Modules.ViewModels
{
    public class TabViewModel : BindableBase, IActiveAware
    {
        IApplicationCommands _applicationCommands;

        private string _title;
        public string Title
        {
            get { return _title; }
            set
            {
                SetProperty(ref _title, value);
            }
        }
        private bool _canUpdate = true;
        public bool CanUpdate
        {
            get { return _canUpdate; }
            set { SetProperty(ref _canUpdate, value); }
        }

        private string _currentTime = string.Empty;


        public string CurrentTime
        {
            get { return _currentTime; }
            set { SetProperty(ref _currentTime, value); }
        }
        public TabViewModel(IApplicationCommands applicationCommands)
        {
            _applicationCommands = applicationCommands;
            UpdateTimeCommand = new DelegateCommand(UpdateTime).ObservesCanExecute(() => CanUpdate);
            _applicationCommands.CurrentSave.RegisterCommand(UpdateTimeCommand);
            _applicationCommands.AllSave.RegisterCommand(UpdateTimeCommand);
        }

        private void UpdateTime()
        {
            CurrentTime = $"Update Time {DateTime.Now}";
        }

        public event EventHandler IsActiveChanged;
        public DelegateCommand UpdateTimeCommand { get; private set; }
        private bool _isActive;
        public bool IsActive
        {
            get { return _isActive; }
            set
            {
                _isActive = value;
                OnIsActiveChanged();
            }
        }

        private void OnIsActiveChanged()
        {
            UpdateTimeCommand.IsActive = IsActive;
            IsActiveChanged?.Invoke(this, new EventArgs());
        }
    }
}

PrismMvvmDemo.Runner 主工程

添加了Prism.Unity的庫,添加了PrismMvvmDemo.Core和PrismMvvmDemo.Modules兩個庫。

重寫App.xaml 注意引用using Prism.Ioc;

<prism:PrismApplication x:Class="PrismMvvmDemo.Runner.App"
             xmlns="//schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="//schemas.microsoft.com/winfx/2006/xaml"
             xmlns:local="clr-namespace:PrismMvvmDemo.Runner"
             xmlns:prism="//prismlibrary.com/">
    <Application.Resources>

    </Application.Resources>
</prism:PrismApplication>

using Prism.Unity;
using Prism.Ioc;
using System.Windows;
using Prism.Modularity;
using PrismMvvmDemo.Core;
using PrismMvvmDemo.Runner.Views;

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

ViewModel創建MainWindowViewModel程式碼

using Prism.Mvvm;
using PrismMvvmDemo.Core;

namespace PrismMvvmDemo.Runner.ViewModels
{
    public class MainWindowViewModel : BindableBase
    {
        private IApplicationCommands _applicationCommands;
        public IApplicationCommands ApplicationCommands
        {
            get { return _applicationCommands; }
            set
            {
                SetProperty(ref _applicationCommands, value);
            }
        }
        public MainWindowViewModel(IApplicationCommands applicationCommands)
        {
            _applicationCommands = applicationCommands;
        }
    }
}

Views下的MainWindow.xaml程式碼。

<Window x:Class="PrismMvvmDemo.Runner.Views.MainWindow"
        xmlns="//schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="//schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="//schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="//schemas.openxmlformats.org/markup-compatibility/2006" 
        xmlns:prism="//prismlibrary.com/"
        prism:ViewModelLocator.AutoWireViewModel="True"
        mc:Ignorable="d"  
        Title="MainWindow" Height="450" Width="800">
    <Window.Resources>
        <Style TargetType="TabItem">
            <Setter Property="Header" Value="{Binding DataContext.Title}"/>
        </Style>
    </Window.Resources>
  
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <TabControl prism:RegionManager.RegionName="TabControlRegion"/>
        <StackPanel Grid.Row="1">
            <Button Content="AllSave" Command="{Binding ApplicationCommands.AllSave}"/>
            <Button Content="CurrentSave" Command="{Binding ApplicationCommands.CurrentSave}"/>
        </StackPanel>
    </Grid>
</Window>

最終運行的效果圖

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