Jak dodać szczegóły wiersza do formantu DataGrid

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

Szablon szczegółów wiersza definiuje się jako wbudowany kod XAML lub 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 obiekt DataGrid , który wyświetla dane ze źródła danych.

2. W elemecie DataGrid dodaj RowDetailsTemplate element .

3. Utwórz element DataTemplate definiujący wygląd sekcji szczegółów wiersza.

   Poniższy kod XAML przedstawia instrukcje DataGrid i sposób definiowania wbudowanego kodu RowDetailsTemplate . Spowoduje to DataGrid wyświetlenie trzech wartości w każdym wierszu i trzech kolejnych 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 obiekcie 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 wyświetlić szczegóły wiersza przy użyciu zasobu

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

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

3. W elemecie resources utwórz element DataTemplate definiujący wygląd sekcji szczegółów wiersza.

   Poniższy kod XAML przedstawia RowDetailsTemplate zdefiniowany w Application klasie .

   <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. W elemecie DataTemplateustaw dyrektywę x:Key na wartość, która jednoznacznie identyfikuje szablon danych.

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

   Poniższy kod XAML przedstawia właściwość ustawioną RowDetailsTemplate 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 RowDetailsVisibilityMode właściwość na DataGridRowDetailsVisibilityMode wartość.

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

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