三、从GitHub浏览Prism示例代码的方式入门WPF下的Prism之Mvvm的08-12示例

这一篇是学习了前2篇RegionManager关联视图,和通过不同的方式加载Module示例之后的开始进入MVVM了。

从第08示例开始,进入了MVVM部分。

从08示例开始学习Prism下的MVVM思想

观察08-ViewModelLocator示例

08示例只有一个工程,添加了Prism.Unity的包

1、分析ViewModelLocator工程

1.1、App.xaml

添加了命名空间xmlns:prism="http://prismlibrary.com/"

修改了Application为prism:PrismApplication

移出了StartupUri属性

1.2、App.cs

修改了App继承自PrismApplication

重写CreateShell()设置主页面

重写RegisterTypes()

1.3、Views下的MainWindow.xaml

添加了显示控件ContentControl并设置了附加依赖项属性,区域名称:ContentRegion

设置和Title{Binding Title}

设置了prism:ViewModelLocator.AutoWireViewModel="True" 属性。

cs文件下无新增代码

1.4、ViewModels文件夹下的MainWindowVieModel.cs

MainWindowViewModel继承自Prism.Mvvm.Bindable类,该类继承自INotifyPropertyChanged

并创建了属性Title并在Set的时候调用了SetProperty实现基于Bindable封装的属性通知。

2、运行代码

界面标题显示Prism Unity Application;

总结:在工程中引用Prism.Unity后,不需要额外去写DataContent代码,就可以自动关联ViewModel和View。ViewModel 又有封装比较好的BindableBase。只需要在VM下继承自BindableBase就可以了,至于如何关联上ViewModel和View的,这里还没有深入了解,只是分析示例,没有看到有额外配置的地方,凭经验MVC的经验,感觉是同名ViewModels和View。需要写代码验证;

分析09-ChangeConvention示例

ChangeConvention示例的工程名字为ViewModelLocator,只有一个工程,添加了对Prism.Unity包的引用

1、ViewModelLocator工程

1.1、App.xaml

添加了命名空间 xmlns:prism="http://prismlibrary.com/"

修改了Application继承自prism:PrismApplication

移除了StartupURI属性

1.2、App.cs

重写了CreateShell(),使用Container.Resolve解析MainWindow作为返回主窗体

重写了ConfigureViewModelLocator()方法,主要的内容都在这里。把断点打 var viewName = viewType.FullName;这一行,我们观察在干什么,

 protected override void ConfigureViewModelLocator()
        {
            base.ConfigureViewModelLocator();

            ViewModelLocationProvider.SetDefaultViewTypeToViewModelTypeResolver((viewType) =>
            {
                var viewName = viewType.FullName;
                var viewAssemblyName = viewType.GetTypeInfo().Assembly.FullName;
                var viewModelName = $"{viewName}ViewModel, {viewAssemblyName}";
                return Type.GetType(viewModelName);
            });
        }

三、从GitHub浏览Prism示例代码的方式入门WPF下的Prism之Mvvm的08-12示例

我们首先观察方法ViewModelLocationProvider.SetDefaultViewTypeToViewModelTypeResolver()

F12跳转过去之后,从注释上理解是将默认视图类型设置为视图模型类型解析程序。

通过重写ConfigureViewModelLocator()方法,在这里重新关联View和ViewModel的关系。

通过上面的截图我们看到了ViewName、ViewModelName被重新做了关联,ViewModel被指定到了ViewModelLocator.Views.MainWindowViewModel。我们在Views目录下看到了MainWindowViewModel.cs。

1.3、Views下的MainWindow.xaml

设置了显示控件的ContentControl设置了RegionName为ContentRegion

设置了窗口的Title绑定{binding Title}

设置了Prism:ViewModelLocator.AutoWireViewModel="True"

cs文件中无修改

1.4、Views下的MainWindowViewModel.cs

继承自BindableBase。 创建了属性Ttile使用SetProperty进行属性更改通知。

1.5、运行代码

标题修改为Prism Unity Application

总结:这个Demo主要是在讲解在App.cs下重写ConfigureViewModelLocator()方法,重新设置了View和对应ViewModel的关联。一般情形下,这个应该用不到把,毕竟Views和ViewModels是2个独立的文件夹。

分析10-CustomRegistrations示例

经过了前面这么多例子的学习,现在开始加快进度,每个工程打开后我们都会梳理一遍工程,主要梳理工程引用关系、引用的包、加载启动项,后续的过程中如果没有额外需要注意的,那么梳理过程教程中就省略了,因为前面这么多例子下来,应该都知道关注哪些内容了。

1、Views下的MainWindow.xaml

