首页 | 新闻 | 交流 | 问吧 | 文档 | 手册 | 下载 | 博客

第一个silverlight应用(By myself)

作者:  时间: 2011-06-11

前一段时间一直在看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中的知识点,基本上就是上面这些,希望对大家有所帮助!