MVVM的特点之一是实现数据同步，即，前台页面修改了数据，后台的数据会同步更新。

上一篇我们已经一起编写了框架的基础结构，并且实现了ViewModel反向控制Xaml窗体。

那么现在就要开始实现数据同步了。

DataContext—数据上下文

在实现数据同步前，我们要了解一个知识点——DataContext。

WPF中每个UI都有一个Content和一个DataContext，那么Content和DataContext是什么呢？

Content：Content是指页面内容，即我们编写的代码，或者认为它是展示的UI。

打个比方，Content就是HTML页面中的标签，如【<html></html】；那么，在WPF中Content是指的就是Xaml页面的标签了。

DataContext：DataContext是指页面中的数据内容，这部分内容只有运行了才存在，用过ASP.NET MVC的同学可以把它理解为MVC中的Model。（每个页面都有一个唯一的指定Model）

既然在WPF里DataContext就是MVC中的Model。那么，自然的，DataContext就要存储页面的ViewModel了，所以，我们为它赋值它自身对应的ViewModel。

现在，找到我们的BaseViewModel的构造函数，加入这行代码[UIElement.DataContext = this;]，代码如下：

public BaseViewModel()

{

    WindowMain = Application.Current.MainWindow;

    SetUIElement();

    UIElement.DataContext = this;

}

这样用ViewModel创建的页面的DataContext就被自动赋值了。

页面与ViewModel的基础关系就建立完成了。

Binding—绑定

在我们编写的框架中，绑定分两种，一种是属性绑定，一种是命令绑定。

属性绑定：属性绑定很好理解，就是将Xaml页面的控件属性和ViewModel中的自定义属性捆绑到一起，让他们的数据值同步。

命令绑定：命令绑定是Xaml页面触发命令，然后由ViewModel来处理命令。

这里的命令（Command）有点不太好理解，不过大家都做过面向事件的开发，我们可以把命令想象成事件，就是Xaml页面触发事件，ViewModel来执行事件内容。

接下来，我们一起做一些简单的绑定。

Property—属性绑定

首先，在程序框架中找到VM_WindowMain页面，然后在里面创建属性HeaderName，代码如下：

public string _HeaderName = "HeaderName_KibaFramework";

public string HeaderName { get { return _HeaderName; } set { _HeaderName = value; OnPropertyChanged(); } }

然后，我们再找到VM对应的Xam页面—WindowMain.xaml，修改Header代码如下：

<StackPanel  DockPanel.Dock="Top" Background="Gainsboro">

    <TextBlock TextAlignment="Left" Text="{Binding HeaderName}" Margin="20,20,0,0" Height="70" FontSize="36"></TextBlock>

</StackPanel>

界面效果如下：

通过图片，我们可以看到，属性已经绑定成功了，并且成功输出了我们的HeaderName。

然后，我们重点看一下这段代码{Binding HeaderName}。

这句话的意思就是让TextBlock的Text属性绑定HeaderName属性，其中Binding就是绑定的意思。【注意，这里只能是属性绑定属性】

HeaderName是我们在VM中刚刚定义的属性，那么Text是怎么绑定到了HeaderName上的呢？

很简单，因为上面我们已经把ViewModel赋值到了DataContext中了，所以在Xaml中，我们就可以使用{Binding 属性名}这样的语句，来绑定VM中所有的属性。

在Xaml中，TextBlock默认的绑定是单向绑定，就是说，VM中的属性值改变会同步Xaml页面的属性值，让其改变；但，当Xaml页面的属性值改变了，VM中的属性值却不会改变。

那么如何让他们同步呢？

很简单，只需要在绑定的时候多加一个属性Mode=TwoWay即可，代码如下：

{Binding HeaderName,Mode=TwoWay}

Command—命令绑定

在MVVM中，事件被极大的程度的弱化了，因为Command在ViewModel中替代了事件来处理业务逻辑，所以，事件在框架中就只负责处理UI变化这么一件事了。

BaseCommand

在WPF中，系统为我们提供一些Command，但为了能处理更多细节，自定义Command的效果会更好，所以，我们需要编写属于我们框架自己的自定义BaseCommand。

代码如下：

public class BaseCommand : ICommand

{

    public Action<object> ExecuteAction;

    public BaseCommand(Action<object> action)

    {

        ExecuteAction = action;

    }

    public bool CanExecute(object parameter)

    {

        return true;

    }

    public event EventHandler CanExecuteChanged;

    public void Execute(object parameter)

    {

        ExecuteAction(parameter);

    }

}

如上代码所示，我们自定义了BaseCommand，并且继承了ICommand接口，实现了接口方法。

Command的应用

下面我们开始Command的基础应用，使用Command实现页面切换；页面切换我们采用最简单的模式Window—Frame—Page的控制模式。

