前一段时间一直在看silverlight和WCF方面的内容,然后利用一周左右的时间写了一个silverlight的应用程序,在这里记录下自 己在做的过程中遇到的问题,以及自己是怎么解决的。当然也希望这对学习silverlight的同志们有所帮助吧。silverlight小应用的页面如 下图所示。
这个silverlight应用涉及到的内容有:
1. 页面布局,一些常用控件,子窗口的使用;
2. Telerik控件的使用;
3. 动态生成树形菜单;
4. 为树形菜单添加右击菜单;
5. 动态生成GridView中的内容;
6.为GridView中的不同列绑定不同的右击菜单;
7. 使用WCF从数据库中获得数据,动态更新silverlight页面;
1. 页面布局,一些常用控件,子窗口的使用
这部分算是silverlight学习的基本内容了,在这个应用中使用的是silverlight中的Grid布局控件,页面划分为三行两列,控件四周的边框是用Border控件画出来的。然后再四个区域内,填充相应的控件。
页面头部填充的是Image控件(Grid.Row=0, Grid.ColumnSpan=2);
中间左边部分填充的是四个Image控件和一个RadTreeView控件,在这块区域内使用的StackPanel布局控件(Grid.Row=1, Grid.Column=0);
中间右边填充的是一个TextBlock控件和RadGridView控件,这块区域内使用的也是StackPanel布局控件(Grid.Row=1, Grid.Column=1);
页脚部分填充的只有一个TextBlock控件,编程的时候是用来显示相关信息的(Grid.Row=2, Grid.ColumnSpan=2);
1 < Grid x:Name ="LayoutRoot" Background ="White" Width ="960" Height ="800" >
2 < Grid.ColumnDefinitions >
3 < ColumnDefinition Width ="200" />
4 < ColumnDefinition Width ="760" />
5 </ Grid.ColumnDefinitions >
6 < Grid.RowDefinitions >
7 < RowDefinition Height ="120" />
8 < RowDefinition Height ="420" />
9 < RowDefinition Height ="60" />
10 </ Grid.RowDefinitions >
11 < Border BorderBrush ="LightBlue" Grid.ColumnSpan ="2" Width ="960" Grid.Row ="0" >
12 < Image />
13 </ Border >
14 < Border BorderBrush ="LightBlue" Height ="420" Grid.Row ="1" Width ="200" >
15 < StackPanel >
16 < StackPanel Orientation ="Horizontal" Height ="32" >
17 < Image />
18 < Image />
19 < Image />
20 < Image />
21 </ StackPanel >
22 < StackPanel Height ="580" >
23 < telerik:RadTreeView x:Name ="rtv" />
25 </ StackPanel >
26 </ StackPanel >
27 </ Border >
28 < Border BorderBrush ="LightBlue" Grid.Column ="1" Grid.Row ="1" >
29 < StackPanel >
30 < StackPanel Height ="25" >
31 < TextBlock />
32 </ StackPanel >
33 < StackPanel Height ="394" >
34 < telerik:RadGridView x:Name ="rgv" AutoGenerateColumns ="False" />
35 </ StackPanel >
36 </ StackPanel >
37 </ Border >
38 < Border BorderBrush ="LightBlue" Grid.Row ="2" Grid.ColumnSpan ="2" >
39 < TextBlock />
40 </ Border >
41 </ Grid >
2.Telerik控件的使用
在这个silverlight中使用的就是Telerik控件,Telerik控件提供的功能会比较丰富一些,而且使用也比较方便。有兴趣的同志们 可以用用。在自己的silverlight中使用Telerik控件,第一步是要要去它的官网下载RadControl控件包,然后添加相应的命名空间即 可(xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"); 这个应用中主要的使用的是RadTreeView(树形菜单),RadGridView(表格),RadContextMenu(上下文菜单)和 RadUpload(文件上传控件)这四个Telerik控件。
3. 动态生成树形菜单
树形节点的数据库设计如下图所示:
动态生成树形菜单的方法:
首先在页面加载的时候:读取dependedId=0的记录(id是自增的,从1开始),然后通过依次创建RadTreeItem来生成树形结构, 将RadTreeItem的DataContext设置为相应的树形节点实体类,以便,之后调用实体类中存储的数据。部门代码如下所示:
1 RadTreeViewItem r = (RadTreeViewItem)rtv;//rtv为下面这些节点的跟节点
2 r.Items.Clear();
3 foreach (TreeItem ti in ocl) //ocl为存放数据实体类的List
4 {
5 RadTreeViewItem rtvi = new RadTreeViewItem();
6 rtvi.Header = ti.Name;
7 rtvi.DataContext = ti;
8 r.Items.Add(rtvi);
9 }
接着为RadTreeView控件添加鼠标左键事件(MouseLeftButtonUp),每点击一次节点,就读取相应节点下的子节点。
这就是这个应用中生成多级树形菜单的方法了。
4. 为树形菜单添加右击菜单
由于每个节点右击菜单的功能都一样,所以我就将上下文菜单直接写在了页面上,代码如下:
1 < telerik:RadTreeView HorizontalAlignment ="Left" SelectionMode ="Single" >
2 < telerik:RadContextMenu.ContextMenu >
3 < telerik:RadContextMenu Opened ="ecm_Opened" >
4 < telerik:RadMenuItem Header ="Update Text" />
5 < telerik:RadMenuItem Header ="Copy" />
6 </ telerik:RadContextMenu >
7 </ telerik:RadContextMenu.ContextMenu >
8 </ telerik:RadTreeView >
右击树形菜单节点就即可看到下拉菜单;
接着为RadTreeView控件绑定单击事件,处理菜单中每个选项要实现的功能:
this .radtreeview.AddHandler(RadMenuItem.ClickEvent, new RoutedEventHandler(OnMenuItemClicked));
5. 动态生成GridView中的内容:
在这个应用中,我只是将通过WCF从数据库中读取的实体类列表(List<object>)绑定到了GridView中,这一个步骤来实现动态绑定的
this .rgv.ItemsSource =list ;
6.为GridView中的不同列绑定不同的右击菜单
这个功能搞了我好久,嘿嘿,但是还是被我解决了。
方法如下:
第一步:先是在页面代码中,为表格控件(RadGridView)添加上下文菜单(RadContextMenu):
< telerik:RadContextMenu.ContextMenu >
< telerik:RadContextMenu x:Name ="rgvmenu" Opened ="rgvmenu_Opened" >
< telerik:RadContextMenu.ItemTemplate >
< DataTemplate >
< TextBlock Text =" {Binding Text} " />
</ DataTemplate >
</ telerik:RadContextMenu.ItemTemplate >
</ telerik:RadContextMenu >
</ telerik:RadContextMenu.ContextMenu >
第二步:接着就是根据表格中每列绑定的值来确定显示哪些菜单选项:
页面代码:
< telerik:GridViewDataColumn x:Name ="gvid" Header ="ID" IsReadOnly ="True" Width ="80" >
< telerik:GridViewColumn.CellTemplate >
< DataTemplate >
< TextBlock x:Name ="id" Text =" {Binding Id} " />
</ DataTemplate >
</ telerik:GridViewColumn.CellTemplate >
</ telerik:GridViewDataColumn >
后台代码:
TextBlock txtBlock = e.OriginalSource as TextBlock;//<DataTemplate>中的<TextBlock>
String option = txtBlock.Name.ToString().Trim();//获取绑定列的名称<TextBlock>的Name属性
ii = txtBlock.DataContext as InfoItem;
copyIdForgv = int .Parse(ii.Id);
switch (option)//根据名称来显示不同的菜单项
{
case " id " :
this .rgvmenu.ItemsSource = cForId;
break ;
case " instr " :
this .rgvmenu.ItemsSource = cForInstr;
break ;
default :
this .rgvmenu.ItemsSource = null ;
break ;
}
第三步就是:为GridView控件添加点击右击菜单的处理事件:
this .radGridView.AddHandler(RadMenuItem.ClickEvent, new RoutedEventHandler(RadMenuItem_Click));
7. 使用WCF从数据库中获得数据,动态更新silverlight页面:
如何使用WCF见,WCF分类下的第一篇文件。
这个silverlight中的知识点,基本上就是上面这些,希望对大家有所帮助!