如何:將資料列詳細資料加入至 DataGrid 控制項
使用 DataGrid 控制項時,您可以藉由新增資料列詳細資料區段來自訂資料簡報。 新增資料列詳細資料區段可讓您在選擇性可見或折迭的範本中,將某些資料分組。 例如,您可以將資料列詳細資料加入至 DataGrid 只顯示 中 DataGrid 每個資料列之資料的摘要,但在使用者選取資料列時,則會顯示更多資料欄位。 您可以在 屬性中定義資料列詳細資料區段的 RowDetailsTemplate 範本。 下圖顯示資料列詳細資料區段的範例。
您可以將資料列詳細資料範本定義為內嵌 XAML 或資源。 下列程式顯示這兩種方法。 新增為資源的資料範本可以在整個專案中使用,而不需重新建立範本。 新增為內嵌 XAML 的資料範本,只能從定義內嵌 XAML 的控制項存取。
使用內嵌 XAML 顯示資料列詳細資料
DataGrid建立 ,以顯示資料來源的資料。
在 DataGrid 項目中,加入 RowDetailsTemplate 項目。
DataTemplate建立 ,定義資料列詳細資料區段的外觀。
下列 XAML 顯示 DataGrid 和 如何定義 RowDetailsTemplate 內嵌。 在選取資料列時,會顯示 DataGrid 每個資料列中的三個值和另外三個值。
<Window x:Class="WpfApplication1.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="MainWindow" Height="350" Width="525" Loaded="Window_Loaded"> <Grid> <DataGrid Name="dataGrid1" IsReadOnly="True" AutoGenerateColumns="False" > <DataGrid.Columns> <DataGridTextColumn Header="Company Name" Binding="{Binding CompanyName}"></DataGridTextColumn> <DataGridTextColumn Header="Contact First Name" Binding="{Binding FirstName}"></DataGridTextColumn> <DataGridTextColumn Header="Contact Last Name" Binding="{Binding LastName}"></DataGridTextColumn> </DataGrid.Columns> <DataGrid.RowDetailsTemplate> <DataTemplate> <Border BorderThickness="0" Background="BlanchedAlmond" Padding="10"> <StackPanel Orientation="Vertical"> <StackPanel Orientation="Horizontal"> <TextBlock FontSize="12" Text="Email: " VerticalAlignment="Center" /> <TextBlock FontSize="16" Foreground="MidnightBlue" Text="{Binding EmailAddress}" VerticalAlignment="Center" /> </StackPanel> <StackPanel Orientation="Horizontal"> <TextBlock FontSize="12" Text="Phone: " VerticalAlignment="Center" /> <TextBlock FontSize="16" Foreground="MidnightBlue" Text="{Binding Phone}" VerticalAlignment="Center" /> </StackPanel> <StackPanel Orientation="Horizontal"> <TextBlock FontSize="12" Text="Sales Person: " VerticalAlignment="Center" /> <TextBlock FontSize="16" Foreground="MidnightBlue" Text="{Binding SalesPerson}" VerticalAlignment="Center" /> </StackPanel> </StackPanel> </Border> </DataTemplate> </DataGrid.RowDetailsTemplate> </DataGrid> </Grid> </Window>
下列程式碼顯示用來選取 中所 DataGrid 顯示資料的查詢。 在此範例中,查詢會從包含客戶資訊的實體中選取資料。
private void Window_Loaded(object sender, RoutedEventArgs e) { AdventureWorksLT2008Entities advenWorksEntities = new AdventureWorksLT2008Entities(); ObjectQuery<Customer> customers = advenWorksEntities.Customers; var query = from customer in customers orderby customer.CompanyName select new { customer.LastName, customer.FirstName, customer.CompanyName, customer.Title, customer.EmailAddress, customer.Phone, customer.SalesPerson }; dataGrid1.ItemsSource = query.ToList(); }
Dim advenWorksEntities As AdventureWorksLT2008Entities = New AdventureWorksLT2008Entities Private Sub Window_Loaded(ByVal sender As System.Object, ByVal e As System.Windows.RoutedEventArgs) Handles MyBase.Loaded Dim customers As ObjectQuery(Of Customer) = advenWorksEntities.Customers Dim query = _ From customer In customers _ Order By customer.CompanyName _ Select _ customer.LastName, _ customer.FirstName, _ customer.CompanyName, _ customer.Title, _ customer.EmailAddress, _ customer.Phone, _ customer.SalesPerson dataGrid1.ItemsSource = query.ToList() End Sub
使用資源顯示資料列詳細資料
DataGrid建立 ,以顯示資料來源的資料。
Resources將專案新增至根項目,例如 Window 控制項或 Page 控制項,或將專案新增 Resources 至 Application App.xaml 檔案中的 類別(或 Application.xaml) 檔案中。
在 resources 元素中,建立 DataTemplate 定義資料列詳細資料區段外觀的 。
下列 XAML 顯示 RowDetailsTemplate 類別中 Application 定義的 。
<Application.Resources> <DataTemplate x:Key="CustomerDetail"> <Border BorderThickness="0" Background="BlanchedAlmond" Padding="10"> <StackPanel Orientation="Vertical"> <StackPanel Orientation="Horizontal"> <TextBlock FontSize="12" Text="Email: " VerticalAlignment="Center" /> <TextBlock FontSize="16" Foreground="MidnightBlue" Text="{Binding EmailAddress}" VerticalAlignment="Center" /> </StackPanel> <StackPanel Orientation="Horizontal"> <TextBlock FontSize="12" Text="Phone: " VerticalAlignment="Center" /> <TextBlock FontSize="16" Foreground="MidnightBlue" Text="{Binding Phone}" VerticalAlignment="Center" /> </StackPanel> <StackPanel Orientation="Horizontal"> <TextBlock FontSize="12" Text="Sales Person: " VerticalAlignment="Center" /> <TextBlock FontSize="16" Foreground="MidnightBlue" Text="{Binding SalesPerson}" VerticalAlignment="Center" /> </StackPanel> </StackPanel> </Border> </DataTemplate> </Application.Resources>
DataTemplate在 上,將 x:Key 指示詞 設定為可唯一識別資料範本的值。
在 元素中 DataGrid ,將 RowDetailsTemplate 屬性設定為先前步驟中定義的資源。 將資源指派為靜態資源。
下列 XAML 顯示將 RowDetailsTemplate 屬性設定為上一個範例中的資源。
<DataGrid Name="dataGrid1" IsReadOnly="True" AutoGenerateColumns="False" RowDetailsTemplate="{StaticResource CustomerDetail}" > <DataGrid.Columns> <DataGridTextColumn Header="Company Name" Binding="{Binding CompanyName}"></DataGridTextColumn> <DataGridTextColumn Header="Contact First Name" Binding="{Binding FirstName}"></DataGridTextColumn> <DataGridTextColumn Header="Contact Last Name" Binding="{Binding LastName}"></DataGridTextColumn> </DataGrid.Columns> </DataGrid>
設定可見度並防止資料列詳細資料水準捲動
如有需要,請將 RowDetailsVisibilityMode 屬性設定為 DataGridRowDetailsVisibilityMode 值。
根據預設,值會設定為 VisibleWhenSelected 。 您可以將它設定為 Visible 以顯示所有資料列的詳細資料,或 Collapsed 隱藏所有資料列的詳細資料。
如有需要,請將 AreRowDetailsFrozen 屬性設定為
true
,以防止資料列詳細資料區段水準捲動。