Postupy: Přidání podrobností řádku do ovládacího prvku DataGrid

Při použití DataGrid ovládacího prvku můžete prezentaci dat přizpůsobit přidáním oddílu podrobností řádku. Přidání oddílu podrobností řádku umožňuje seskupit některá data do šablony, která je volitelně viditelná nebo sbalená. Můžete například přidat podrobnosti o řádku, DataGrid který zobrazí pouze souhrn dat pro každý řádek v DataGridsadě , ale zobrazí více datových polí, když uživatel vybere řádek. Šablonu pro oddíl podrobností řádku definujete ve RowDetailsTemplate vlastnosti. Následující obrázek ukazuje příklad oddílu podrobností řádku.

Šablonu podrobností řádku definujete jako vložený KÓD XAML nebo jako prostředek. Oba přístupy jsou uvedené v následujících postupech. Datovou šablonu přidanou jako zdroj je možné použít v celém projektu bez opětovného vytvoření šablony. Šablona dat přidaná jako vložená XAML je přístupná pouze z ovládacího prvku, ve kterém je definována.

Zobrazení podrobností řádku pomocí vloženého kódu XAML

1. Vytvořte zobrazení DataGrid dat ze zdroje dat.

2. Do elementu DataGridRowDetailsTemplate přidejte prvek.

3. Vytvořte oddíl DataTemplate s podrobnostmi řádku, který definuje vzhled oddílu podrobností řádku.

   Následující XAML ukazuje DataGrid , jak definovat vložený RowDetailsTemplate kód. Při DataGrid výběru řádku se zobrazí tři hodnoty a tři další hodnoty.

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

   Následující kód ukazuje dotaz, který slouží k výběru dat zobrazených v souboru DataGrid. V tomto příkladu dotaz vybere data z entity, která obsahuje informace o zákaznících.

   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
   

Zobrazení podrobností řádku pomocí prostředku

1. Vytvořte zobrazení DataGrid dat ze zdroje dat.

2. Resources Přidejte element do kořenového elementu, například Window ovládací prvek nebo Page ovládací prvek, nebo přidejte Resources prvek do Application třídy v souboru App.xaml (nebo Application.xaml).

3. V elementu resources vytvořte, DataTemplate který definuje vzhled oddílu podrobností řádku.

   Následující KÓD XAML ukazuje definovanou RowDetailsTemplateApplication ve třídě.

   <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. Nastavte direktivu DataTemplate x:Key na hodnotu, která jednoznačně identifikuje šablonu dat.

5. V elementu DataGridRowDetailsTemplate nastavte vlastnost na prostředek definovaný v předchozích krocích. Přiřaďte prostředek jako statický prostředek.

   Následující XAML ukazuje RowDetailsTemplate vlastnost nastavenou na prostředek z předchozího příkladu.

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

Nastavení viditelnosti a zabránění vodorovného posouvání podrobností řádku

1. V případě potřeby nastavte RowDetailsVisibilityMode vlastnost na DataGridRowDetailsVisibilityMode hodnotu.

   Ve výchozím nastavení je hodnota nastavena na VisibleWhenSelectedhodnotu . Můžete ho nastavit tak, aby Visible zobrazoval podrobnosti pro všechny řádky nebo Collapsed skryje podrobnosti pro všechny řádky.

2. V případě potřeby nastavte AreRowDetailsFrozen vlastnost tak, aby true se oddíl podrobností řádku posouvat vodorovně.