Delen via

Instructies: Rijdetails toevoegen aan een DataGrid-controle

Wanneer u het besturingselement DataGrid gebruikt, kunt u de gegevenspresentatie aanpassen door een sectie met rijdetails toe te voegen. Door een sectie met rijdetails toe te voegen, kunt u bepaalde gegevens groeperen in een sjabloon die optioneel zichtbaar of samengevouwen is. U kunt bijvoorbeeld rijgegevens toevoegen aan een DataGrid die alleen een samenvatting van de gegevens voor elke rij in de DataGridgeeft, maar meer gegevensvelden toont wanneer een gebruiker een rij selecteert. U definieert de sjabloon voor de sectie met rijdetails in de eigenschap RowDetailsTemplate. In de volgende afbeelding ziet u een voorbeeld van een sectie met rijgegevens.

DataGrid weergegeven met rijdetails

U definieert de sjabloon voor rijdetails als inline XAML of als een resource. Beide benaderingen worden weergegeven in de volgende procedures. Een gegevenssjabloon die als een resource wordt toegevoegd, kan in het hele project worden gebruikt zonder de sjabloon opnieuw te maken. Een gegevenssjabloon die als inline XAML wordt toegevoegd, is alleen toegankelijk vanuit het besturingselement waar deze is gedefinieerd.

Rijdetails weergeven met behulp van inline XAML

  1. Maak een DataGrid waarin gegevens uit een gegevensbron worden weergegeven.

  2. Voeg in het element DataGrid een RowDetailsTemplate toe.

  3. Maak een DataTemplate waarmee het uiterlijk van de sectie met rijdetails wordt gedefinieerd.

    In de volgende XAML ziet u de DataGrid en hoe u de RowDetailsTemplate inline definieert. In de DataGrid worden drie waarden in elke rij en drie meer waarden weergegeven wanneer de rij is geselecteerd.

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

    De volgende code toont de query die wordt gebruikt om de gegevens te selecteren die worden weergegeven in de DataGrid. In dit voorbeeld selecteert de query gegevens uit een entiteit die klantgegevens bevat.

    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

Om rijdetails weer te geven door gebruik te maken van een bron

  1. Maak een DataGrid waarin gegevens uit een gegevensbron worden weergegeven.

  2. Voeg een Resources element toe aan het hoofdelement, zoals een besturingselement Window of een Page besturingselement, of voeg een Resources element toe aan de Application-klasse in het bestand App.xaml (of Application.xaml).

  3. Maak in het resource-element een DataTemplate waarmee het uiterlijk van de sectie met rijdetails wordt gedefinieerd.

    In de volgende XAML ziet u de RowDetailsTemplate gedefinieerd in de klasse 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>

  4. In de DataTemplatestel je de x:Key Directive in op een waarde die de datatemplate uniek identificeert.

  5. Stel in het DataGrid-element de eigenschap RowDetailsTemplate in op de resource die in de vorige stappen is gedefinieerd. Wijs de resource toe als een statische resource.

    In de volgende XAML ziet u de eigenschap RowDetailsTemplate ingesteld op de resource uit het vorige voorbeeld.

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

De zichtbaarheid van rijdetails instellen en horizontaal scrollen voorkomen

  1. Stel indien nodig de eigenschap RowDetailsVisibilityMode in op een DataGridRowDetailsVisibilityMode waarde.

    De waarde is standaard ingesteld op VisibleWhenSelected. U kunt deze instellen op Visible om de details voor alle rijen weer te geven of Collapsed om de details voor alle rijen te verbergen.

  2. Stel indien nodig de eigenschap AreRowDetailsFrozen in op true om te voorkomen dat de sectie met rijdetails horizontaal schuift.

  • Last updated on