Útmutató: Sor részleteinek hozzáadása DataGrid-vezérlőhöz

A DataGrid vezérlőelem használata esetén egy sor részleteit tartalmazó szakasz hozzáadásával testre szabhatja az adatbemutatót. A sor részletei szakasz hozzáadásával egyes adatokat csoportosíthat egy sablonban, amely opcionálisan látható vagy összecsukott. Például, hozzáadhat soradatokat egy DataGrid-hoz, amely csak egy összefoglalót jelenít meg a DataGridegyes sorairól, de részletesebb adatmezőket mutat, amikor a felhasználó kiválaszt egy adott sort. A RowDetailsTemplate tulajdonságban határozza meg a sor részleteinek szakaszának sablonját. Az alábbi ábrán egy sor részleteit bemutató szakasz látható.

A sor részleteit meghatározhatja sablonként, akár beágyazott XAML-ként, akár erőforrásként. Mindkét módszer a következő eljárásokban látható. Az erőforrásként hozzáadott adatsablonok a teljes projektben használhatók a sablon újbóli létrehozása nélkül. A beágyazott XAML-ként hozzáadott adatsablonok csak abból a vezérlőből érhetők el, ahol definiálva van.

Sor részleteinek megjelenítése beágyazott XAML használatával

1. Hozzon létre egy DataGrid, amely egy adatforrásból jelenít meg adatokat.

2. A DataGrid elemben adjon hozzá egy RowDetailsTemplate elemet.

3. Hozzon létre egy DataTemplate-t, amely meghatározza a sor részleteinek szakaszának megjelenését.

   Az alábbi XAML bemutatja a DataGrid-t és azt, hogyan lehet a RowDetailsTemplate-et beágyazottan meghatározni. A DataGrid minden sorban három értéket, a sor kijelölésekor pedig további három értéket jelenít meg.

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

   Az alábbi kód a DataGridmegjelenített adatok kiválasztásához használt lekérdezést mutatja be. Ebben a példában a lekérdezés egy ügyféladatokat tartalmazó entitás adatait választja ki.

   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
   

Sor részleteinek megjelenítése erőforrás használatával

1. Hozzon létre egy DataGrid, amely egy adatforrásból jelenít meg adatokat.

2. Adjon hozzá egy Resources elemet a gyökérelemhez, például egy Window vezérlőt vagy egy Page vezérlőt, vagy vegyen fel egy Resources elemet az App.xaml (vagy Application.xaml) fájl Application osztályához.

3. Az erőforrások elemben hozzon létre egy DataTemplate, amely meghatározza a sor részletei szakasz megjelenését.

   Az alábbi XAML a RowDetailsTemplate-t mutatja, amely a Application osztályban van definiálva.

   <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. A DataTemplateállítsa az x:Key Directive értékre, amely egyedileg azonosítja az adatsablont.

5. A DataGrid elemben állítsa a RowDetailsTemplate tulajdonságot az előző lépésekben meghatározott erőforrásra. Az erőforrás hozzárendelése statikus erőforrásként.

   Az alábbi XAML az előző példában az erőforrásra beállított RowDetailsTemplate tulajdonságot mutatja be.

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

A láthatóság beállítása és a vízszintes görgetés megakadályozása a sor részleteihez

1. Szükség esetén állítsa a RowDetailsVisibilityMode tulajdonságot egy DataGridRowDetailsVisibilityMode értékre.

   Alapértelmezés szerint az érték VisibleWhenSelectedértékre van állítva. Beállíthatja, hogy Visible megjelenítse az összes sor részleteit, vagy Collapsed az összes sor adatait elrejtse.

2. Ha szükséges, állítsa a AreRowDetailsFrozen tulajdonságot true értékre, hogy megakadályozza a sor részletei szakasz vízszintes görgetését.