Instrukcje: dodawanie szczegółów wiersza do kontrolki DataGrid

W przypadku korzystania z kontrolki DataGrid możesz dostosować prezentację danych, dodając sekcję szczegółów wiersza. Dodanie sekcji szczegółów dla wiersza umożliwia grupowanie niektórych danych w szablonie, który jest opcjonalnie widoczny lub zwinięty. Można na przykład dodać szczegóły wiersza do DataGrid, który przedstawia tylko podsumowanie danych dla każdego wiersza w DataGrid, ale przedstawia więcej pól danych, gdy użytkownik wybierze wiersz. Szablon dla sekcji szczegółów wiersza definiujesz we właściwości RowDetailsTemplate. Poniższa ilustracja przedstawia przykład sekcji szczegółów wiersza.

Można zdefiniować szablon szczegółów wiersza jako XAML wbudowany lub jako zasób. Obie metody przedstawiono w poniższych procedurach. Szablon danych, który jest dodawany jako zasób, może być używany w całym projekcie bez ponownego tworzenia szablonu. Szablon danych dodawany jako wbudowany kod XAML jest dostępny tylko z kontrolki, w której jest zdefiniowany.

Aby wyświetlić szczegóły wiersza przy użyciu wbudowanego kodu XAML

1. Utwórz DataGrid, który wyświetla dane ze źródła danych.

2. W elemecie DataGrid dodaj element RowDetailsTemplate.

3. Utwórz DataTemplate, który definiuje wygląd sekcji szczegółów wiersza.

   Poniższy kod XAML przedstawia DataGrid i sposób definiowania wbudowanego RowDetailsTemplate. DataGrid wyświetla trzy wartości w każdym wierszu i trzy kolejne wartości po wybraniu wiersza.

   <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>
   

   Poniższy kod przedstawia zapytanie używane do wybierania danych wyświetlanych w DataGrid. W tym przykładzie zapytanie wybiera dane z jednostki zawierającej informacje o kliencie.

   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
   

Aby przy użyciu zasobu wyświetlić szczegóły wiersza

1. Utwórz DataGrid, który wyświetla dane ze źródła danych.

2. Dodaj element Resources do elementu głównego, taki jak kontrolka Window lub kontrolka Page, lub dodaj element Resources do klasy Application w pliku App.xaml (lub Application.xaml).

3. W elemecie resources utwórz DataTemplate, który definiuje wygląd sekcji szczegółów wiersza.

   Poniższy kod XAML przedstawia RowDetailsTemplate zdefiniowaną w klasie 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>
   

4. Na DataTemplateustaw dyrektywę x:Key na wartość, która jednoznacznie identyfikuje szablon danych.

5. W elemencie DataGrid ustaw właściwość RowDetailsTemplate na zasób zdefiniowany w poprzednich krokach. Przypisz zasób jako zasób statyczny.

   Poniższy kod XAML przedstawia właściwość RowDetailsTemplate ustawioną na zasób z poprzedniego przykładu.

   <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>
   

Aby ustawić widoczność i uniemożliwić przewijanie poziome w celu uzyskania szczegółów wiersza

1. W razie potrzeby ustaw właściwość RowDetailsVisibilityMode na wartość DataGridRowDetailsVisibilityMode.

   Domyślnie wartość jest ustawiona na wartość VisibleWhenSelected. Można ustawić ją na Visible, aby wyświetlić szczegóły wszystkich wierszy lub Collapsed, aby ukryć szczegóły dla wszystkich wierszy.

2. W razie potrzeby ustaw właściwość AreRowDetailsFrozen na true, aby uniemożliwić przewijanie w poziomie sekcji szczegółów wiersza.