第一个silverlight应用(By myself)

前一段时间一直在看silverlight和WCF方面的内容,然后利用一周左右的时间写了一个silverlight的应用程序,在这里记录下自 己在做的过程中遇到的问题,以及自己是怎么解决的。当然也希望这对学习silverlight的同志们有所帮助吧。silverlight小应用的页面如 下图所示。

第一个silverlight应用(By myself)_第1张图片

这个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中的知识点,基本上就是上面这些,希望对大家有所帮助!

你可能感兴趣的:(silverlight)