Share via

Comment : ajouter des détails de ligne à un contrôle DataGrid

  • Article

Lorsque vous utilisez le DataGrid contrôle, vous pouvez personnaliser la présentation des données en ajoutant une section de détails de ligne. L’ajout d’une section détails de ligne vous permet de regrouper des données dans un modèle qui est éventuellement 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 dans le 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 RowDetailsTemplate propriété. L’illustration suivante montre un exemple de section détails de ligne.

DataGrid shown with row details

Vous définissez le modèle de détails de ligne en 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

  1. Créez un DataGrid élément qui affiche des données à partir d’une source de données.

  2. Dans l'élément DataGrid, ajoutez un élément RowDetailsTemplate.

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

    Le code XAML suivant montre comment DataGrid définir l’inline RowDetailsTemplate . L’écran 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

  1. Créez un DataGrid élément qui affiche des données à partir d’une source de données.

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

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

    Le code XAML suivant montre l’élément RowDetailsTemplate défini dans la Application classe.

    <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 manière unique le modèle de données.

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

    Le code XAML suivant montre la RowDetailsTemplate propriété 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

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

    Par défaut, la valeur est définie sur VisibleWhenSelected. Vous pouvez le définir pour Visible afficher les détails de toutes les lignes ou Collapsed pour masquer les détails de toutes les lignes.

  2. Si nécessaire, définissez la AreRowDetailsFrozen propriété pour true empêcher la section détails de ligne de faire défiler horizontalement.