前文我们曾经描述过,微软把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.  
  2.  1 <UserControl.Resources>
  3.  2     <DataTemplate x:Key="ItemTemplate">
  4.  3         <StackPanel>
  5.  4           <TextBlock Text="{Binding 网址}"/>
  6.  5           <TextBlock Text="{Binding 网站}"/>
  7.  6         </StackPanel>
  8.  7     </DataTemplate>
  9.  8 </UserControl.Resources>
  10.  9 <Grid x:Name="LayoutRoot" DataContext="{Binding Source={StaticResource SampleDataSource}}">
  11. 10     <ListBox HorizontalAlignment="Left" Margin="48,45,0,43" Width="249" ItemTemplate="{StaticResource ItemTemplate}" ItemsSource="{Binding Collection}"/>
  12. 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相同,这里就不再赘述。需要注意的是,不同的交互控件,具有不同的交互事件,从而达到不同的交互效果。在后文,如果有需要,我将详细解释说明。

本节源代码下载

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

  1. Expression Blend实例中文教程系列

    Expression Blend实例中文教程系列 本系列文章均转载:银光中国 时间:2010-04-09 09:20责任编辑:银光中国网 点击:次 Expression Blend实例中文教程系列由C ...

  2. Expression Blend实例中文教程(11) - 视觉管理器快速入门Visual State Manager(VSM)

    Expression Blend实例中文教程(11) - 视觉管理器快速入门Visual State Manager(V 时间:2010-04-12 16:06来源:SilverlightChina. ...

  3. Expression Blend实例中文教程(8) - 动画设计快速入门StoryBoard http://silverlightchina.net/html/tips/2010/0329/934.html

    Expression Blend实例中文教程(8) - 动画设计快速入门StoryBoard 时间:2010-03-29 11:13来源:SilverlightChina.Net 作者:jv9 点击: ...

  4. Expression Blend实例中文教程(3) - 布局控件快速入门Grid

    上一篇对Blend 3开发界面进行了快速入门介绍,本篇将基于Blend 3介绍Silverlight控件.对于微软开发工具熟悉的朋友,相信您很快就熟悉Blend的开发界面和控件. XAML概述 Sil ...

  5. Expression Blend实例中文教程(4) - 布局控件快速入门Canvas

    上一篇,我介绍了Silverlight控件被分为三种类型, 第一类: Layout Controls(布局控件) 第二类: Item Controls (项目控件) 第三类: User Interac ...

  6. Expression Blend实例中文教程(13) - 控件模板快速入门ControlTemplates

    上篇,介绍了控件样式(Style)和模板(Template)的基础概念,并且演示了使用Blend设计控件样式.本篇将继续介绍使用Blend设计自定义控件模板 - ControlTemplate.Con ...

  7. Expression Blend实例中文教程(5) - 布局控件快速入门StackPanel,ScrollViewer和Border

    上一篇,介绍了Canvas布局控件在Blend中的使用.本篇继续介绍布局控件StackPanel,ScrollViewer和Border. 相对于Grid和Canvas来说,StackPanel,Sc ...

  8. Expression Blend实例中文教程(11) - 视觉管理器快速入门Visual State Manager(VSM)

    Visual State Manager,中文又称视觉状态管理器(简称为VSM),是Silverlight 2中引进的一个概念.通过使用VSM,开发人员和设计人员可以轻松的改变项目控件的视觉效果,在项 ...

  9. Expression Blend实例中文教程(2) - 界面快速入门

    上一篇主要介绍Expression系列产品,另外概述了Blend的强大功能,本篇将用Blend 3创建一个新Silverlight项目,通过创建的过程,对Blend进行快速入门学习. 在开始使用Ble ...

随机推荐

  1. luogu AC自动机(模板)

    完全忘了AC自动机怎么写了qwq,更别说AC自动机上DP了. 今天就好好地学习字符串好了qwq 提一下AC自动机的时间复杂度--设n是模式串的个数,m是文本串的长度,l是模式串的平均长度,那么它的时间 ...

  2. join()函数

    注意:会报错 正确的:

  3. HashMap源码解析 非原创

    Stack过时的类,使用Deque重新实现. HashCode和equals的关系 HashCode为hash码,用于散列数组中的存储时HashMap进行散列映射. equals方法适用于比较两个对象 ...

  4. React Native 搭建开发环境

    1.先安装node.js,https://nodejs.org/en/download/ 然后,双击下载好的.msi文件安装即可,安装完成后,打开终端,输出npm -v 即可查看我们刚才安装的node ...

  5. java执行命令行命令

    package javai; import java.io.BufferedReader; import java.io.InputStreamReader; public class IOTest ...

  6. jmeter之jtl文件解析(生成测试报告)

    我们知道命令行的方式执行完成jmeter后,会生成jtl文件,里面打开后就是一行行的测试结果, <httpSample t="1" lt="1" ts=& ...

  7. .net core 2.0部署到CentOS7系统

    1.Nginx的安装(重启Nginx命令: systemctl restart nginx) 输入命令( 根据提示输入Y 即可): sudo yum install epel-release sudo ...

  8. nginx高性能WEB服务器系列之八--nginx日志分析与切割

    nginx系列友情链接:nginx高性能WEB服务器系列之一简介及安装https://www.cnblogs.com/maxtgood/p/9597596.htmlnginx高性能WEB服务器系列之二 ...

  9. Python2和Python3之间的区别

    编码区别 Python3.X版本中源码文件默认使用的是utf-8编码 Unicode 字符串 Python 2有两种字符串类型:Unicode字符串和非Unicode字符串 Python 3只有一种类 ...

  10. 循环神经网络中BFTT的公式推导

    一.变量定义 此文是我学习BFTT算法的笔记,参考了雷明<机器学习与应用>中的BFTT算法推导,将该本书若干个推导串联起来,下列所有公式都是结合书和资料,手动在PPT上码的,很费时间,但是 ...