prism:ViewModelLocator.AutoWireViewModel=True;

Title={binding Title}

添加ContentControl并设置了附加依赖项属性RegionName为ContentRegion,cs文件中无新增代码

2、ViewModels 下的CustomViewModel.cs

继承自Prism.Mvvm.BindableBase

创建属性Title 并在set中使用SetPriperty实现通知;

3、重写ConfigureViewModelLocator()

代码中提供了4种方法。

 protected override void ConfigureViewModelLocator()
        {
            base.ConfigureViewModelLocator();

            // type / type
            //ViewModelLocationProvider.Register(typeof(MainWindow).ToString(), typeof(CustomViewModel));

            // type / factory
            //ViewModelLocationProvider.Register(typeof(MainWindow).ToString(), () => Container.Resolve<CustomViewModel>());

            // generic factory
            //ViewModelLocationProvider.Register<MainWindow>(() => Container.Resolve<CustomViewModel>());

            // generic type
            ViewModelLocationProvider.Register<MainWindow, CustomViewModel>();
        }

从代码中直观来看这四种都是实现一个事情的,第四种看上去最简洁,所以,我们用第四种,使用ViewModelLocationProvider类的Register关联2个对象。一个View、一个ViewModel。用于关联View和ViewModel。这种写法比上一个例子感觉优雅很多。

启动代码

界面Title正常显示在ViewModel中设置的Title属性为Custom ViewModel Application;

总结:在App.cs中重写ConfigureViewModelLocator()方法,使用ViewModelLocationProvider.Register自定义关联View和ViewModel的关系;

分析11-CustomRegistrations示例

工程引用Prism.Unity包;App.xaml继承自PrismApplication;App.cs重写CreateShell()设置启动窗体;

重点在MainWindow.xaml和MainWindowViewModel.cs

前面的示例学习我们知道了,Views和ViewModels文件夹内的同名View和ViewModel会在Prism下自动关联,不需要我们在ConfigureViewModelLocator()中从新绑定关系;也不需要写DataContent。

1、MainWindow.xaml

添加命名空间 xmlns:prism="http://pismlibrary.com/"

添加附加依赖项属性:prism:ViewModelLocator.AutoWireViewModel=True

<Window x:Class="UsingDelegateCommands.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="Using DelegateCommand" Width="350" Height="275">
    <StackPanel HorizontalAlignment="Center" VerticalAlignment="Center">
        <CheckBox IsChecked="{Binding IsEnabled}" Content="Can Execute Command" Margin="10"/>
        <Button Command="{Binding ExecuteDelegateCommand}" Content="DelegateCommand" Margin="10"/>
        <Button Command="{Binding DelegateCommandObservesProperty}" Content="DelegateCommand ObservesProperty" Margin="10"/>
        <Button Command="{Binding DelegateCommandObservesCanExecute}" Content="DelegateCommand ObservesCanExecute" Margin="10"/>
        <Button Command="{Binding ExecuteGenericDelegateCommand}" CommandParameter="Passed Parameter" Content="DelegateCommand Generic" Margin="10"/>
        <TextBlock Text="{Binding UpdateText}" Margin="10" FontSize="22"/>
    </StackPanel>
</Window>

同时打开ViewModels下的MainWindowViewModel.cs,左右分屏对照着看,MainWindowViewModel继承自BindableBase;

在Xaml中CheckBox设置了IsChecked属性绑定了ViewModel下的IsEnabled属性,打开ViewModel下的IsEnabled属性发现在Set时不仅有SetProperty用于属性通知,还有一个ExecuteDelegateCommand.RaiseCanExecuteChanged()方法,暂且不管这里再干啥,我们继续向下看。因为这里有4种做一件事情的写法,我们可以了解四种,但是用一种就行;

Xaml中4个Button分别绑定了ExecuteDelegateCommand、DelegateCommandObservesProperty、DelegateCommandObservesCanExecute、ExecuuteGenericDelegateCommand 命名绑定的同时传入了CommandParameter参数为“Passed Parameter”。

有一个TextBlock 控件, Text绑定为ViewModel中的UpdateText;

1.1、 我们来分析MainWindowViewModel.cs代码;

MainWindowViewModel继承自BindableBase类,再set中使用SetProperty做属性更改通知;

该类定义了IsEnable属性和UpdateText属性;和4个DelegateCommand、

在构造函数中初始化了4个DelegateCommand、在初始化过程中,除了最后一个ExecuteGenericDelegateCommand方法需要传入一个参数,其他的都不需要,这4种写法,都包含了2个逻辑,一个是执行Command、另外一个是是否可以执行,就是CanExecute用于返回当前指令是否可用;

