构建基于WinRT的WP8.1 App 02:数据绑定新特性

基于WinRT的Windows Phone 8.1以及Windows 8.1中Xaml数据绑定增加了一些新特性。

FallBackValue属性:FallBackValue在绑定的值属性值不存在时,可以指定一个代替的属性和值显示。

   1:  <TextBlock Text="{Binding Path=badPath, 
   2:             FallbackValue=‘this is a fallback value‘}"     
   3:             Grid.Column="1"> </TextBlock>

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

上述代码中设置了FallbackValue属性,也就说当badParh属性值不存在(无返回值)时,将使用“this is a fallback value”文本进行替代显示。

关于FallBackValue属性的详细解释可参考MSDN:

http://msdn.microsoft.com/zh-cn/library/windows/apps/xaml/windows.ui.xaml.data.binding.fallbackvalue.aspx

TargetNullValue属性:TargetNullValue在绑定的属性值返回Null时可以指定一个代替的属性或值显示。

   1:  <Button Content="{Binding Path=NextItem, Mode=OneWay, 
   2:  TargetNullValue={Binding Path=NullValue}}" />

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

上述代码中设置了TargetNullValue属性值,也就是说当Button.Content属性绑定的NextItem值为Null,使用NullValue属性值进行显示。

关于TargetNullValue属性的详细解释可参考MSDN:

http://msdn.microsoft.com/zh-cn/library/windows/apps/xaml/windows.ui.xaml.data.binding.targetnullvalue.aspx

UpdateSourceTrigger属性:通过设置UpdateSourceTrigger属性值,确定双向绑定的绑定的源更新的执行时间。

其实UpdateSourceTrigger属性早已经出现在WPF和Silverlight中,而Windows Phone 8.1和Windows 8.1中Xaml才引入该属性。

   1:  <TextBox x:Name="NameTxtBox1" Text="{Binding Name, Mode=TwoWay, UpdateSourceTrigger=Default}" Width="200" HorizontalAlignment="Left" Grid.Column="1" Grid.Row="1"/>
   2:  <TextBox x:Name="NameTxtBox" Text="{Binding Name, Mode=TwoWay, UpdateSourceTrigger=Explicit}" Width="200" Grid.Row="2" HorizontalAlignment="Left" Grid.Column="1"/>
   3:  <TextBox x:Name="NameTxtBox3" Text="{Binding Name, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" Width="200" Grid.Row="3" HorizontalAlignment="Left" Grid.Column="1"/>

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

从上述代码中看到,UpdateSourceTrigger包含3个枚举值。

Default:使用依赖项属性(该属性使用绑定)中的默认行为。在WinRT运行时,实现数据绑定更新的效果等同于PropertyChanged。

PropertyChanged:每当绑定目标值改变时,就会更新绑定源。这由绑定系统自动检测。

Explicit:仅在调用BindingExpression.UpdateSource方法时更新绑定源。

通俗点理解就是,当UpdateSourceTrigger属性值设置为Default或者PropertyChanged时,当更新目标属性值时,数据源会马上进行更新,而设置为Explicit时,需要使用GetBindingExpression方法从某个对象获取BindingExpression,在该对象中存在依赖属性的Binding,然后调用获取的BindingExpression对象的UpdateSource方法更新数据源,代码可以参考如下:

   1:   var expression = NameTxtBox.GetBindingExpression(TextBox.TextProperty);
   2:   expression.UpdateSource();

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

关于UpdateSourceTrigger属性的详细解释可参考MSDN:

http://msdn.microsoft.com/zh-cn/library/windows/apps/xaml/windows.ui.xaml.data.binding.updatesourcetrigger.aspx

 

另外关于继承INotifyPropertyChanged的ViewModel中具有属性通知的属性写法,可利用C#5.0中新特性进行优化。

未优化的ViewModel实现方式:

注意红色框,如果有一天项目中ID属性名称发生了更改,其实有很大几率会把NotifyPropertyChanged(“ID”)中”ID“文本忘记更新,这样就会导致无法实现双向绑定的属性值更改通知。

因此我们可以将上述代码进行优化:

上述代码中,优化主要通过CallerMemberName特性实现。CallerMemberName是C#5.0中引入的调用方信息其中一个特性,通过调用方信息可以方便的获取调用方的函数名称和位置。

关于调用方信息详细解释可参考MSDN:

http://msdn.microsoft.com/zh-cn/library/vstudio/hh534540(v=vs.110).aspx

时间: 2024-10-15 18:24:23

构建基于WinRT的WP8.1 App 02:数据绑定新特性的相关文章

构建基于WinRT的WP8.1 App 01:页面导航及页面缓存模式

