Silverlight实用示例 - DataGrid行详细信息的绑定DataGrid.RowDetailsTemplate
2012-12-28 21:04
来源：博客园
作者：chengxingliang
字号：T|T
[摘要]本文介绍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。