因项目需要实现表现主从关系的datagrid,搜索了网上的文章,最后能用的只有http://www.silverlightchina.net/html/tips/2010/0102/538.html
但是如果你按照这个去做,肯定得不到正确的结果,不知道这哥们真的实验成功了么,数据结构还是仿照该文章中的数据结构
一个department类,和一个employees类
数据结构如下:
public class Department
{
public int DepartmentCode { get; set; }
public string DepartmentName { get; set; }
public List<Employee> Employees = new List<Employee>();
}
public class Employee
{
public int EmployeeID { get; set; }
public string EmployeeName { get; set; }
public int EmployeeAge { get; set; }
}
新建一个MasterDetailGrid的silverlight4工程
在工程中的MainPage.xaml界面代码中填写以下内容
<UserControl x:Class="MasterDetailGrid.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
xmlns:dataInput="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Data.Input"
xmlns:data="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Data"
d:DesignHeight="300" d:DesignWidth="400">
<Grid x:Name="LayoutRoot" Background="White">
<data:DataGrid x:Name="dgFilter" AutoGenerateColumns="False" HorizontalAlignment="Left" Margin="8,8,0,8" Width="380" FontSize="14" LoadingRowDetails="dgFilter_LoadingRowDetails">
<!--这里是实施主从的关键-->
<data:DataGrid.RowDetailsTemplate>
<DataTemplate>
<data:DataGrid x:Name="dgEmployee" Width="303" AutoGenerateColumns="False" HorizontalAlignment="Left" FontSize="14">
<data:DataGrid.Columns>
<data:DataGridTextColumn Header="工号" Binding="{Binding EmployeeID}"/>
<data:DataGridTextColumn Header="姓名" Binding="{Binding EmployeeName}"/>
<data:DataGridTextColumn Header="年龄" Binding="{Binding EmployeeAge}"/>
</data:DataGrid.Columns>
</data:DataGrid>
</DataTemplate>
</data:DataGrid.RowDetailsTemplate>
<data:DataGrid.Columns>
<data:DataGridTextColumn Header="部门编号" Binding="{Binding DepartmentCode}"/>
<data:DataGridTextColumn Header="部门名称" Binding="{Binding DepartmentName}"/>
</data:DataGrid.Columns>
</data:DataGrid>
</Grid>
</UserControl>
从以上结构我们可以看出,dgFilter为显示department数据内容,dgEmployee为显示对应department下的Employee数据内容,其中dgFilter增加了LoadingRowDetails="dgFilter_LoadingRowDetails"事件
在该事件下,我们实现在加载department内容的同时加载它的对应的Employee信息。
MainPage.xaml.cs文件内容如下:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
namespace MasterDetailGrid
{
public partial class MainPage : UserControl
{
public MainPage()
{
InitializeComponent();
dgFilter.ItemsSource = GetDepartments();
}
private void dgFilter_LoadingRowDetails(object sender, DataGridRowDetailsEventArgs e)
{
object dg= e.DetailsElement.FindName("dgEmployee");
if (dg != null)
{
(dg as DataGrid).ItemsSource = (e.Row.DataContext as Department).Employees;
}
}
public List<Department> GetDepartments()
{
List<Department> departments = new List<Department>();
Department dp1 = new Department();
dp1.DepartmentCode = 10001;
dp1.DepartmentName = "人力部";
Employee 小乔 = new Employee();
小乔.EmployeeID = 100001;
小乔.EmployeeName = "小乔";
小乔.EmployeeAge = 21;
dp1.Employees.Add(小乔);
departments.Add(dp1);
Department dp2 = new Department();
dp2.DepartmentCode = 10001;
dp2.DepartmentName = "行政部";
Employee 刘备 = new Employee();
刘备.EmployeeID = 100002;
刘备.EmployeeName = "刘备";
刘备.EmployeeAge = 41;
dp2.Employees.Add(刘备);
departments.Add(dp2);
Department dp3 = new Department();
dp3.DepartmentCode = 10001;
dp3.DepartmentName = "开发部";
Employee 张飞 = new Employee();
张飞.EmployeeID = 100003;
张飞.EmployeeName = "张飞";
张飞.EmployeeAge = 31;
dp3.Employees.Add(张飞);
Employee 关羽 = new Employee();
关羽.EmployeeID = 100004;
关羽.EmployeeName = "关羽";
关羽.EmployeeAge = 35;
dp3.Employees.Add(关羽);
departments.Add(dp3);
return departments;
}
}
public class Department
{
public int DepartmentCode { get; set; }
public string DepartmentName { get; set; }
public List<Employee> Employees = new List<Employee>();
}
public class Employee
{
public int EmployeeID { get; set; }
public string EmployeeName { get; set; }
public int EmployeeAge { get; set; }
}
}
在dgFilter_LoadingRowDetails事件中,通过e.DetailsElement.FindName("dgEmployee")发现当前行所包含的datagrid “dgEmployee”,发现后直接给这个datagrid赋予itemsource即可
尝试运行吧,你已经实现了一个主从表的datagrid了,再尝试一下添加dgFilter的RowDetailsVisibilityMode="Visible",
<data:DataGrid x:Name="dgFilter" AutoGenerateColumns="False" HorizontalAlignment="Left" Margin="8,8,0,8" Width="380" FontSize="14" LoadingRowDetails="dgFilter_LoadingRowDetails" RowDetailsVisibilityMode="Visible">,看看具体效果吧,我这里的运行效果如下: