如何：將資料列詳細資料加入至 DataGrid 控制項

發行項
10/18/2023

使用 DataGrid 控制項時，您可以藉由新增資料列詳細資料區段來自訂資料簡報。新增資料列詳細資料區段可讓您在選擇性可見或折迭的範本中，將某些資料分組。例如，您可以將資料列詳細資料加入至 DataGrid 只顯示中 DataGrid 每個資料列之資料的摘要，但在使用者選取資料列時，則會顯示更多資料欄位。您可以在屬性中定義資料列詳細資料區段的 RowDetailsTemplate 範本。下圖顯示資料列詳細資料區段的範例。

DataGrid shown with row details

您可以將資料列詳細資料範本定義為內嵌 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 ，以防止資料列詳細資料區段水準捲動。

如何：將資料列詳細資料加入至 DataGrid 控制項

使用內嵌 XAML 顯示資料列詳細資料

使用資源顯示資料列詳細資料

設定可見度並防止資料列詳細資料水準捲動

意見反應

其他資源