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

發行項
10/14/2024

使用 DataGrid 控制項時，您可以藉由新增資料列詳細資料區段來自訂資料展示。新增資料列詳細資料區段可讓您在範本中建立可以選擇性顯示或摺疊的資料群組。例如，您可以在 DataGrid 中資料列詳細資料，只顯示 DataGrid 中每一列資料的摘要，但在使用者選取某資料列時，則會顯示更多資料欄位。您可以在 RowDetailsTemplate 屬性中定義資料列詳細資料區段的範本。下圖顯示資料列詳細資料區段的範例。

顯示含有資料列詳細資料的 DataGrid

您可以將資料列詳細資料範本定義為內嵌 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 元素新增至 App.xaml (或 Application.xaml) 檔案中的 Application 類別。

在資源元素中，建立 DataTemplate 以定義資料列詳細資料區段的外觀。

下列 XAML 顯示定義在 Application 類別中的 RowDetailsTemplate。

<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 顯示資料列詳細資料

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

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

其他資源