首先我们找到VM_WindowMain，创建切换Page的Command和存储页面实例的属性FrameSource。

代码如下：

public Page _FrameSource;

public Page FrameSource { get { return _FrameSource; } set { _FrameSource = value; OnPropertyChanged(); } }

public BaseCommand ChangeFrameSourceCommand

{

    get

    {

        return new BaseCommand(ChangeFrameSourceCommand_Executed);

    }

}

public void ChangeFrameSourceCommand_Executed(object obj)

{

    string pageName = obj.ToString();

   switch(pageName)

   {

       case "PageMain":

           FrameSource = new VM_PageMain().UIElement as Page;

           break;

       case "PageUser":

           FrameSource = new VM_PageUser().UIElement as Page;

           break;

   }

}

接下来在页面实现按钮事件绑定和Frame显示页面绑定。

代码如下：

<TreeViewItem>

    <TreeViewItem.Template>

        <ControlTemplate>

            <Button HorizontalAlignment="Left" Content="PageMain" Command="{Binding ChangeFrameSourceCommand}" CommandParameter="PageMain"  Style="{StaticResource NullButton}"></Button>

        </ControlTemplate>

    </TreeViewItem.Template>

</TreeViewItem>

<TreeViewItem>

    <TreeViewItem.Template>

        <ControlTemplate>

            <Button HorizontalAlignment="Left" Content="PageUser" Command="{Binding ChangeFrameSourceCommand}" CommandParameter="PageUser"  Style="{StaticResource NullButton}"></Button>

        </ControlTemplate>

    </TreeViewItem.Template>

</TreeViewItem>

/* 省略了框架其他元素代码 */

<Frame x:Name="frameMain" Content="{Binding FrameSource,Mode=TwoWay,UpdateSourceTrigger=PropertyChanged}"  NavigationUIVisibility="Hidden" ScrollViewer.CanContentScroll="True"  ></Frame>

从代码中我们可以看到，VM中的属性FrameSource绑定到了页面Frame的Content属性上。

由于TreeViewItem没有Command的依赖属性，所以我们修改了他的模板，然后用模板内的Button的Command属性绑定了VM中的ChangeFrameSourceCommand属性。

因为ChangeFrameSourceCommand是BaseCommand类型，所以，当按钮被按下时，就会触发ChangeFrameSourceCommand定义的执行命令——ChangeFrameSourceCommand_Executed。

这样我们就实现了框架内的页面切换了。

----------------------------------------------------------------------------------------------------

到此，我们框架的基础功能就已经实现了。

但如果框架只写到这里，那ViewModel对页面的掌控力度就显的太弱了。

而且项目框架不能仅仅考虑结构分离和业务独立，我们还要降低使用难度和提高使用者的开发效率。

所以为了更好的掌控UI，降低开发者的门槛，我们还需要编写数据控件，让开发者在不能熟练掌握Xaml样式的情况下，依然可以顺利完成开发。

那么，本篇文章就先讲到这了，下一篇文章我们将一起为框架编写数据控件，敬请期待。

框架代码已经传到Github上了，并且会持续更新。

相关文章：

【我们一起写框架】MVVM的WPF框架（一）—序篇

To be continued

Github地址：https://github.com/kiba518/KibaFramework

----------------------------------------------------------------------------------------------------

注：此文章为原创，任何形式的转载都请联系作者获得授权并注明出处！
若您觉得这篇文章还不错，请点击下方的【推荐】，非常感谢！

