Procédure : ajouter des détails de ligne à un contrôle DataGridHow to: Add Row Details to a DataGrid Control

Lorsque vous utilisez le DataGrid contrôle, vous pouvez personnaliser la présentation des données en ajoutant une section de détails des lignes.When using the DataGrid control, you can customize the data presentation by adding a row details section. L’ajout d’une section de détails de ligne vous permet de regrouper des données dans un modèle qui est éventuellement visible ou réduit.Adding a row details section enables you to group some data in a template that is optionally visible or collapsed. Par exemple, vous pouvez ajouter des détails de ligne à un DataGrid qui présente uniquement un résumé des données de chaque ligne du DataGrid , mais présente davantage de champs de données lorsque l’utilisateur sélectionne une ligne.For example, you can add row details to a DataGrid that presents only a summary of the data for each row in the DataGrid, but presents more data fields when the user selects a row. Vous définissez le modèle pour la section de détails des lignes dans la RowDetailsTemplate propriété.You define the template for the row details section in the RowDetailsTemplate property. L’illustration suivante montre un exemple de section de détails de ligne.The following illustration shows an example of a row details section.

DataGrid affiché avec détails de la ligneDataGrid shown with row details

Vous définissez le modèle de détails de ligne en tant que XAML inline ou en tant que ressource.You define the row details template as either inline XAML or as a resource. Les deux approches sont présentées dans les procédures suivantes.Both approaches are shown in the following procedures. Un modèle de données qui est ajouté en tant que ressource peut être utilisé dans tout le projet sans recréer le modèle.A data template that is added as a resource can be used throughout the project without re-creating the template. Un modèle de données ajouté en tant que code XAML inline est uniquement accessible à partir du contrôle dans lequel il est défini.A data template that is added as inline XAML is only accessible from the control where it is defined.

Pour afficher les détails des lignes à l’aide du code XAML inlineTo display row details by using inline XAML

  1. Créez un DataGrid qui affiche les données d’une source de données.Create a DataGrid that displays data from a data source.

  2. Dans l'élément DataGrid, ajoutez un élément RowDetailsTemplate.In the DataGrid element, add a RowDetailsTemplate element.

  3. Créez un DataTemplate qui définit l’apparence de la section de détails des lignes.Create a DataTemplate that defines the appearance of the row details section.

    Le code XAML suivant montre DataGrid et comment définir le en RowDetailsTemplate ligne.The following XAML shows the DataGrid and how to define the RowDetailsTemplate inline. Le DataGrid affiche trois valeurs dans chaque ligne et trois valeurs supplémentaires lorsque la ligne est sélectionnée.The DataGrid displays three values in each row and three more values when the row is selected.

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

    Le code suivant montre la requête utilisée pour sélectionner les données qui sont affichées dans le DataGrid .The following code shows the query that is used to select the data that is displayed in the DataGrid. Dans cet exemple, la requête sélectionne des données à partir d’une entité qui contient des informations sur les clients.In this example, the query selects data from an entity that contains customer information.

    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
    

Pour afficher les détails des lignes à l’aide d’une ressourceTo display row details by using a resource

  1. Créez un DataGrid qui affiche les données d’une source de données.Create a DataGrid that displays data from a data source.

  2. Ajoutez un Resources élément à l’élément racine, tel qu’un Window contrôle ou un Page contrôle, ou ajoutez un Resources élément à la Application classe dans le fichier app. XAML (ou application. Xaml).Add a Resources element to the root element, such as a Window control or a Page control, or add a Resources element to the Application class in the App.xaml (or Application.xaml) file.

  3. Dans l’élément Resources, créez un DataTemplate qui définit l’apparence de la section de détails des lignes.In the resources element, create a DataTemplate that defines the appearance of the row details section.

    Le code XAML suivant montre le RowDetailsTemplate défini dans la Application classe.The following XAML shows the RowDetailsTemplate defined in the Application class.

    <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. Sur le DataTemplate , définissez la directive x :Key sur une valeur qui identifie de façon unique le modèle de données.On the DataTemplate, set the x:Key Directive to a value that uniquely identifies the data template.

  5. Dans l' DataGrid élément, affectez RowDetailsTemplate à la propriété la ressource définie dans les étapes précédentes.In the DataGrid element, set the RowDetailsTemplate property to the resource defined in the previous steps. Assignez la ressource en tant que ressource statique.Assign the resource as a static resource.

    Le code XAML suivant montre la RowDetailsTemplate propriété définie sur la ressource de l’exemple précédent.The following XAML shows the RowDetailsTemplate property set to the resource from the previous example.

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

Pour définir la visibilité et empêcher le défilement horizontal pour les détails de ligneTo set visibility and prevent horizontal scrolling for row details

  1. Si nécessaire, affectez RowDetailsVisibilityMode une valeur à la propriété DataGridRowDetailsVisibilityMode .If needed, set the RowDetailsVisibilityMode property to a DataGridRowDetailsVisibilityMode value.

    Par défaut, la valeur est définie sur VisibleWhenSelected .By default, the value is set to VisibleWhenSelected. Vous pouvez lui affecter Visible la valeur pour afficher les détails de toutes les lignes ou Collapsed pour masquer les détails de toutes les lignes.You can set it to Visible to show the details for all of the rows or Collapsed to hide the details for all rows.

  2. Si nécessaire, affectez à la propriété la valeur AreRowDetailsFrozen true pour empêcher la section des détails des lignes de faire défiler horizontalement.If needed, set the AreRowDetailsFrozen property to true to prevent the row details section from scrolling horizontally.