Gewusst wie: Hinzufügen von Zeilendetails zu einem DataGrid-Steuerelement

Artikel
08/10/2011

Wenn Sie das DataGrid-Steuerelement verwenden, können Sie die Datendarstellung anpassen, indem Sie einen Zeilendetailabschnitt hinzufügen. Durch das Hinzufügen eines Zeilendetailabschnitts können Sie einige Daten in einer Vorlage zu gruppieren, die optional sichtbar oder ausgeblendet ist. Sie können z. B. einem DataGrid Zeilendetails hinzufügen, der nur eine Zusammenfassung der Daten für jede Zeile im DataGrid darstellt, aber mehr Datenfelder darstellt, wenn der Benutzer eine Zeile auswählt. Sie definieren die Vorlage für den Zeilendetailabschnitt in der RowDetailsTemplate-Eigenschaft. Die folgende Darstellung zeigt ein Beispiel eines Zeilendetailabschnitts.

DataGrid mit Zeilendetails

Sie definieren die Zeilendetailvorlage als Inline-XAML oder als Ressource. Beide Möglichkeiten werden in den folgenden Verfahren dargestellt. Eine Datenvorlage, die als Ressource hinzugefügt wird, kann im gesamten Projekt verwendet werden, ohne die Vorlage neu zu erstellen. Auf eine Datenvorlage, die als Inline-XAML hinzugefügt wird, kann nur von dem Steuerelement zugegriffen werden, in dem sie definiert ist.

So zeigen Sie Zeilendetails mit 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 Zeilendetailabschnitts definiert.

Die folgende XAML zeigt das DataGrid an und zeigt an, wie die RowDetailsTemplate inline definiert wird. Das DataGrid zeigt drei Werte in jeder Zeile und drei weitere Werte an, wenn die Zeile ausgewählt wird.

<Window x:Class="WpfApplication1.MainWindow"
        xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="https://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>

Im folgenden Code wird die Abfrage dargestellt, die zum Auswählen der Daten verwendet wird, die im DataGrid angezeigt werden. In diesem Beispiel wählt die Abfrage Daten aus einer Entität aus, die Kundeninformationen enthält.

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

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();
}

So zeigen Sie Zeilendetails mit einer Ressource an

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

Erstellen Sie im Ressourcenelement eine DataTemplate, die die Darstellung des Zeilendetailabschnitts definiert.

Die folgende XAML zeigt die RowDetailsTemplate, die in der Application-Klasse definiert wurde.

<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 in der DataTemplate das x:Key-Direktive auf einen Wert fest, der die Datenvorlage eindeutig identifiziert.

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

Die folgende XAML zeigt die RowDetailsTemplate-Eigenschaft, 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>

So legen Sie die Sichtbarkeit fest und verhindern den horizontalen Bildlauf für Zeilendetails

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

Standardmäßig ist der Wert auf VisibleWhenSelected festgelegt. Sie können ihn auf Visible festlegen, um die Details für alle Zeilen anzuzeigen, oder auf Collapsed, um die Details für alle Zeilen auszublenden.
Legen Sie die AreRowDetailsFrozen-Eigenschaft gegebenenfalls auf true fest, um einen horizontalen Bildlauf im Zeilendetailabschnitt zu verhindern.

Freigeben über

Gewusst wie: Hinzufügen von Zeilendetails zu einem DataGrid-Steuerelement

So zeigen Sie Zeilendetails mit Inline-XAML an

So zeigen Sie Zeilendetails mit einer Ressource an

So legen Sie die Sichtbarkeit fest und verhindern den horizontalen Bildlauf für Zeilendetails

Zusätzliche Ressourcen