盡管當(dāng)前的DevExpress AgDataGrid 不具有內(nèi)置的主從數(shù)據(jù)支持，但是你可以通過grid 控件的PreviewTemplate來顯示數(shù)據(jù)的詳細(xì)信息。將AgDataGrid控件添加到master grid的PreviewTemplate，然后將其綁定到detail collection。

接下來我們一起來看一個(gè)簡單的例子：

[C#]

public class Product {

public int ProductID { get; set; }

public string ProductName { get; set; }

public int CategoryID { get; set; }

public decimal UnitPrice { get; set; }

}

public class Category {

public int CategoryID { get; set; }

public string CategoryName { get; set; }

public string Description { get; set; }

public List<Products> Products { get; set; }

以分層方式來顯示數(shù)據(jù)，需根據(jù)以下步驟：

1）在頁面中添加AgDataGrid 控件

[XAML]

<Grid x:Name="LayoutRoot">

<grid:AgDataGrid x:Name="masterGrid" ColumnsAutoWidth="True">

<grid:AgDataGrid.Columns>

<grid:AgDataGridColumn FieldName="CategoryID"/>

<grid:AgDataGridColumn FieldName="CategoryName"/>

<grid:AgDataGridColumn FieldName="Description"/>

</grid:AgDataGrid.Columns>

</grid:AgDataGrid>

</Grid>

接下來將AgDataGrid控件綁定到分類中：

[C#]

public MainPage() {

InitializeComponent();

masterGrid.DataSource = CategoriesData.DataSource;

}

這就是master grid。

2）定義master grid的PreviewTemplate，并新增AgDataGrid控件：

[XAML]

<grid:AgDataGrid.PreviewTemplate>

<DataTemplate>

<Grid Height="180" Margin="20, 10, 20, 10">

<controls:TabControl>

<controls:TabItem Header="Products">

<grid:AgDataGrid x:Name="detailGrid">

</grid:AgDataGrid>

</controls:TabItem>

</controls:TabControl>

</Grid>

</DataTemplate>

</grid:AgDataGrid.PreviewTemplate>

3）將AgDataGrid綁定到產(chǎn)品屬性：

[XAML]

<grid:AgDataGrid.PreviewTemplate>

<DataTemplate>

<Grid Height="180" Margin="20, 10, 20, 10">

<controls:TabControl>

<controls:TabItem Header="Products">

<grid:AgDataGrid x:Name="detailGrid" DataSource="{Binding Products}" ColumnsAutoWidth="True">

<grid:AgDataGrid.Columns>

<grid:AgDataGridColumn FieldName="ProductID" />

<grid:AgDataGridColumn FieldName="ProductName" />

<grid:AgDataGridColumn FieldName="CategoryID" />

<grid:AgDataGridColumn FieldName="UnitPrice" />

</grid:AgDataGrid.Columns>

</grid:AgDataGrid>

</controls:TabItem>

</controls:TabControl>

</Grid>

</DataTemplate>

</grid:AgDataGrid.PreviewTemplate>

4）設(shè)置master grid的PreviewVisibility屬性值為ExpandedForFocusedRow，

[XAML]

<grid:AgDataGrid x:Name="masterGrid" ColumnsAutoWidth="True" PreviewVisibility="ExpandedForFocusedRow">

運(yùn)行代碼后的結(jié)果如下：