Silverlight实用示例 - DataGrid行详细信息的绑定DataGrid.RowDetailsTemplate
Silverlight实用示例 - DataGrid行详细信息的绑定DataGrid.RowDetailsTemplate
[摘要]本文介绍Silverlight实用示例之DataGrid行详细信息的绑定DataGrid.RowDetailsTemplate,并提供详细的示例代码供参考。
在Silverlight中的DataGrid控件使用中我们想点击其中一行并且看这一行的详细信息应该如何做呢?而且这个详细信息是多行的数据,而非简单的几个属性。
在这里我们使用DataGrid.RowDetailsTemplate来设置或者获取行详细信息。首先我们准备一个DataGrid命名为A,设置其RowDetailsVisibilityMode="VisibleWhenSelected" (行详细信息模板的显示模式是当这行被选中的时候展开这行的详细信息。)然后再为A设置DataGrid.RowDetailsTemplate模板,并且在这个模板中添加一个DataGrid命名为B,这就是前台的XAML代码,在后台中我们设置一个实体集AList绑定到A的DataGrid,然后在AList实体集中有一个属性是BList,这个就是多行的详细信息。将BList详细信息字段绑定到B的DataGrid控件的ItemsSource即可。
下面我们来看看这个简单的应用技巧的Xaml代码如下:
1 | <Grid x:Name="LayoutRoot" Background="White"> |
2 | <!--这里是第一个DataGrid,其DataGrid.RowDetailsTemplate模板会绑定另外一个DataGrid以显示其详细信息--> |
3 | <sdk:DataGrid x:Name="gridEmployee" CanUserReorderColumns="False" CanUserSortColumns="False" |
4 | RowDetailsVisibilityMode="VisibleWhenSelected" |
5 | HorizontalAlignment="Center" ScrollViewer.VerticalScrollBarVisibility="Auto" |
6 | Height="200" AutoGenerateColumns="False" Width="422" VerticalAlignment="Center"> |
7 | <sdk:DataGrid.Columns> |
8 | <sdk:DataGridTextColumn Width="150" |
9 | Header="用户名" |
10 | Binding="{Binding UserName}"/> |
11 | <sdk:DataGridTextColumn Width="150" |
12 | Header="用户密码" |
13 | Binding="{Binding UserPwd}"/> |
14 | </sdk:DataGrid.Columns> |
15 | <sdk:DataGrid.RowDetailsTemplate> |
16 | <DataTemplate> |
17 | <!--这里是第二个DataGrid显示详细信息--> |
18 | <sdk:DataGrid AutoGenerateColumns="False" ItemsSource="{Binding UserDetailInfomation}" |
19 | HeadersVisibility="None"> |
20 | <sdk:DataGrid.Columns> |
21 | <sdk:DataGridTextColumn Width="100" |
22 | Header="地址" |
23 | Binding="{Binding UserAddress}"/> |
24 | <sdk:DataGridTextColumn Width="100" |
25 | Header="城市" |
26 | Binding="{Binding UserCity}"/> |
27 | <sdk:DataGridTextColumn Width="100" |
28 | Header="国籍" |
29 | Binding="{Binding UserCountry}"/> |
30 | <sdk:DataGridTextColumn Width="100" |
31 | Header="类型" |
32 | Binding="{Binding UserState}"/> |
33 | </sdk:DataGrid.Columns> |
34 | </sdk:DataGrid> |
35 | </DataTemplate> |
36 | </sdk:DataGrid.RowDetailsTemplate> |
37 | </sdk:DataGrid> |
38 | </Grid> |
然后我们来看看他的数据源的Xaml.cs代码如下:
1 | public partial class MainPage : UserControl |
2 | { |
3 | public MainPage() |
4 | { |
5 | InitializeComponent(); |
6 | this.gridEmployee.ItemsSource = new UserInfo().GetEmployeeData(); |
7 | } |
8 | } |
9 | /// <summary> |
10 | /// 用户信息 |
11 | /// </summary> |
12 | public class UserInfo |
13 | { |
14 | public string UserName { get; set; } |
15 | public string UserPwd { get; set; } |
16 | /// <summary> |
17 | /// 用户详细信息 |
18 | /// </summary> |
19 | public List<UserDetailInfo> UserDetailInfomation{get;set;} |
20 | public UserInfo() |
21 | { } |
22 | /// <summary> |
23 | /// 获取用户信息的实例 |
24 | /// </summary> |
25 | /// <returns></returns> |
26 | public List<UserInfo> GetEmployeeData() |
27 | { |
28 | List<UserInfo> employees = new List<UserInfo>(); |
29 | employees.Add |
30 | ( |
31 | new UserInfo |
32 | { |
33 | UserName = "李伟", |
34 | UserPwd = "1333821", |
35 | UserDetailInfomation = new List<UserDetailInfo>() |
36 | { |
37 | new UserDetailInfo() |
38 | { |
39 | UserAddress="四川省成都市", |
40 | UserCity="成都", |
41 | UserCountry="中国", |
42 | UserState="当前所在地" |
43 | }, |
44 | new UserDetailInfo() |
45 | { |
46 | UserAddress="四川省内江市", |
47 | UserCity="内江", |
48 | UserCountry="中国", |
49 | UserState="出生地" |
50 | } |
51 | } |
52 | }); |
53 | employees.Add |
54 | ( |
55 | new UserInfo |
56 | { |
57 | UserName = "Json", |
58 | UserPwd = "json282", |
59 | UserDetailInfomation = new List<UserDetailInfo>() |
60 | { |
61 | new UserDetailInfo() |
62 | { |
63 | UserAddress="广东省广州市", |
64 | UserCity="广州", |
65 | UserCountry="中国", |
66 | UserState="当前所在地" |
67 | }, |
68 | new UserDetailInfo() |
69 | { |
70 | UserAddress="广东省茂名市", |
71 | UserCity="茂名", |
72 | UserCountry="中国", |
73 | UserState="出生地" |
74 | } |
75 | } |
76 | }); |
77 | employees.Add |
78 | ( |
79 | new UserInfo |
80 | { |
81 | UserName = "刘敏", |
82 | UserPwd = "motorola", |
83 | UserDetailInfomation = new List<UserDetailInfo>() |
84 | { |
85 | new UserDetailInfo() |
86 | { |
87 | UserAddress="湖南省长沙市", |
88 | UserCity="长沙", |
89 | UserCountry="中国", |
90 | UserState="当前所在地" |
91 | }, |
92 | new UserDetailInfo() |
93 | { |
94 | UserAddress="湖南省长沙市", |
95 | UserCity="长沙", |
96 | UserCountry="中国", |
97 | UserState="出生地" |
98 | } |
99 | } |
100 | }); |
101 | return employees; |
102 | } |
103 | } |
104 | /// <summary> |
105 | /// 用户详细信息的实体 |
106 | /// </summary> |
107 | public class UserDetailInfo |
108 | { |
109 | public string UserAddress { get; set; } |
110 | public string UserCity { get; set; } |
111 | public string UserState { get; set; } |
112 | public string UserCountry { get; set; } |
113 | } |
最后我们来看看它的运行效果:
源码下载:http://files.cnblogs.com/chengxingliang/SLDataGridRowDetail.zip。
Silverlight实用示例 - DataGrid行详细信息的绑定DataGrid.RowDetailsTemplate的更多相关文章
- DataGrid行详细信息的绑定--DataGrid.RowDetailsTe(转载)
在Silverlight中的DataGrid控件使用中我们想点击其中一行并且看这一行的详细信息应该如何做呢?而且这个详细信息是多行的数据,而非简单的几个属性. 在这里我们使用DataGrid.RowD ...
- easyui datagrid行合并
easyui datagrid行合并 合并方法 /** * EasyUI DataGrid根据字段动态合并单元格 * 参数 tableID 要合并table的id * 参数 colList 要合并的列 ...
- easyUI 展开DataGrid里面的行显示详细信息
http://blog.csdn.net/yanghongchang_/article/details/7854156原著 datagrid 可以改变它的view(视图)去显示不同的效果.使用详细视图 ...
- 在命令行cmd 下,输入dxdiag 查看关于电脑许多硬件的详细信息
输入命令就可以查看本机的很多硬件的详细信息: 在命令行cmd 下,输入dxdiag 查看关于电脑许多硬件的详细信息
- SQL SERVER统计服务器所有的数据库(数据库文件)、表(表行数)、字段(各字段)等详细信息
原文:SQL SERVER统计服务器所有的数据库(数据库文件).表(表行数).字段(各字段)等详细信息 USE STAT GO SET NOCOUNT ON IF EXISTS(SELECT 1 FR ...
- windows系统通过命令行查看配件的详细信息
今天我在工作中遇到这样一个问题:客户服务器用的是win 2012系统,不打开机箱,不借助其他类似于鲁大师软件的情况下查看内存条的详细信息 刚开始的时候我通过systeminfo命令,只能查出来总的内存 ...
- 利用Scrapy爬取所有知乎用户详细信息并存至MongoDB
欢迎大家关注腾讯云技术社区-博客园官方主页,我们将持续在博客园为大家推荐技术精品文章哦~ 作者 :崔庆才 本节分享一下爬取知乎用户所有用户信息的 Scrapy 爬虫实战. 本节目标 本节要实现的内容有 ...
- 外键,check,索引等,根据ID来检索详细信息
sql server OBJECTPROPERTY 函数 分类: Sql server2008-11-26 11:11 1562人阅读 评论(0) 收藏 举报 sql serverinsertdele ...
- 【全面解禁!真正的Expression Blend实战开发技巧】第七章 MVVM初体验-在DataGrid行末添加按钮
原文:[全面解禁!真正的Expression Blend实战开发技巧]第七章 MVVM初体验-在DataGrid行末添加按钮 博客更新较慢,先向各位读者说声抱歉.这一节讲解的依然是开发中经常遇到的一种 ...
随机推荐
- fiddler终极教程
http://www.cnblogs.com/yoyoketang/tag/fiddler/
- JavaScript变量声明提升
JavaScript代码在被解析引擎执行前,会被“编译”把变量声明等放在合适的作用域中,如果不了解这一点,会让人产生很多疑惑. 文章:详解js变量声明提升
- python学习之-- shelve模块
shelve模块定义:是一个简单的k,v将内存数据通过文件持久化的模块,可以持久化任何pickle(因为封装了pickle)可支持的python数据格式.功能:可以实现pickle的多次dump和多次 ...
- Codechef-ANCESTOR(树套树/CDQ分治)
题意: 给定两棵有根树,各有 N 个点.两棵树上的点分别被从 1 到 N 标号.两棵树的根均为标号为 1 的节点. 你的任务非常简单:对于每个 i,找到一个 j(j != i),使得在两棵树中 j 都 ...
- 《springMVC》学习笔记
1.SpringMVC框架 1.1 MVC在b/s系统下的应用 用户发送request请求到Controller Controller请求模型(Model)进行处理 Model将处理结果返回到Cont ...
- try catch finally执行顺序 (return / 变量覆盖)
finally有return 始终返回finally中的return 抛弃 try 与catch中的return 情况1:try{} catch(){}finally{} return x; try{ ...
- Java课堂测试--实现ATM的基本操作体会
9月20的周四的Java课堂第一节课上就是有关于实现ATM的考试内容,在实现的过程中我了解到自己本身还是有很多的不足之处,例如在实现工程方面的相似性上面还有些许就的欠缺,再者就是回宿舍拿电源的原因导致 ...
- dhcp 过程
The Question SuperUser reader Sagnik Sarkar wants to know what the difference between 127.0.0.1 and ...
- pagePiling.js - 创建美丽的全屏滚动效果
在线演示 在线演示 本地下载 全屏滚动效果是近期很流行的网页设计形式,带给用户良好的视觉和交互体验. pagePiling.js 这款jQuery插件能够帮助前端开发者轻松实现这样的效果.支持全部的主 ...
- 【转】Selenium2学习路线
课程大纲:第一部分:基础入门 第一课: SELENIUM2的原理介绍及环境搭建本节课主要讲解SELENIUM2的原理,让大家了解SELENIUM2的发展历程,同时解惑大家对自动化测试中产生的一些误区. ...