Expression Blend实例中文教程(6) - 项目控件和用户交互控件快速入门

简介:
 
前文我们曾经描述过,微软把Silverlight控件大致分为三类:
第一类: Layout Controls(布局控件)
第二类: Item Controls (项目控件)
第三类: User Interaction Controls(用户交互控件)
我们已经对第一类布局控件在Blend中的应用进行了描述。本文将介绍Item Controls,也称为项目控件;和User Interaction Controls,也称为用户交互控件.
 
Item Controls (项目控件)
在实际项目中,我们经常会遇到处理数据集合或者数组的情况,而处理数据集合最好的方法就是使用“Binding”绑定。正如您所知道的,在ASP.NET中,就已经应用了“Binding”绑定的概念,其优势在于节省了大量的开发时间,降低了开发难度。而在Silverlight中微软加强了Binding功能,并且使用Item Controls(项目控件)来显示和处理数据集合和数组类型数据。Silverlight提供了四种标准项目控件,分别是ListBox,ComboBox,TabControl和TreeView。 下面,我将演示在Blend中如何使用这些控件。
 
根据上文描述,使用Item Controls前,首先需要绑定数据,而绑定数据需要有相关数据源,所以,我们需要先定义数据源。本文依旧使用前文例程SilverlightBlendDemo,在Silverlight客户端创建一个新的Usercontrol,ItemControlsDemo.xaml.
 
创建完毕后,主设计窗口将呈现ItemControlsDemo的UI设计界面,看右边属性栏,有三个Tab,其中包含“Data”,选中Data,
 
该窗口允许用户在Blend中定义数据源,导入XML格式数据,定义外部数据源等功能。
 
 
首先,我们选择“Define New Sample Data..",定义一个新的例程数据源,名字使用默认SampleDataSource。其中,Define in是指定该数据源的应用访问,默认为整个项目,当然,如果作为测试,也可以指定该数据源仅应用于当前打开文档。这里,我们使用默认设置。
 
创建完成后,在右边Data数据栏中,会出现SampleDataSource选项,而在该数据源下包含一个集合“Collection”,该集合默认有两个属性“Property1”和“Property2”。在项目应用中,可以根据需要再添加新的属性。
 
由于我们添加的是例程数据源,Blend已经在该数据源中添加了例程数据,根据需求,我们可以对例程数据进行修改。首先选择Collection,然后点击 编辑例程数据,
可以看到,Blend生成的默认例程数据,这里我们可以进行简单修改,Property1默认类型String,Property2默认类型为Boolean,这里我想修改Property2为String,
类型修改为String,还可以修改该数据列的具体的格式:
为了方便演示我修改两个默认属性名,分别为,“网站”和“网址”
 
点击OK,例程数据建立完成。
下面,看看在Blend中如何使用Item Controls装载数据源。首先我们测试ListBox:
在左边工具栏,选择ListBox控件,然后在ItemControlsDemo.Xaml设计页面,画一个ListBox。
然后从右边Data栏中,选中Collection,拖拽到ListBox空白处,ListBox即可自动绑定例程数据。
Blend会自动生成XAML代码,对例程数据进行绑定。
 
 1  < UserControl.Resources >
 2       < DataTemplate  x:Key ="ItemTemplate" >
 3           < StackPanel >
 4             < TextBlock  Text =" {Binding 网址} " />
 5             < TextBlock  Text =" {Binding 网站} " />
 6           </ StackPanel >
 7       </ DataTemplate >
 8  </ UserControl.Resources >
 9  < Grid  x:Name ="LayoutRoot"  DataContext =" {Binding Source={StaticResource SampleDataSource}} " >
10       < ListBox  HorizontalAlignment ="Left"  Margin ="48,45,0,43"  Width ="249"  ItemTemplate =" {StaticResource ItemTemplate} "  ItemsSource =" {Binding Collection} " />
11  </ Grid >
 
 
这样就轻松实现了ListBox绑定例程数据。
再试试ComboBox,从左边工具框选择ComboBox,在设计页面画一个ComboxBox,
仍旧按照以上方法,拖拽Collection到ComboBox上,即可看到数据已经进行绑定。
 同样,在Treeview中,也可以正常绑定。
 
在数据绑定的时候,Data栏目,会有黄色的框,表示“Data Binding”。
 
