第一个silverlight应用（By myself）
时间：2011-06-11 来源：D.ove
前一段时间一直在看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中的知识点，基本上就是上面这些，希望对大家有所帮助！
相关阅读 更多 +
