Vorgehensweise: Hinzufügen von Zeilendetails zu einem DataGrid-Steuerelement

Artikel
01/31/2025

Wenn Sie das DataGrid-Steuerelement verwenden, können Sie die Datenpräsentation anpassen, indem Sie einen Abschnitt mit Zeilendetails hinzufügen. Durch das Hinzufügen eines Abschnitts „Zeilendetails“ können Sie einige Daten in einer Vorlage gruppieren, die optional sichtbar oder eingeklappt ist. Sie können beispielsweise Zeilendetails zu einem DataGrid hinzufügen, das nur eine Zusammenfassung der Daten für jede Zeile in dem DataGrid darstellt, aber weitere Datenfelder darstellt, wenn der Benutzer eine Zeile auswählt. Sie definieren die Vorlage für den Zeilendetails-Abschnitt in der RowDetailsTemplate-Eigenschaft. Die folgende Abbildung zeigt ein Beispiel für einen Zeilendetails-Abschnitt.

DataGrid wird mit Zeilendetails angezeigt

Sie definieren die Zeilendetailsvorlage entweder als Inline-XAML oder als Ressource. Beide Ansätze werden in den folgenden Verfahren gezeigt. Eine Als Ressource hinzugefügte Datenvorlage kann im gesamten Projekt verwendet werden, ohne die Vorlage erneut zu erstellen. Auf eine Datenvorlage, die als Inline-XAML hinzugefügt wird, kann nur von dem Steuerelement zugegriffen werden, wo sie definiert ist.

So zeigen Sie Zeilendetails mithilfe von Inline-XAML an:

Erstellen Sie ein DataGrid, das Daten aus einer Datenquelle anzeigt.
Fügen Sie im DataGrid-Element ein RowDetailsTemplate-Element hinzu.

Erstellen Sie eine DataTemplate, die die Darstellung des Zeilendetails-Abschnitts definiert.

Im folgenden XAML-Code wird das DataGrid gezeigt und demonstriert, wie die RowDetailsTemplate inline definiert wird. Die DataGrid zeigt drei Werte in jeder Zeile und drei weitere Werte an, wenn die Zeile ausgewählt ist.

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

Der folgende Code zeigt die Abfrage, die verwendet wird, um die Daten auszuwählen, die im DataGridangezeigt werden. In diesem Beispiel wählt die Abfrage Daten aus einer Entität aus, die Kundeninformationen enthält.

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

So zeigen Sie Zeilendetails mithilfe einer Ressource an:

Erstellen Sie ein DataGrid, das Daten aus einer Datenquelle anzeigt.
Fügen Sie dem Stammelement ein Resources-Element hinzu, z. B. ein Window-Steuerelement oder ein Page-Steuerelement, oder fügen Sie der Klasse Application in der Datei „App.xaml“ (oder „Application.xaml“) ein Resources-Element hinzu.

Erstellen Sie im Ressourcenelement eine DataTemplate, die das Aussehen des Zeilendetails-Abschnitts definiert.

Im folgenden XAML-Code steht die der Application-Klasse definierte RowDetailsTemplate.

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

Legen Sie auf der DataTemplate die x:Key-Anweisung auf einen Wert fest, der die Datenvorlage eindeutig identifiziert.

Legen Sie im DataGrid-Element die RowDetailsTemplate-Eigenschaft auf die Ressource fest, die in den vorherigen Schritten definiert ist. Weisen Sie die Ressource als statische Ressource zu.

Der folgende XAML-Code zeigt die Eigenschaft RowDetailsTemplate, die auf die Ressource aus dem vorherigen Beispiel festgelegt ist.

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

Um die Sichtbarkeit festzulegen und horizontales Scrollen bei Zeilendetails zu verhindern

Legen Sie bei Bedarf die RowDetailsVisibilityMode-Eigenschaft auf einen DataGridRowDetailsVisibilityMode-Wert fest.

Standardmäßig ist der Wert auf VisibleWhenSelectedfestgelegt. Sie können sie auf Visible festlegen, um die Details für alle Zeilen anzuzeigen, oder Collapsed, um die Details für alle Zeilen auszublenden.
Legen Sie bei Bedarf die eigenschaft AreRowDetailsFrozen auf true fest, um zu verhindern, dass der Abschnitt mit den Zeilendetails horizontal scrollt.

Freigeben über

Vorgehensweise: Hinzufügen von Zeilendetails zu einem DataGrid-Steuerelement

So zeigen Sie Zeilendetails mithilfe von Inline-XAML an:

So zeigen Sie Zeilendetails mithilfe einer Ressource an:

Um die Sichtbarkeit festzulegen und horizontales Scrollen bei Zeilendetails zu verhindern

Zusätzliche Ressourcen