第一类: 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.
![](https://i-blog.csdnimg.cn/blog_migrate/24c6df7efc1dc8c04b092877b168e3f4.jpeg)
创建完毕后,主设计窗口将呈现ItemControlsDemo的UI设计界面,看右边属性栏,有三个Tab,其中包含“Data”,选中Data,
![](https://i-blog.csdnimg.cn/blog_migrate/477ccda8baf2e6a474d2f1cd1ef3877a.jpeg)
该窗口允许用户在Blend中定义数据源,导入XML格式数据,定义外部数据源等功能。
![](https://i-blog.csdnimg.cn/blog_migrate/fa9e8e769e12280817b863f8ce4c31be.jpeg)
![](https://i-blog.csdnimg.cn/blog_migrate/5c205725dd2f1e975eecb0642311b4f1.jpeg)
首先,我们选择“Define New Sample Data..",定义一个新的例程数据源,名字使用默认SampleDataSource。其中,Define in是指定该数据源的应用访问,默认为整个项目,当然,如果作为测试,也可以指定该数据源仅应用于当前打开文档。这里,我们使用默认设置。
![](https://i-blog.csdnimg.cn/blog_migrate/ae28d85c2ef96f0fe9275bd18bf2687d.jpeg)
创建完成后,在右边Data数据栏中,会出现SampleDataSource选项,而在该数据源下包含一个集合“Collection”,该集合默认有两个属性“Property1”和“Property2”。在项目应用中,可以根据需要再添加新的属性。
![](https://i-blog.csdnimg.cn/blog_migrate/f833b81d10b99f6db399366c566ad0ac.jpeg)
由于我们添加的是例程数据源,Blend已经在该数据源中添加了例程数据,根据需求,我们可以对例程数据进行修改。首先选择Collection,然后点击
编辑例程数据,
![](https://i-blog.csdnimg.cn/blog_migrate/600ca417f23efde5c44844f674e267c0.jpeg)
![](https://i-blog.csdnimg.cn/blog_migrate/0763bee0b6a3540f262e256886da286d.jpeg)
![](https://i-blog.csdnimg.cn/blog_migrate/236d0420a16b0c94fd6e60341000c017.jpeg)
可以看到,Blend生成的默认例程数据,这里我们可以进行简单修改,Property1默认类型String,Property2默认类型为Boolean,这里我想修改Property2为String,
![](https://i-blog.csdnimg.cn/blog_migrate/4a3c532af43a235264a66e91782b358d.jpeg)
类型修改为String,还可以修改该数据列的具体的格式:
![](https://i-blog.csdnimg.cn/blog_migrate/175cb3f53f3d181b6a5590cb33e9fc45.jpeg)
为了方便演示我修改两个默认属性名,分别为,“网站”和“网址”
![](https://i-blog.csdnimg.cn/blog_migrate/634495d08e331a582a9ea059f0bfe543.jpeg)
点击OK,例程数据建立完成。
下面,看看在Blend中如何使用Item Controls装载数据源。首先我们测试ListBox:
在左边工具栏,选择ListBox控件,然后在ItemControlsDemo.Xaml设计页面,画一个ListBox。
![](https://i-blog.csdnimg.cn/blog_migrate/49f3b2d53c1fd1a055840b0adc037ee8.jpeg)
![](https://i-blog.csdnimg.cn/blog_migrate/0b8ac842d02e96f55859b6bea5394c05.jpeg)
然后从右边Data栏中,选中Collection,拖拽到ListBox空白处,ListBox即可自动绑定例程数据。
![](https://i-blog.csdnimg.cn/blog_migrate/029ae31c8c745b86393b4d4857b232e8.jpeg)
![](https://i-blog.csdnimg.cn/blog_migrate/b6b027a7f8f1bd9aab838ac974790901.jpeg)
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 >
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,
![](https://i-blog.csdnimg.cn/blog_migrate/ec423d928490555f4f5f900b6709625e.jpeg)
仍旧按照以上方法,拖拽Collection到ComboBox上,即可看到数据已经进行绑定。
![](https://i-blog.csdnimg.cn/blog_migrate/0e01f2fe06d90092df6af42287805448.jpeg)
![](https://i-blog.csdnimg.cn/blog_migrate/c858fd1dffa5d4dd71f388cfcff11402.jpeg)
同样,在Treeview中,也可以正常绑定。
![](https://i-blog.csdnimg.cn/blog_migrate/13b7703a2c7d33746e7c36925349d5c0.jpeg)
在数据绑定的时候,Data栏目,会有黄色的框,表示“Data Binding”。
![](https://i-blog.csdnimg.cn/blog_migrate/d1eadea5f1ca78fc73ead9ae833da61c.jpeg)
具体的定义,在Property属性栏中查看:
![](https://i-blog.csdnimg.cn/blog_migrate/4d1749ae98a5b03e0f31124d1414e0c1.jpeg)
以上则是使用Blend对Item Controls进行数据绑定的方法。由于文本主要讲述Blend应用,这里,就不再对Item Controls的属性进行赘述,如果您有问题可以留言给我。
User Interaction Controls(用户交互控件)
Silverlight控件中,User Interaction Controls是面向用户行为交互,该控件和ASP.NET和WPF中的大部分交互控件相同,用法也基本相似。其选取和设计,和前文Item Controls相同,这里就不再赘述。需要注意的是,不同的交互控件,具有不同的交互事件,从而达到不同的交互效果。在后文,如果有需要,我将详细解释说明。
![](https://i-blog.csdnimg.cn/blog_migrate/97083c23dbf88b502d3f33d8fe310b88.jpeg)
![](https://i-blog.csdnimg.cn/blog_migrate/4f5d6eb3aa94771ec795d9a5de04e694.jpeg)