当点击Xaml的对应的Button的时候,就会触发对应的Command、我喜欢用第一种写法,拓展性比较好,也比较简单明了;

 ExecuteDelegateCommand = new DelegateCommand(Execute, CanExecute);

需要注意的是下面这个

ExecuteGenericDelegateCommand = new DelegateCommand<string>(ExecuteGeneric).ObservesCanExecute(() => IsEnabled);

这个Command在初始化的时候,需要传入一个参数,为字符串类型的。后面的都一样。调用一个方法,验证Command是否允许调用。

  public MainWindowViewModel()
        {
            ExecuteDelegateCommand = new DelegateCommand(Execute, CanExecute);

            DelegateCommandObservesProperty = new DelegateCommand(Execute, CanExecute).ObservesProperty(() => IsEnabled);

            DelegateCommandObservesCanExecute = new DelegateCommand(Execute).ObservesCanExecute(() => IsEnabled);

            ExecuteGenericDelegateCommand = new DelegateCommand<string>(ExecuteGeneric).ObservesCanExecute(() => IsEnabled);
        }

        private void Execute()
        {
            UpdateText = $"Updated: {DateTime.Now}";
        }

        private void ExecuteGeneric(string parameter)
        {
            UpdateText = parameter;
        }

        private bool CanExecute()
        {
            return IsEnabled;
        }

运行代码

显示了标题为Using DelegateCommand的窗体;对照前面的调用关系,和属性绑定关系,Prism下面如何在View和ViewModel中使用binding和Command,这里就不讲这2个细节了,第一个基础系列WPF讲过了。这里只往返观察一下View的代码和ViewModel的代码中Prism是如何使用的。尝试点击各个按钮,看代码都运行到哪里了。

总结:在Prism中使用binding还是比较方便的。保持Views和ViewModels的路径关系,在MainWindow中设置Prism:ViewModelLocator.AutoWireViewModel=True,就自动关联了2个路径下的View和ViewModel的关系;

然后就可以使用Binding等一系列内容拉,不需要写DataContent。Command和Binding的用于都一样,ViewModel下需要继承自BindableBase类,剩下的实现方法都一样了。主要是Prism帮忙封装了INotifyPropertyChanged 不需要自己在封装了。

分析12-UsingCompositeCommands示例

这个示例是写到现在终于遇到一个复杂的拉,包含3个工程我们来梳理一下引用关系

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

UsingCompositeCommands工程引用Prism.Unity包、ModuleA、UsingCompositeCommands.Core

UsingCompositeCommands.Core工程引用了Prism.Core

是不是有点多,这个代码慢慢来。因为这里包含了Command的使用,涉及到了MVVM。如果不熟悉MVVM的话。这里会有点懵,第一个WPF系列中这里有讲到,去翻我博客就好拉。

1、分析引用关系最小的UsingCompositeCommands.Core工程

UsingCompositeCommands.Core引用了Prism.Core,核心就在Prism.Core。

1.1、新增ApplicationCommands.cs

新建InterFace接口 起名为IApplicationCommands、里面定义了一个只读的Prism.Commands下的CompositeCommand复合命令;

新建ApplicationCommands类继承IApplicationCommands接口,并创建了属性SaveCommand;

整个Core就结束了。这里定义了接口IApplicationCommands和实现接口的ApplicationCommands;

具体怎么实现的我们不去关注,我们就关注,UsingCompositeCommands.Core工程引用了Prism.Core

我们先学如何使用;只有这么多代码。

using Prism.Commands;

namespace UsingCompositeCommands.Core
{
    public interface IApplicationCommands
    {
        CompositeCommand SaveCommand { get; }
    }

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

2、分析相对简单逻辑内容较少的UsingCompositeCommands主工程;

因为UsingCompositeCommands.Core写的内容注意再主工程UsingCompositeCommands中使用了。

先讲这个,逻辑可以关联上,最后讲XAML上绑定的Commands;

UsingCompositeCommands引用了Prism.Unity包;

项目ModuleA;

项目UsingCompositeCommands.Core;

2.1、App.Xaml

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

修改Application为PrismApplication

去掉StartupUri属性

2.2、App.cs

重写CreateShell()方法,解析返回启动界面

重写ConfigureModuleCatalog()

通过代码加载ModuleA工程下的ModuleAModule,哈哈,上一篇再学习Module加载时,我也喜欢并且推荐的这种写法啊。在这里AddModule之后会走ModuleA对应的Module的OnInitialized方法初始化。

重写RegisterTypes()

这个方法我们前面加上07的五个例子,一共15个例子我们都在重写RegisterTypes()方法,又不知道干啥用。又不能去掉,就报错。这里终于知道了。注册单例,使用传入的ContainerRegistry注册RegisterSingleton接口和关联对应的类。通过这个方法,在主工程中就可以使用IApplicationCommands接口下的类了。

2.3Views下的MainWindow.xaml

在MainWindow.xaml下添加了命名空间xmlns:prism="http://prismlibrary.com/"

添加了附加依赖属性prism:ViewModelLocator.AutoWireViewModel=true

Title绑定了{Title}

添加了资源并绑定了所有的TabItem中Header值绑定为Title

界面显示中放置了一个TabControl控件,设置了RegionName为ContentRegion和Button,Button绑定了一个Command,注意,这里有个误导人的地方,当我们看到这个代码的时候我们是不是就以为这是下面Core中的ApplicationCommands了? 不是的,XAML和ViewModel才有直接的绑定关系,这个SaveCommand要在ViewModel中去找。前面的App.cs中是注册单例的ApplicationCommands;cs文件中无新增

