Cara: Menambahkan Detail Baris ke Kontrol DataGrid

Saat menggunakan DataGrid kontrol, Anda bisa mengkustomisasi presentasi data dengan menambahkan bagian detail baris. Menambahkan bagian detail baris memungkinkan Anda mengelompokkan beberapa data dalam templat yang secara opsional terlihat atau diciutkan. Misalnya, Anda dapat menambahkan detail baris ke yang DataGrid hanya menyajikan ringkasan data untuk setiap baris di DataGrid, tetapi menyajikan lebih banyak bidang data saat pengguna memilih baris. Anda menentukan templat untuk bagian detail baris di RowDetailsTemplate properti . Ilustrasi berikut ini memperlihatkan contoh bagian detail baris.

Anda menentukan templat detail baris sebagai XAML sebaris atau sebagai sumber daya. Kedua pendekatan ditunjukkan dalam prosedur berikut. Templat data yang ditambahkan sebagai sumber daya dapat digunakan di seluruh proyek tanpa membuat ulang templat. Templat data yang ditambahkan sebagai XAML sebaris hanya dapat diakses dari kontrol tempat templat tersebut ditentukan.

Untuk menampilkan detail baris dengan menggunakan XAML sebaris

1. Buat yang DataGrid menampilkan data dari sumber data.

2. DataGrid Dalam elemen , tambahkan RowDetailsTemplate elemen .

3. DataTemplate Buat yang menentukan tampilan bagian detail baris.

   XAML berikut menunjukkan DataGrid dan cara menentukan RowDetailsTemplate sebaris. menampilkan DataGrid tiga nilai di setiap baris dan tiga nilai lagi saat baris dipilih.

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

   Kode berikut menunjukkan kueri yang digunakan untuk memilih data yang ditampilkan di DataGrid. Dalam contoh ini, kueri memilih data dari entitas yang berisi informasi pelanggan.

   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
   

Untuk menampilkan detail baris dengan menggunakan sumber daya

1. Buat yang DataGrid menampilkan data dari sumber data.

2. Resources Tambahkan elemen ke elemen akar, seperti Window kontrol atau Page kontrol, atau tambahkan Resources elemen ke Application kelas dalam file App.xaml (atau Application.xaml).

3. Dalam elemen sumber daya, buat DataTemplate yang menentukan tampilan bagian detail baris.

   XAML berikut menunjukkan yang RowDetailsTemplate ditentukan di Application kelas .

   <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. DataTemplatePada , atur x:Key Directive ke nilai yang secara unik mengidentifikasi templat data.

5. DataGrid Dalam elemen , atur RowDetailsTemplate properti ke sumber daya yang ditentukan dalam langkah-langkah sebelumnya. Tetapkan sumber daya sebagai sumber daya statis.

   XAML berikut menunjukkan properti yang RowDetailsTemplate diatur ke sumber daya dari contoh sebelumnya.

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

Untuk mengatur visibilitas dan mencegah pengguliran horizontal untuk detail baris

1. Jika diperlukan, atur properti ke RowDetailsVisibilityModeDataGridRowDetailsVisibilityMode nilai.

   Secara default, nilai diatur ke VisibleWhenSelected. Anda dapat mengaturnya ke Visible untuk menampilkan detail untuk semua baris atau Collapsed untuk menyembunyikan detail untuk semua baris.

2. Jika diperlukan, atur AreRowDetailsFrozen properti ke true untuk mencegah bagian detail baris menggulir secara horizontal.