• 使用Expression Blend处理ViewModel绑定


    XAML的调试历来是较为繁琐且不方便的,处理稍有不慎或者初学者通过在VS中手写绑定代码,极度容易写出不规范的绑定代码。所以,我们对于团队成员在此方面的唯一要求就是:使用Expression Blend处理ViewModel绑定。不然,你就会常常听到团队成员烦躁:太奇怪了,我绑定对啊,为什么总是出不来值。没错,“太奇怪了”,是开发人员的一种呻吟。

    一:ViewModel和当前页面的绑定

    采用绑定的措施,下面的代码是要极力避免的。这样的代码通常出现在Code Behind中:

    image

    我们需要VM在前台XAML中生成实例。具体步骤如下:

    1:去除红框内的代码;

    2:为页面指定DataContext

    image

    首先是选中最上层的元素,在当前这个例子中是UserControl,如果是Page的话,就选择Page。实际上,如果明白其中的原理,可以将VM指定给任何元素。

    其次,点击属性中DataContext的new旁边的小点(是个方框),出来如下界面:

    image

    选择+CLR Object,接着出来:

    image

    在我们的这个例子中,我们的ViewModel选择的是MainPageVM。选中,OK。这个时候,我们会发现前台XAML代码中,多了如下的内容:

    image

    第一个红框指定命名空间,第二个红框就是为UserControl指定了DataContext,运行时会生成一个MainPageVM的实例对象。

    你也许会说,在前台指定,我们不能让VM带有参的构造函数。没错,为什么要带?即便我们不使用构造器注入,也可以使用属性注入。我们在后面会提到一个不是那么好看的初始化方法。

    二:绑定VM的属性

    注意,从数据库中(通过wcf, ria service, 或者等等其它手段)获取的数据,在我们的例子中是要绑定到一个DataGrid中呈现。假设已经有代码如下:

    image

    现在我们应该为DataGrid绑定VM中的DepartmentsWithCourses属性(Department是部门,每个部门对应多个学科,所以这个属性取名为DepartmentsWithCourses)。

    我们知道,如果不是ListBox,或者DataGrid这样的控件,我们直接选中控件,就可以为其绑定VM中的值了。但是,如果是这种多记录控件,实际上就要编辑对应的记录的模版。如,以DataGrid为例,就应该在EB中这样选择,注意红框:

    image

    选中Edit Current后,我们就会发现RowDetailsTemplate中的元素出现在EB的Objects and TimeLine里了。

    image

    现在,我们可以选中这些元素,进行绑定了。如果我们要回到上层,注意点击左上角的小红框中的内容就可以了。

    选中某个textBlock,为其指定Text:

    image

    选中Text后面的方框后,接着:

    image

    可以发现,我们可以针对实体类型Department进行选择。选择确定后,生成代码类似如下:

    image

    三:执行一些初始化

    如果不使用一些注入容器,而想在VM中完成一些跨界数据操作的话,必须采取一些不得已的做法。如,反正Page页面是不能用于单元测试的,那么我们索性将Service的实例在Page页面中赋值给VM。这就出现了我们如下的代码。在VM中,我们创建一个Init方法,接受Service实例:

    image

    在页面中,我们调用:

    image

    如果此刻我们运行代码,UI为:

    image

    一切正常,大功告成。我们再也不用为绑定语法可能存在的细节错误悲泣。

    四:绑定命令并传递参数

    接下来要对此内容进行稍微拓展,演示如何绑定命令及传递参数。要让前台绑定命令,首先我们需要在VM中创建这个命令:

    image

    第一个红框是需要引入的程序集的命名空间。第二个红框就是命令属性,而OnItemClick就是此命令的实现。

    在EB中进行绑定,做如下选择:image

    然后,选中代表删除的Button:

    image

    然后选中Asserts,出现如下:

    image

    然后选中Behavios中的InvokeCommandAction,双击或者拖动到Button下。生成代码如下:

    image

    然后,在属性中:

    image

    绑定命令和参数,其中命令,做如下选择:

    image

    参数做如下选择:

    image

    生成的代码如下:

    image

    运行的最终效果:

    image

    本文代码下载:SilverlightApplication20110701.rar

    数据库参考:使用Entity Framework和WCF Ria Services开发SilverLight之1:简单模型

  • 相关阅读:
    paip.提升用户体验c++ 右键菜单以及socket接口
    paip. 'QObject::QObject(const QObject&)' is private问题的解决.
    paip.ollydbg 设置c++ qt API断点总结
    paip.提升用户体验c++ qt自定义窗体(1)标题栏的绘制
    paip.提升用户体验c++ QPushButton按钮控件透明以及不规则按钮以及 鼠标越过动态设置
    paip.c++ static 变量的定义以及使用...
    paip.c++ gcc 不能捕获exception异常的解决
    paip.pyqt python qt 最新版本环境最佳实践
    paip.提升用户体验c++ QLabel标签以及QLineEdit文本框控件透明 设置
    paip.c++ 宏的展开调试.
  • 原文地址:https://www.cnblogs.com/luminji/p/2095596.html
Copyright © 2020-2023  润新知