本篇博文主要阐述基于Windows Runtime的Windows Phone 应用页面间导航相关知识,主要分为以下几个方面: Window.Frame和Page概览 页面间实现跳转 处理物理后退键 页面的缓存 Window.Frame和Page概览 基于WinRT的Windows Phone 8.1,每个App只有一个Window. 每个Window都有自己的Frame和导航栈, 以及自己的Page. Window中有一个Frame,并且100%撑满可视区域,通常Frame也是100%撑满Wi

构建基于Javascript的移动web CMS——Hello,World

在一篇构建基于Javascript的移动web CMS入门--简介中简单的介绍了关于墨颀CMS的一些原理,其极框架组成,于是开始接着应该说明一下这个CMS是如何一步步搭建起来. RequireJS 使用 库及依赖 这里用的是bower的JS来下载库,详细可以参考一下bower install js使用bower管理js 这篇文章. 需要下载的库有 RequireJS Backbone Underscore Mustache jQuery 使用RequireJS 引用官网的示例 <!DOCTYPE

构建基于Javascript的移动web CMS——模板

在上一篇<构建基于Javascript的移动CMS--Hello,World>讲述了墨颀 CMS的大概组成,并进行了一个简单的演示样例,即Hello,World.这一次,我们将把CMS简单的放到一个能够执行的服务器环境中,也就是说我们须要一个简单的执行环境,以便于进行更有意思的东西--加入?模板. 開始之前 环境准备 类Unix系统 由于电脑上已经装有python了,这里便用python起一个简单的server,对于GNU/Linux.Mac OS等类unix系统来说,都能够这样执行: pyt

构建基于Javascript的移动web CMS——加载JSON文件

在上一篇中说到了如何创建一个Django Tastypie API给移动CMS用,接着我们似乎也应该有一个本地的配置文件用于一些简单的配置,如"获取API的URL"."产品列表"."SEO"(在一开始的时候发现这是不好的,后面又发现Google的爬虫可以运行Javascript,不过也是不推荐的.)这些东西是不太需要修改的,直接写在代码中似乎又不好,于是放到了一个叫作configure.json的文件里. RequireJS Plugins 网上

构建基于CXF的WebService服务(1)--创建HelloWorld服务

1.Apache CXF简介 Apache CXF = Celtix+ XFire,开始叫 Apache CeltiXfire,后来更名为 Apache CXF 了,以下简称为 CXF.CXF 继承了 Celtix 和XFire 两大开源项目的精华,提供了对 JAX-WS全面的支持,并且提供了多种Binding .DataBinding.Transport 以及各种 Format 的支持,并且可以根据实际项目的需要,采用代码优先(Code First)或者 WSDL 优先(WSDL First)

构建基于Javascript的移动CMS——添加滑动

在和几个有兴趣做移动CMS的小伙伴讨论了一番之后,我们觉得当前比较重要的便是统一一下RESTful API.然而最近持续断网中,又遭遇了一次停电,暂停了对API的思考.在周末无聊的时光了看了<人间失格>,又看了会<一个人流浪,不必去远方>.开始思考所谓的技术以外的事情,或许这将是下一篇讨论的话题. 正在我对这个移动CMS的功能一筹莫展的时候,帮小伙伴在做一个图片滑动的时候,便想着将这个功能加进去,很顺利地找到了一个库. 移动CMS滑动 我们所需要的两个功能很简单 当用户向右滑动的时

构建基于Javascript的移动CMS——生成博客(二).路由

在有了上部分的基础之后,我们就可以生成一个博客的内容--BlogPosts Detail.这样就完成了我们这个移动CMS的几乎主要的功能了,有了上节想必对于我们来说要获取一个文章已经不是一件难的事情了. 获取每篇博客 于是我们照猫画虎地写了一个BlogDetail.js define([ 'jquery', 'underscore', 'mustache', 'text!/blog_details.html' ],function($, _, Mustache, blogDetailsTempl

css013 构建基于浮动的布局

css013 构建基于浮动的布局 基于浮动的布局时利用float属性是网页上的元素并排,并创建列 float有三个值:left .right .none 1.假设要把一张图片浮动到网页的左侧 .float-left{ float:eft; } 假如要把一个装满内容的<div>浮动到一边,形成一个侧边栏 .sidebar{ float:left; width:150px; } 2.设计一个简单的两列布局需要的几个步骤 a. 把每列都包在一个带有ID或class属性的<div>标签里面

构建基于CXF的WebService服务(3)-- 利用拦截器实现权限验证

CXF中的拦截器分为in拦截器和out拦截器,又有客户端拦截器和服务端拦截器. 拦截器使用流程:客户端(out)-> 服务端(in)->处理业务->服务端(out)->客户端(in),并不是每一步都需要拦截器.在这里我们用到的是客户端Out拦截器和服务端in拦截器.服务端in拦截器检查用户级权限,客户端out浏览器发送用户信息给服务端. 1.创建服务端验证 JaxWsServerFactoryBean或Endpoint都可以通过getInInterceptors方法,向WebSer