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

Artikel
05/04/2023

Wenn Sie das DataGrid-Steuerelement verwenden, können Sie die Datenpräsentation anpassen, indem Sie einen Zeilendetails-Abschnitt hinzufügen. Durch das Hinzufügen eines Zeilendetails-Abschnitts können Sie einige Daten in einer Vorlage gruppieren, die optional sichtbar oder ausgeblendet 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 shown with row details

Sie definieren die Zeilendetailsvorlage entweder als Inline-XAML oder als Ressource. In den folgenden Abläufen sind beide Ansätze dargestellt: Eine Datenvorlage, die als Ressource hinzugefügt wird, kann im gesamten Projekt verwendet werden, ohne die Vorlage erneut erstellen zu müssen. Eine Datenvorlage, die als Inline-XAML hinzugefügt wird, ist nur über das Steuerelement zugänglich, mit dem 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. Das DataGrid zeigt drei Werte in jeder Zeile an, und drei weitere Werte, wenn die Zeile ausgewählt wird.

<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 DataGrid angezeigt 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.

Im folgenden XAML-Code wird die RowDetailsTemplateEigenschaft auf die Ressource aus dem vorherigen Beispiel festgelegt.

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

Festlegen der Sichtbarkeit und Verhindern des horizontalen Scrollens für Zeilendetails

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

In der Standardeinstellung ist dieser Wert auf VisibleWhenSelected festgelegt. Sie können ihn auf Visible setzen, um die Details für alle Zeilen anzuzeigen oder auf Collapsed, um die Details für alle Zeilen auszublenden.
Setzen Sie bei Bedarf die AreRowDetailsFrozen-Eigenschaft auf true, um zu verhindern, dass der Zeilendetails-Abschnitt horizontal scrollt.

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:

Festlegen der Sichtbarkeit und Verhindern des horizontalen Scrollens für Zeilendetails

Feedback

Zusätzliche Ressourcen