Chemmy's Blog

chengming0916@gmail.com

0%

从PRISM开始学WPF

发表于 更新于 分类于 Valine：

0x5 MVVM#

[7.1updated]截止到目前，我们看到7.1的更新主要在三个地方

  1. PrismApplication ，并且不再使用Bootstrapper
  2. 更新了unity，现在使用prism.unity作为容易管理
  3. 更新了IModule接口
    下面所有代码片段都更新到7.1，并且不再赘述与6.x的区别

蛤蛤，终于到MVVM了。特别是前面的Module，忒难写，反正大概知道是怎么用就好了，具体怎么个容器，怎么个依赖注入，我也不是很懂，Prism重度依赖容器，哪哪都是，哪哪都是依赖容器注入。

到目前为止，已经知道怎么去设置Region，怎么去关联View，和关联其他Module里的View了。那么接下来就是MVVM啦，★,°:.☆(￣▽￣)/$:.°★ 。

先看Wiki怎么对MVVM定义的：

MVVM（Model–view–viewmodel）是一种软件架构模式。

MVVM有助于将图形用户界面的开发与业务逻辑或后端逻辑（_数据模型_）的开发分离开来，这是通过置标语言或GUI代码实现的。MVVM的_视图模型_是一个值转换器，[1] 这意味着视图模型负责从模型中暴露（转换）数据对象，以便轻松管理和呈现对象。在这方面，视图模型比视图做得更多，并且处理大部分视图的显示逻辑。[1] 视图模型可以实现中介者模式，组织对视图所支持的用例集的后端逻辑的访问。

Dior不Dior？首先他不是WPF专有的，现在很多前端框架都实现了MVVM模式，像Vue，Angular。那MVVM这么火，他到底有什么神奇的地方呢？数据双向绑定！数据双向绑定！数据双向绑定！

我最早在找MVVM框架的时候，其实并不在乎什么解耦，前后端分离，可测试啥的，我只是受够了WinForms前台代码中 ShowDetails和SetModel，后来发现MVVM可以实现双向绑定，数据驱动界面显示，就着了迷(❤´艸｀❤)。扯远了，我们来看Prism，怎样实现MVVM的。

ViewModel及定位#

什么是ViewModel，ViewModel在MVVM中充当了什么角色？

ViewModel是对应的View（数据和行为）的抽象，View只是ViewModel的一个消费者，那么还有其他的消费者吗？当然有了，那就是单元测试（Unit Test），这个后面说。ViewModel为View提供数据上下文（DataContext），简单的说，你View需要展示的东西，都在我这里，你需要跟我绑定，包括数据和命令，不然你就是个静态的。

那怎么为View指定ViewModel呢，通常情况下，我们是为控件指定Datacontext，而Prism为我们提供了更简单方式，约定。

约定的绑定方式
  • Step1 新建一个Wpf项目，新建两个文件夹Views 和 ViewModels，用来存放View和ViewModel，删掉MainWindow.xaml，并在Views新建一个新 MainWindow窗体当我们的Shell。
    app.xaml.cs:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
using Prism.Ioc;
using Prism.Unity;
using System.Windows;
using ViewModelLocator.Views;

namespace ViewModelLocator
{
    
    
    
    public partial class App : PrismApplication
    {
        protected override Window CreateShell()
        {
            return Container.Resolve<MainWindow>();
        }

        protected override void RegisterTypes(IContainerRegistry containerRegistry)
        {

        }
    }
}
  • Step2 在ViewModels文件夹内新建，一个MainViewModel的类，继承BindableBase，注意，这里是个类（Class）

MainWindowViewModel.cs

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
using Prism.Mvvm;

namespace ViewModelLocator.ViewModels
{
    public class MainWindowViewModel : BindableBase
    {
        private string _title = "Prism Unity Application";
        public string Title
        {
            get { return _title; }
            set { SetProperty(ref _title, value); }
        }

        public MainWindowViewModel()
        {

        }
    }
}

  • Step3 修改MainWindow.xaml，覆盖下面的代码：（当前也可以不覆盖，对比发现，我们这里只多了一点东西）
1
2
3
4
5
6
7
8
9
10
11
12
<Window x:Class="ViewModelLocator.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>
        <ContentControl prism:RegionManager.RegionName="ContentRegion" />
    </Grid>
</Window>

Tips：数据绑定Title=”{Binding Title}” ，Title是对应ViewModel里的一个公开属性。

运行后发现，窗口的Title正式MainWindowViewModel里Title的值，可是我们并没有为MainWindow指定ViewModel啊，正常的绑定看上去是应该是这样

1
2
3
<UserControl.DataContext>
    <vm:NumberChangeLogViewModel />
</UserControl.DataContext>

或者这样

1
2
3
4
<vw:NumberView 
            DockPanel.Dock="Top" 
            DataContext="{Binding Path=Number, Mode=OneTime}" 
            />

蛤蛤，刚开始我也很懵逼，可是我爱学习，在Prism的源码Prism.Mvvm.ViewModelLocationProvider中我发现了这个：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18



static Func<object, Type, object> _defaultViewModelFactoryWithViewParameter;




static Func<Type, Type> _defaultViewTypeToViewModelTypeResolver =
    viewType =>
    {
        var viewName = viewType.FullName;
        viewName = viewName.Replace(".Views.", ".ViewModels.");
        var viewAssemblyName = viewType.GetTypeInfo().Assembly.FullName;
        var suffix = viewName.EndsWith("View") ? "Model" : "ViewModel";
        var viewModelName = String.Format(CultureInfo.InvariantCulture, "{0}{1}, {2}", viewName, suffix, viewAssemblyName);
        return Type.GetType(viewModelName);
    };

是不是豁然开朗？O(∩_∩)O

我们不一样，定制约定

约定就是要来被打破的，有人可能觉得后缀加一个ViewModel实在是LowB，我想改变他，可以不可以？当然阔以啦。

prism为我们提供了一个可重写的ConfigureViewModelLocator的方法来配置ViewModel的定位器，如果你想修改默认的约定为View的名字后面+VM，你可以在app.xaml.cs这样写：

1
2
3
4
5
6
7
8
9
10
11
12
protected override void ConfigureViewModelLocator()
{
    base.ConfigureViewModelLocator();

    ViewModelLocationProvider.SetDefaultViewTypeToViewModelTypeResolver((viewType) =>
    {
        var viewName = viewType.FullName;
        var viewAssemblyName = viewType.GetTypeInfo().Assembly.FullName;
        var viewModelName = $"{viewName}VM, {viewAssemblyName}";
        return Type.GetType(viewModelName);
    });
}
我就是我，是颜色不一样的烟火

这世界上不乏个性鲜明的人，你们那些约定和打破的约定还不都是一路货色。我就要不一样的，我想跟谁绑在一起就跟谁绑在一起。好，你跟谁好是你的自由，Prism不能限制你，不然你会投诉它不民主。😂

如果你想指定你绑定的ViewModel对象又不想遵循一定的规则，你同样可以在ConfigureViewModelLocator方法中注册绑定，像下面这样：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
protected override void ConfigureViewModelLocator()
 {
     base.ConfigureViewModelLocator();

     
     

     
     

     
     

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

当然了，在xaml中的

1
prism:ViewModelLocator.AutoWireViewModel="True"

依旧是必不可少的。