Guide pratique pour ajouter des détails de ligne à un contrôle DataGrid

Article
01/30/2025

Lorsque vous utilisez le contrôle DataGrid, vous pouvez personnaliser la présentation des données en ajoutant une section détails de ligne. L’ajout d’une section de détails de ligne vous permet de regrouper certaines données dans un modèle qui peut être visible ou réduit. Par exemple, vous pouvez ajouter des détails de ligne à un DataGrid qui présente uniquement un résumé des données pour chaque ligne du DataGrid, mais présente plus de champs de données lorsque l’utilisateur sélectionne une ligne. Vous définissez le modèle pour la section détails de ligne dans la propriété RowDetailsTemplate. L’illustration suivante montre un exemple de section de détails de ligne.

DataGrid affiché avec les détails de ligne

Vous définissez le modèle de détails de ligne en tant que XAML inline ou en tant que ressource. Les deux approches sont présentées dans les procédures suivantes. Un modèle de données ajouté en tant que ressource peut être utilisé dans tout le projet sans recréer le modèle. Un modèle de données ajouté en XAML inline n’est accessible qu’à partir du contrôle où il est défini.

Pour afficher les détails de ligne à l’aide du code XAML inline

Créez un DataGrid qui affiche les données d’une source de données.
Dans l’élément DataGrid, ajoutez un élément RowDetailsTemplate.

Créez un DataTemplate qui définit l’apparence de la section de détails de ligne.

Le XAML suivant montre le DataGrid et comment définir le RowDetailsTemplate inline. Le DataGrid affiche trois valeurs dans chaque ligne et trois autres valeurs lorsque la ligne est sélectionnée.

<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 affichées dans le DataGrid. Dans cet exemple, la requête sélectionne les données d’une entité qui contient des informations client.

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 de ligne à l’aide d’une ressource

Créez un DataGrid qui affiche les données d’une source de données.
Ajoutez un élément Resources à l’élément racine, tel qu’un contrôle Window ou un contrôle Page, ou ajoutez un élément Resources à la classe Application dans le fichier App.xaml (ou Application.xaml).

Dans l’élément ressources, créez un DataTemplate qui définit l’apparence de la section de détails de la ligne.

Le code XAML suivant montre la RowDetailsTemplate définie dans la classe Application.

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

Sur le DataTemplate, définissez la Directive x:Key sur une valeur qui identifie de manière unique le modèle de données.

Dans l’élément DataGrid, définissez la propriété RowDetailsTemplate sur la ressource définie aux étapes précédentes. Affectez la ressource en tant que ressource statique.

Le code XAML suivant montre la propriété RowDetailsTemplate définie sur la ressource de l’exemple précédent.

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

Si nécessaire, définissez la propriété RowDetailsVisibilityMode sur une valeur de DataGridRowDetailsVisibilityMode.

Par défaut, la valeur est définie sur VisibleWhenSelected. Vous pouvez le définir sur Visible pour afficher les détails de toutes les lignes ou Collapsed pour masquer les détails de toutes les lignes.
Si nécessaire, définissez la propriété AreRowDetailsFrozen sur true pour empêcher le défilement horizontal de la section de détails de ligne.

Partager via

Guide pratique pour ajouter des détails de ligne à un contrôle DataGrid

Pour afficher les détails de ligne à l’aide du code XAML inline

Pour afficher les détails de ligne à l’aide d’une ressource

Pour définir la visibilité et empêcher le défilement horizontal pour les détails de ligne

Ressources supplémentaires