【我们一起写框架】MVVM的WPF框架（二）—绑定的更多相关文章

  1. 【我们一起写框架】MVVM的WPF框架（五）—完结篇

    前言 这篇文章是WPF框架系列的最后一篇,在这里我想阐述一下我对框架设计的理解. 我对框架设计的理解是这样的: 框架设计不应该局限于任何一种设计模式,我们在设计框架时,应该将设计模式揉碎,再重组:这样 ...

  2. 【我们一起写框架】MVVM的WPF框架（一）—序篇

    前言 我想,有一部分程序员应该是在二三线城市的,虽然不知道占比,但想来应该不在少数. 我是这部分人群中的一份子. 我们这群人,面对的客户,大多是国内中小企业,或者政府的小部门.这类客户的特点是,资金有 ...

  3. 【我们一起写框架】MVVM的WPF框架（三）—数据控件

    这世上,没人能一次性写出完美无缺的框架:因为,任何一个框架都需要项目的淬炼,然后才能升华,趋近完美. 所以,框架是个反复修改的东西,最终形成的东西. 如果你学了一点技术,觉得自己可以写出框架了,觉得自 ...

  4. 【我们一起写框架】MVVM的WPF框架（四）—DataGrid

    前言 这个框架写到这里,应该有很多同学发现,框架很多地方的细节,其实是违背了MVVM的设计逻辑的. 没错,它的确是违背了. 但为什么明知道违背设计逻辑,还要这样编写框架呢? 那是因为,我们编写的是框架 ...

  5. Jquery如何序列化form表单数据为JSON对象 C# ADO.NET中设置Like模糊查询的参数 从客户端出现小于等于公式符号引发检测到有潜在危险的Request.Form 值 jquery调用iframe里面的方法 Js根据Ip地址自动判断是哪个城市 【我们一起写框架】MVVM的WPF框架（三）—数据控件 设计模式之简单工厂模式（C#语言描述）

    jquery提供的serialize方法能够实现. $("#searchForm").serialize();但是,观察输出的信息,发现serialize()方法做的是将表单中的数 ...

  6. WPF Prism框架下基于MVVM模式的命令、绑定、事件

    Prism框架下的自定义路由事件和命令绑定 BaseCode XAML代码: <Button x:Class="IM.UI.CommandEx.PrismCommandEx" ...

  7. 剖析手写Vue，你也可以手写一个MVVM框架

    剖析手写Vue,你也可以手写一个MVVM框架# 邮箱:563995050@qq.com github: https://github.com/xiaoqiuxiong 作者:肖秋雄(eddy) 温馨提 ...

  8. win10 uwp MVVM 轻量框架

    如果在开发过程,遇到多个页面之间,需要传输信息,那么可能遇到设计的问题.如果因为一个页面内包含多个子页面和多个子页面之间的通信问题找不到一个好的解决方法,那么请看本文.如果因为ViewModel代码越 ...

  9. 基于xlua和mvvm的unity框架

    1.框架简介 这两天在Github上发现了xlua的作者车雄生前辈开源的一个框架—XUUI,于是下载下来学习了一下.XUUI基于xlua,又借鉴了mvvm的设计概念.xlua是目前很火的unity热更 ...

随机推荐

  1. 【bzoj 2916】[Poi1997]Monochromatic Triangles

    题目描述        空间中有n个点,任意3个点不共线.每两个点用红线或者蓝线连接,如果一个三角形的三边颜色相同,那么称为同色三角形.给你一组数据,计算同色三角形的总数.          输入 第 ...

  2. Python笔记 in 机器学习

    Python3的函数实在太多了,在机器学习的过程中,总会一不留神就学到一个python的高效率用法,怕自己会忘记,所以更新在这篇随笔中. 更新至:2018.5.23 字符串str的前缀或者后缀识别 s ...

  3. Eigen实现坐标转换

    (<视觉SLAM十四讲>第三讲习题7)设有小萝卜一号和二号在世界坐标系中.一号位姿q1 = [0.35, 0.2, 0.3, 0.1],t1=[0.3, 0.1, 0.1].二号位姿q2= ...

  4. asp.net core系列 47 Identity 自定义用户数据

    一.概述 接着上篇的WebAppIdentityDemo项目,将自定义用户数据添加到Identity DB,自定义扩展的用户数据类应继承IdentityUser类, 文件名为Areas / Ident ...

  5. 约定Service构建方式

    对于DevOps中,将开发好的软件交付给运维人员去部署与维护,过程中参杂着诸多不可控制的变量,如环境问题.版本问题等等,而Docker容器极大程度上解决了这些问题,同时对于服务的持续交付,也变得方便和 ...

  6. 如何使用JS来开发室内三维地图的轨迹回放功能

     在制作完成室内三维地图的功能后,最经常有的需求就是如何做人员的轨迹回放,一般流程都是从数据库中查询轨迹坐标后,经过后台查询接口返回给前端,接下来的事情都交给JS来完成. 如果想做好一个性能好的轨迹回 ...

  7. String字符串类总结

    object类 int hashCode() Object定义的hashCode方法能为不同对象返回不同的整数.实际上是把JVM给对象分配的地址转化为整数,确保了逻辑上的唯一性.而转化的散列算法,可能 ...

  8. Hibernate学习——API学习

    一.Configuration对象 解释:Hibernate的配置文件对象,是Hibernate启动加载的第一个对象,它会定位到映射文档的位置,读取配置文件,创建一个SessionFactory对象. ...

  9. 《深入理解Java虚拟机》读书笔记（第三章）

    垃圾收集器与内存分配策略(第三章) 前言,众所周知,Java是由c++进化而来,c++在内存需自己申请,自己释放,于是就有了Java的动态内存分配.书的第三章开篇,有这样一句话描述的很妙——Java与 ...

  10. RFI to RCE challenge

    http://www.zixem.altervista.org/RCE/level1.php 构造payload: https://zixem.altervista.org/RCE/level1.ph ...