  <Button Content="Save" Margin="10" Command="{Binding ApplicationCommands.SaveCommand}"/>

2.4ViewModels下的MainWindowViewModel.cs

MainWindowViewModel继承自BindableBase;

设置了Title,和ApplicationCommands属性

同时在ViewModel的构造函数中,依据传入的初始化了ApplicationCommands对象;

这个工程中就没有额外的代码了。但是大家发现一件事情了嘛,IApplicationCommands接口是有实现的SaveCommand方法的,但是这2个地方都没有实现。虽然在主工程的Button下也使用了SaveCommand。我们继续分析

3、分析ModuleA工程

ModuleA工程添加了Prism.Wpf

引用了UsingCompositeCommands.Core工程;

3.1、ModuleAModule.cs

继承自IModule,重写了OnInitialized()方法

我们找到MainWindow中ContentRegion的控件;是一个TabControl

这里是解析了3次TabView。使用SetTitle()方法获取View的TabViewModel并设置Title,然后添加到Region中。

3.2、Views下TabView.xaml

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

添加附加依赖项属性prism:ViewModelLocator.AutoWireViewModel=True

界面上用到的binding、Command都是上一篇的知识。没有额外的这些就不分析了;

cs文件中无新增代码

3.3、ViewModels下的TabViewModel.cs

TabViewModel继承自BindableBase。

其他的不讲,就分析一下IApplicationCommands在TabViewModel中的使用

首先在构造函数中TabViewModel传入了IApplicationCommands,

上面创建了一个字段,接收这个applicationCommands,

使用_applicationCommands.SaveCommand调用RegisterCommand传入一个注册命令,关联两个Command。

这样的话。就关联了SaveCommand和UpdateCommand。在MainWindow.xaml中绑定的Commond的ApplicationSaveCommand就是在这里关联的UpdateCommand。因为ApplicationCommands是单例的,所以在ViewModel下的构造函数都可以请求带这个对象。使用RegisterCommand关联命令,使用UnregisterCommand取消关联;

4、运行代码

界面是显示一个TabControl包含3个子页面,和一个Save控件,点击Save会更新时间;

总结:我们主要重点分析ApplicationCommands功能,在一个单独的工程中引入了Prism.Code然后编写了一个实现IApplication接口的类,并封装了一个Command属性。在主工程的App.cs中通过重写RegisterTypes()来实现注册单例的ApplicationCommands,然后再UI的ViewModel中保存ApplicationCommands,使用对应的ApplicationCommands时需要实现的对象中关联对应的ApplicationCommands,比如ModuleA初始化的时候,添加了3个TabView,再每个TabView的ViewModel构造函数中都注册了SaeCommand的关联事件,因为是单例,每个又都注册了所以在点击最外层Save的时候,所有关联Command都会被执行,这里通过Prism.Code实现了IApplicationCommands的解耦。这里如果用好了,代码会非常整洁。

? 三、从GitHub浏览Prism示例代码的方式入门WPF下的Prism之Mvvm的08-12示例

下图是整个代码的逻辑关系MainWindowViewModel->ModuleAmodule->TabViewModel

三、从GitHub浏览Prism示例代码的方式入门WPF下的Prism之Mvvm的08-12示例

我创建了一个C#相关的交流群。用于分享学习资料和讨论问题。欢迎有兴趣的小伙伴:QQ群:542633085

今天受到了北京-关关的提醒,我添加了目录功能,可以更加方便的阅读拉。针对各种读的不方便的内容,欢迎提意见。

三、从GitHub浏览Prism示例代码的方式入门WPF下的Prism之Mvvm的08-12示例

上一篇:stage3_Stage3_Lesson1AppWidget及Launcher


下一篇:学习笔记 android fragment