使用Expression Blend处理ViewModel绑定

简介: XAML的调试历来是较为繁琐且不方便的,处理稍有不慎或者初学者通过在VS中手写绑定代码,极度容易写出不规范的绑定代码。所以,我们对于团队成员在此方面的唯一要求就是:使用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:简单模型

Creative Commons License本文基于 Creative Commons Attribution 2.5 China Mainland License发布,欢迎转载,演绎或用于商业目的,但是必须保留本文的署名 http://www.cnblogs.com/luminji(包含链接)。如您有任何疑问或者授权方面的协商,请给我留言。
目录
相关文章
|
6天前
|
存储 关系型数据库 分布式数据库
PostgreSQL 18 发布,快来 PolarDB 尝鲜!
PostgreSQL 18 发布,PolarDB for PostgreSQL 全面兼容。新版本支持异步I/O、UUIDv7、虚拟生成列、逻辑复制增强及OAuth认证,显著提升性能与安全。PolarDB-PG 18 支持存算分离架构,融合海量弹性存储与极致计算性能,搭配丰富插件生态,为企业提供高效、稳定、灵活的云数据库解决方案,助力企业数字化转型如虎添翼!
|
17天前
|
弹性计算 关系型数据库 微服务
基于 Docker 与 Kubernetes(K3s)的微服务:阿里云生产环境扩容实践
在微服务架构中,如何实现“稳定扩容”与“成本可控”是企业面临的核心挑战。本文结合 Python FastAPI 微服务实战,详解如何基于阿里云基础设施,利用 Docker 封装服务、K3s 实现容器编排,构建生产级微服务架构。内容涵盖容器构建、集群部署、自动扩缩容、可观测性等关键环节,适配阿里云资源特性与服务生态,助力企业打造低成本、高可靠、易扩展的微服务解决方案。
1320 7
|
5天前
|
存储 人工智能 Java
AI 超级智能体全栈项目阶段二:Prompt 优化技巧与学术分析 AI 应用开发实现上下文联系多轮对话
本文讲解 Prompt 基本概念与 10 个优化技巧,结合学术分析 AI 应用的需求分析、设计方案,介绍 Spring AI 中 ChatClient 及 Advisors 的使用。
297 129
AI 超级智能体全栈项目阶段二:Prompt 优化技巧与学术分析 AI 应用开发实现上下文联系多轮对话
|
4天前
|
监控 JavaScript Java
基于大模型技术的反欺诈知识问答系统
随着互联网与金融科技发展,网络欺诈频发,构建高效反欺诈平台成为迫切需求。本文基于Java、Vue.js、Spring Boot与MySQL技术,设计实现集欺诈识别、宣传教育、用户互动于一体的反欺诈系统,提升公众防范意识,助力企业合规与用户权益保护。
|
16天前
|
机器学习/深度学习 人工智能 前端开发
通义DeepResearch全面开源!同步分享可落地的高阶Agent构建方法论
通义研究团队开源发布通义 DeepResearch —— 首个在性能上可与 OpenAI DeepResearch 相媲美、并在多项权威基准测试中取得领先表现的全开源 Web Agent。
1392 87
|
4天前
|
JavaScript Java 大数据
基于JavaWeb的销售管理系统设计系统
本系统基于Java、MySQL、Spring Boot与Vue.js技术,构建高效、可扩展的销售管理平台,实现客户、订单、数据可视化等全流程自动化管理,提升企业运营效率与决策能力。
|
5天前
|
人工智能 Java API
AI 超级智能体全栈项目阶段一:AI大模型概述、选型、项目初始化以及基于阿里云灵积模型 Qwen-Plus实现模型接入四种方式(SDK/HTTP/SpringAI/langchain4j)
本文介绍AI大模型的核心概念、分类及开发者学习路径,重点讲解如何选择与接入大模型。项目基于Spring Boot,使用阿里云灵积模型(Qwen-Plus),对比SDK、HTTP、Spring AI和LangChain4j四种接入方式,助力开发者高效构建AI应用。
283 122
AI 超级智能体全栈项目阶段一:AI大模型概述、选型、项目初始化以及基于阿里云灵积模型 Qwen-Plus实现模型接入四种方式(SDK/HTTP/SpringAI/langchain4j)
|
5天前
|
弹性计算 安全 数据安全/隐私保护
2025年阿里云域名备案流程(新手图文详细流程)
本文图文详解阿里云账号注册、服务器租赁、域名购买及备案全流程,涵盖企业实名认证、信息模板创建、域名备案提交与管局审核等关键步骤,助您快速完成网站上线前的准备工作。
232 82
2025年阿里云域名备案流程(新手图文详细流程)