Silverlight 5 Beta新特性[1]数据绑定中断点调试
2011-04-18 17:41
501 查看
MIX11已经结束.Silverlight官方团队也例行的发布一个Silverlight5Beta版本.这作为第一个公开测试版本.也加入很多很有看点的新特性.如下针对Silverlight5Beta版本所体现新特性将逐一实例编程进行验证.在进入Silverlight5Beta编程前.需要额外配置开发环境:
需要额外下载文件:
DownLoadFiles:
VisualStudio2010SP1[Required]
Silverlight5BetaToolsforVisualStudioSP1[Required]
ExpressionBlendPreviewforSilverlight5[Optional]
Silverlight5FeaturesDocument[Optional]
需要额外下载文件:
其中必须下载VS2010SP1补丁包和Silverlight5BetaToolsForVSSP1文件.先安装VS2010SP1补丁包在安装Silverlight5BetaTools工具包文件.当然此次MS官方也同样放出相应版本ExpressBlend下载来对Silverlight5加以支持.在上篇
yousee!我们可以明确看到现在SilverlightApplication支持Silverlight5版本.ok配置好开发环境.在转到本文关于Silverlight5Beta版本中对数据绑定支持断点调试.
在SilverlightAPP做基于MVVM框架所体现数据绑定引擎时数据流向如下:
绑定引擎在绑定目标和绑定元之间:UI和数据对象之间的连接或绑定使数据得以在这二者之间流动.众所周知在Silverlight5以前版本中对页面XAML元素无法实现数据绑定时断点调试.体现在两个方面:
[1]XAML元素中没有地方放可识别的调试代码
[2]如果要做基于数据绑定调试,则必须写一个自定义值转换器和调试器附加到所有的绑定
如下构建一个以MVVM绑定实例演示DataBinding时断点调试构建解决方案:
构建Customer实体类:
publicclassCustomer
[code]{
publicintCustomerId{get;set;}
publicstringCustomerName{get;set;}
publicstringCustomerType{get;set;}
publicstringSignDate{get;set;}
}
[/code]
.csharpcode,.csharpcodepre
{
font-size:small;
color:black;
font-family:consolas,"CourierNew",courier,monospace;
background-color:#ffffff;
/*white-space:pre;*/
}
.csharpcodepre{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;}
构建对应ViewModel:
publicclassCustomer_ViewModel:INotifyPropertyChanged
[code]{
publicEntityModels.CustomerGetCustomerResult{get;set;}
publiceventPropertyChangedEventHandlerPropertyChanged;
publicCustomer_ViewModel()
{
this.GetCustomerResult=newEntityModels.Customer()
{
CustomerId=5806,
CustomerName="ChenkaiUnion",
CustomerType="VIPService",
SignDate=DateTime.Now.ToString()
};
}
}
[/code]
.csharpcode,.csharpcodepre
{
font-size:small;
color:black;
font-family:consolas,"CourierNew",courier,monospace;
background-color:#ffffff;
/*white-space:pre;*/
}
.csharpcodepre{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;}
View页面在XAML元素中建立数据绑定:
<Gridx:Name="LayoutRoot"Background="White">
[code]<StackPanelOrientation="Vertical"Margin="50">
<TextBlockText="{BindingPath=CustomerId}"Foreground="Green"FontSize="16"></TextBlock>
<TextBlockText="{BindingPath=CustomerName}"Foreground="Green"FontSize="16"></TextBlock>
</StackPanel>
</Grid>
[/code]
.csharpcode,.csharpcodepre
{
font-size:small;
color:black;
font-family:consolas,"CourierNew",courier,monospace;
background-color:#ffffff;
/*white-space:pre;*/
}
.csharpcodepre{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;}
后台构建绑定:
voidCustomerService_Form_Loaded(objectsender,RoutedEventArgse)
[code]{
ViewModels.Customer_ViewModelgetCustomer_VM=newViewModels.Customer_ViewModel();
this.LayoutRoot.DataContext=getCustomer_VM;
}
[/code]
.csharpcode,.csharpcodepre
{
font-size:small;
color:black;
font-family:consolas,"CourierNew",courier,monospace;
background-color:#ffffff;
/*white-space:pre;*/
}
.csharpcodepre{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;}
如上基于MVVM最简单数据绑定实现了,有些同学是否发现XAML元素绑定页面存在绑定错误?因为指定根元素Grid的DataContent为CustomerViewModel.但是在CustomerViewModel并没有直接存在CustomerId和CustomerName属性.运行时报错.我是故意这样做来看一下Silverlight5对DAtaBinding断点调试效果,在XAML页面元素绑定来加入断点:
编译通过,F5执行Debug:
成功获取Debug断点根据我们预期应该会出现并扑捉到DAtaBing数据绑定异常:
在进一步获得详细的Debug异常信息:
DebugExceptionMessage:
System.Windows.Data错误:BindingExpression路径错误:在“FuturesDebugSupport_Demo.ViewModels.Customer_ViewModel”“FuturesDebugSupport_Demo.ViewModels.
Customer_ViewModel”(HashCode=27717712)上找不到“CustomerId”属性。BindingExpression:Path='CustomerId'DataItem='FuturesDebugSupport_Demo.ViewModels.Customer_ViewModel'(HashCode=27717712);目标元素为'System.Windows.Controls.TextBlock'(Name='');目标属性为'Text'(类型'System.String')
youSee!以前当我们在DataContent数据源出现运行时是在Xaml无法看到这些详细调试信息.的.但是现在加入Xaml元素断点支持可以很容易在运行时看到绑定DAtaContent对象是否正确.一旦加入XAML断点就可以看在调试时直观看到DataBinding的绑定的值.当我们把XAML元素修改成正确绑定时:
再次执行Debug调试:
可以很直观清晰看到绑定对象的值.来判断绑定对象是否正确.
ok.我在上面提到一点如果如果在Silverlight5以前版本做XAML绑定值监控.则需要自定义一个值转化器和调试器附加所有DAtaBinding上.这样一来数据量就显得有点大.不容易控制.同样在现在Silverlight5版本在XAML存在多处DataBinding.难道要到处XAML元素中添加断点吗?silverlight5Beta给我们带来一种更简便的方式:Conditionalbreakpoint[断点条件]支持.
ConditionalBreakpoint断点条件支持.是在XAML元素中添加多处断点.当执行Debug时通过断点条件表达式来判断是否执行该断点调试.类似我现在添加XAML两个断点.当出现:
((System.Windows.Data.Debugging.BindingDebugState)BindingState).Error
.csharpcode,.csharpcodepre
{
font-size:small;
color:black;
font-family:consolas,"CourierNew",courier,monospace;
background-color:#ffffff;
/*white-space:pre;*/
}
.csharpcodepre{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;}
当出现DataBing错误时菜执行断点调试.如果没有错误则执行通过.不出现多个断点间中断现象.ok.现在在数据绑定第一个断点添加一个断点条件找到断点右键点击:
选择Condition条件添加表达式:
这样一运行:
可以发现执行断点直接跳过第一个断点执行到第二个没有添加断点条件后发生中止.这样就解决正对MVVM中多出绑定实现快捷Debug的方式.提高调试效率.
可见XAMLDAtaBinding加入断点调试还是很方便监控DAtaBinding数据对象的值.提高XAML编译的友好性.ok至此Silverlight5XAML对断点调试如上.下面提供对本次调试源码如有疑问请在留言中提出:
SourceCodeDownloadLink: