DataGrid行详细信息的绑定--DataGrid.RowDetailsTe(转载)
在Silverlight中的DataGrid控件使用中我们想点击其中一行并且看这一行的详细信息应该如何做呢?而且这个详细信息是多行的数据,而非简单的几个属性。 在这里我们使用DataGrid.RowDetailsTemplate来设置或者获取行详细信息。首先我们准备一个DataGrid命名为A,设置其RowDetailsVisibilityMode=VisibleWhenSelected (行详细信
在Silverlight中的DataGrid控件使用中我们想点击其中一行并且看这一行的详细信息应该如何做呢?而且这个详细信息是多行的数据,而非简单的几个属性。
在这里我们使用DataGrid.RowDetailsTemplate来设置或者获取行详细信息。首先我们准备一个DataGrid命名为A,设置其RowDetailsVisibilityMode="VisibleWhenSelected" (行详细信息模板的显示模式是当这行被选中的时候展开这行的详细信息。)然后再为A设置DataGrid.RowDetailsTemplate模板,并且在这个模板中添加一个DataGrid命名为B,这就是前台的XAML代码,在后台中我们设置一个实体集AList绑定到A的DataGrid,然后在AList实体集中有一个属性是BList,这个就是多行的详细信息。将BList详细信息字段绑定到B的DataGrid控件的ItemsSource即可。
下面我们来看看这个简单的应用技巧的Xaml代码如下:
<!--这里是第一个DataGrid,其DataGrid.RowDetailsTemplate模板会绑定另外一个DataGrid以显示其详细信息-->
<sdk:DataGrid x:Name="gridEmployee" CanUserReorderColumns="False" CanUserSortColumns="False"
RowDetailsVisibilityMode="VisibleWhenSelected"
HorizontalAlignment="Center" ScrollViewer.VerticalScrollBarVisibility="Auto"
Height="200" AutoGenerateColumns="False" Width="422" VerticalAlignment="Center">
<sdk:DataGrid.Columns>
<sdk:DataGridTextColumn Width="150"
Header="用户名"
Binding="{Binding UserName}"/>
<sdk:DataGridTextColumn Width="150"
Header="用户密码"
Binding="{Binding UserPwd}"/>
</sdk:DataGrid.Columns>
<sdk:DataGrid.RowDetailsTemplate>
<DataTemplate>
<!--这里是第二个DataGrid显示详细信息-->
<sdk:DataGrid AutoGenerateColumns="False" ItemsSource="{Binding UserDetailInfomation}"
HeadersVisibility="None">
<sdk:DataGrid.Columns>
<sdk:DataGridTextColumn Width="100"
Header="地址"
Binding="{Binding UserAddress}"/>
<sdk:DataGridTextColumn Width="100"
Header="城市"
Binding="{Binding UserCity}"/>
<sdk:DataGridTextColumn Width="100"
Header="国籍"
Binding="{Binding UserCountry}"/>
<sdk:DataGridTextColumn Width="100"
Header="类型"
Binding="{Binding UserState}"/>
</sdk:DataGrid.Columns>
</sdk:DataGrid>
</DataTemplate>
</sdk:DataGrid.RowDetailsTemplate>
</sdk:DataGrid>
</Grid>
然后我们来看看他的数据源的Xaml.cs代码如下:
{
public MainPage()
{
InitializeComponent();
this.gridEmployee.ItemsSource = new UserInfo().GetEmployeeData();
}
}
/// <summary>
/// 用户信息
/// </summary>
public class UserInfo
{
public string UserName { get; set; }
public string UserPwd { get; set; }
/// <summary>
/// 用户详细信息
/// </summary>
public List<UserDetailInfo> UserDetailInfomation{get;set;}
public UserInfo()
{ }
/// <summary>
/// 获取用户信息的实例
/// </summary>
/// <returns></returns>
public List<UserInfo> GetEmployeeData()
{
List<UserInfo> employees = new List<UserInfo>();
employees.Add
(
new UserInfo
{
UserName = "李伟",
UserPwd = "1333821",
UserDetailInfomation = new List<UserDetailInfo>()
{
new UserDetailInfo()
{
UserAddress="四川省成都市",
UserCity="成都",
UserCountry="中国",
UserState="当前所在地"
},
new UserDetailInfo()
{
UserAddress="四川省内江市",
UserCity="内江",
UserCountry="中国",
UserState="出生地"
}
}
});
employees.Add
(
new UserInfo
{
UserName = "Json",
UserPwd = "json282",
UserDetailInfomation = new List<UserDetailInfo>()
{
new UserDetailInfo()
{
UserAddress="广东省广州市",
UserCity="广州",
UserCountry="中国",
UserState="当前所在地"
},
new UserDetailInfo()
{
UserAddress="广东省茂名市",
UserCity="茂名",
UserCountry="中国",
UserState="出生地"
}
}
});
employees.Add
(
new UserInfo
{
UserName = "刘敏",
UserPwd = "motorola",
UserDetailInfomation = new List<UserDetailInfo>()
{
new UserDetailInfo()
{
UserAddress="湖南省长沙市",
UserCity="长沙",
UserCountry="中国",
UserState="当前所在地"
},
new UserDetailInfo()
{
UserAddress="湖南省长沙市",
UserCity="长沙",
UserCountry="中国",
UserState="出生地"
}
}
});
return employees;
}
}
/// <summary>
/// 用户详细信息的实体
/// </summary>
public class UserDetailInfo
{
public string UserAddress { get; set; }
public string UserCity { get; set; }
public string UserState { get; set; }
public string UserCountry { get; set; }
}
最后我们来看看它的运行效果,如果需要源码请点击SLDataGridRowDetail.zip下载。
本文来自程兴亮的博客,原文地址:http://www.cnblogs.com/chengxingliang/archive/2011/07/22/2112895.html
DataGrid行详细信息的绑定--DataGrid.RowDetailsTe(转载)的更多相关文章
- Silverlight实用示例 - DataGrid行详细信息的绑定DataGrid.RowDetailsTemplate
Silverlight实用示例 - DataGrid行详细信息的绑定DataGrid.RowDetailsTemplate 2012-12-28 21:04 来源:博客园 作者:chengxingli ...
- easyui datagrid行合并
easyui datagrid行合并 合并方法 /** * EasyUI DataGrid根据字段动态合并单元格 * 参数 tableID 要合并table的id * 参数 colList 要合并的列 ...
- easyUI 展开DataGrid里面的行显示详细信息
http://blog.csdn.net/yanghongchang_/article/details/7854156原著 datagrid 可以改变它的view(视图)去显示不同的效果.使用详细视图 ...
- 【全面解禁!真正的Expression Blend实战开发技巧】第七章 MVVM初体验-在DataGrid行末添加按钮
原文:[全面解禁!真正的Expression Blend实战开发技巧]第七章 MVVM初体验-在DataGrid行末添加按钮 博客更新较慢,先向各位读者说声抱歉.这一节讲解的依然是开发中经常遇到的一种 ...
- WPF设置DataGrid行内容高度自适应 与 TextBox/TextBlock内容高度自适应
WPF设置DataGrid行内容高度自适应 TextBox/TextBlock内容高度自适应 参考: DataGrid 控件中的调整大小选项: http://msdn.microsoft.com/ ...
- WPF Datagrid 动态生成列 并绑定数据
原文:WPF Datagrid 动态生成列 并绑定数据 说的是这里 因为列头是动态加载的 (后台for循环 一会能看到代码) 数据来源于左侧列 左侧列数据源 当然num1 属于临时的dome使用 可 ...
- Easyui datagrid行内【添加】、【编辑】、【上移】、【下移】
前几天项目中遇到一个需求用到了Easyui datagrd行内添加和编辑数据,同时对行内数据上移下移,所以对这几个功能做个总结. 1.首先大概说下这几个功能里用到的主要方法,行内添加数据主要是添加列的 ...
- 在命令行cmd 下,输入dxdiag 查看关于电脑许多硬件的详细信息
输入命令就可以查看本机的很多硬件的详细信息: 在命令行cmd 下,输入dxdiag 查看关于电脑许多硬件的详细信息
- WPF DataGrid某列使用多绑定后该列排序失效,列上加入 SortMemberPath 设置即可.
WPF DataGrid某列使用多绑定后该列排序失效 2011-07-14 10:59hdongq | 浏览 1031 次 悬赏:20 在wpf的datagrid中某一列使用了多绑定,但是该列排序失 ...
随机推荐
- AR模式
AR模式 在ThinkPHP框架中,一共存在两种操作模式:ORM模式与AR模式 ORM模式:① 实例化模型 ② 创建数据对象组装数组 ③ 调用相关方法执行相关操作 AR模式:① 实例化模型 ② 把数据 ...
- Spring IOC整理
示例展示 Spring的一大特点是利用配置的xml文件实现依赖注入. 所谓依赖注入是指把一个业务对象注入另一个业务对象,从而达到对象间的松耦合.(注意是业务对象哦!)依赖注入讲的通俗一点,就是让一个对 ...
- 济南学习 Day 3 T2 pm
LYK 快跑!(run)Time Limit:5000ms Memory Limit:64MB题目描述LYK 陷进了一个迷宫! 这个迷宫是网格图形状的. LYK 一开始在(1,1)位置, 出口在(n, ...
- CPU卡及NFC供应商
1.苏州市民卡供应商 北京握奇数据/watchdata 2.苏州市民卡手表 苏州连爱/linklove公司 3.NFC供应商 英飞凌/Infelion, NXP,复旦微电子, 4.什么是CPU卡? C ...
- 水仙花数 java 实现
题目描述: 春天是鲜花的季节,水仙花就是其中最迷人的代表,数学上有个水仙花数,他是这样定义的:“水仙花数”是指一个三位数,它的各位数字的立方和等于其本身,比如:153=1^3+5^3+3^3.现在要求 ...
- asp.net mvc常用的数据注解和验证以及entity framework数据映射
终于有时间整理一下asp.net mvc 和 entity framework 方面的素材了. 闲话少说,步入正题: 下面是model层的管理员信息表,也是大伙比较常用到的,看看下面的代码大伙应该不会 ...
- 值类型的Constructor
使用C#的时候我们最熟悉的是类,也就是Reference Type,翻译成中文是引用类型.但是C#还有另外的一种类型往往被我们用的最多缺经常被忽视,这种类型就是值类型(Value Type). 值类型 ...
- webview的弹性布局之rem,em
webview页面的自适应一般有两种方法,即一是JS的计算方法,二是通过css的media设置分档方式.在此主要介绍css的方式. html { font-size: 16px; } @media o ...
- CentOS 6.4 下搭建 MongoDB 2.4.9 环境
一.下载MongoDB2.4.9版 下载MongoDB wget http://fastdl.mongodb.org/linux/mongodb-linux-x86_64-2.4.9.tgz 解压Mo ...
- PHP流程控制语句下
ok,继续搞. while循环: while(expr){ 程序块: } 条件expr成立执行程序块,否则结束. do while循环:do while循环比while循环要多循环一次,它要先执行程序 ...