具体的定义,在Property属性栏中查看:
 
以上则是使用Blend对Item Controls进行数据绑定的方法。由于文本主要讲述Blend应用,这里,就不再对Item Controls的属性进行赘述,如果您有问题可以留言给我。
 
User Interaction Controls(用户交互控件)
Silverlight控件中,User Interaction Controls是面向用户行为交互,该控件和ASP.NET和WPF中的大部分交互控件相同,用法也基本相似。其选取和设计,和前文Item Controls相同,这里就不再赘述。需要注意的是,不同的交互控件,具有不同的交互事件,从而达到不同的交互效果。在后文,如果有需要,我将详细解释说明。
 
 
截至这里,Blend使用控件的快速入门结束,如果您有好的建议和问题,请您留言或者加QQ群一起讨论。
欢迎加入专注Silverlight QQ群:超级群 22308706, 37891947 ,100844510

本文转自冷秋寒 51CTO博客,原文链接:http://blog.51cto.com/kevinfan/288072,如需转载请自行联系原作者

相关文章
|
6月前
SAP UI5 控件 ObjectStatus 的使用方法介绍试读版
SAP UI5 控件 ObjectStatus 的使用方法介绍试读版
50 0
SAP UI5 控件 ObjectStatus 的使用方法介绍试读版
|
图形学
Unity 编辑器开发实战【Custom Editor】- 为UI视图制作动画编辑器
Unity 编辑器开发实战【Custom Editor】- 为UI视图制作动画编辑器
198 1
Unity 编辑器开发实战【Custom Editor】- 为UI视图制作动画编辑器
|
JavaScript
LeafLet实战-扩展工具栏指南
熟悉LeafLet的都知道,LeafLet自带的工具条只有两个按钮,一个放大和缩小。日常业务中,会用到许多的实用工具,比如测距,量测,如何扩展默认的工具条呢?解决方案如下两种:第一、自己基于dom创建页面元素,并挂载在其默认的工具栏中。第二、基于Leaflet.EasyButton进行扩展。
335 0
LeafLet实战-扩展工具栏指南
|
存储 索引
SwiftUI极简教程42:使用MatchedGeometryEffect构建一个导航菜单
在本章中,你将学会使用MatchedGeometryEffect构建一个导航菜单。 在构建SwiftUI应用过程中,我们常常会使用TabView构建底部菜单,但更多的时候会由于我们定制化的需求,需要我们自己绘制底部菜单。 那么本章中,我们就来试试构建一个底部导航菜单。
357 0
SwiftUI极简教程42:使用MatchedGeometryEffect构建一个导航菜单
|
前端开发
实例|APICloud AVM框架封装滑动单元格组件
滑动单元格组件原理是主题部分把按钮进行遮挡,按钮通过绝对定位,定位在最右边,通过监听触摸事件(touch),判断滑动的方向和计算滑动的距离以此来判定显示和隐藏按钮。
148 0
|
vr&ar 图形学
【Unity3D 灵巧小知识点】☀️ | Unity 中如何让 Toggle组件 实现多选一的效果
Unity 小科普 老规矩,先介绍一下 Unity 的科普小知识: Unity是 实时3D互动内容创作和运营平台 。 包括游戏开发、美术、建筑、汽车设计、影视在内的所有创作者,借助 Unity 将创意变成现实。
【Unity3D 灵巧小知识点】☀️ | Unity 中如何让 Toggle组件 实现多选一的效果
|
C#
使用Blend设计出符合效果的WPF界面
原文:使用Blend设计出符合效果的WPF界面 之前不会用blend,感觉好难的,但美工给出的效果自己有没办法实现,所以研究了一下blend,感觉没有想象中的那么难 废话不多说,开始界面设计 今天拿到美工给的一个界面效果图 这个界面说实话,还可以吧,勉强说得过去。
2198 0
|
C#
WPF和Expression Blend开发实例:Loading动画
原文:WPF和Expression Blend开发实例:Loading动画 今天来点实际的,项目中可以真实使用的,一个Loading的动画,最后封装成一个控件,可以直接使用在项目中,先上图: 整个设计比较简单,就是在界面上画18个Path,然后通过动画改变OpacityMask的值来实现一种动态的效果.
1175 0