Anvisningar: Lägga till radinformation i en DataGrid-kontroll

När du använder kontrollen DataGrid kan du anpassa datapresentationen genom att lägga till ett radinformationsavsnitt. Genom att lägga till ett radinformationsavsnitt kan du gruppera vissa data i en mall som kan vara synlig eller komprimerad. Du kan till exempel lägga till radinformation i en DataGrid som endast visar en sammanfattning av data för varje rad i DataGrid, men visar fler datafält när användaren väljer en rad. Du definierar mallen för radinformationsavsnittet i egenskapen RowDetailsTemplate. Följande bild visar ett exempel på ett avsnitt med radinformation.

DataGrid visas med radinformation

Du definierar mallen för radinformation som antingen infogad XAML eller som en resurs. Båda metoderna visas i följande procedurer. En datamall som läggs till som en resurs kan användas i hela projektet utan att mallen skapas igen. En datamall som läggs till som infogad XAML är endast tillgänglig från kontrollen där den definieras.

Visa radinformation genom att använda in-line XAML

Skapa en DataGrid som visar data från en datakälla.
Lägg till ett DataGrid element i elementet RowDetailsTemplate.

Skapa en DataTemplate som definierar utseendet på detaljavsnittet för rader.

Följande XAML visar DataGrid och hur du definierar RowDetailsTemplate i raden. DataGrid visar tre värden i varje rad och ytterligare tre värden när raden är markerad.

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

Följande kod visar frågan som används för att välja de data som visas i DataGrid. I det här exemplet väljer frågan data från en entitet som innehåller kundinformation.

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

Visa radinformation med hjälp av en resurs

Skapa en DataGrid som visar data från en datakälla.
Lägg till ett Resources element i rotelementet, till exempel en Window kontroll eller en Page kontroll, eller lägg till ett Resources-element i klassen Application i filen App.xaml (eller Application.xaml).

I resurselementet skapar du en DataTemplate som definierar utseendet på radinformationsavsnittet.

Följande XAML visar RowDetailsTemplate som definierats i klassen 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>

På DataTemplateanger du x:Key Directive till ett värde som unikt identifierar datamallen.

I elementet DataGrid anger du egenskapen RowDetailsTemplate till den resurs som definierades i föregående steg. Tilldela resursen som en statisk resurs.

Följande XAML visar egenskapen RowDetailsTemplate inställd på resursen från föregående exempel.

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

Ange synlighet och förhindra vågrät rullning för radinformation

Om det behövs anger du egenskapen RowDetailsVisibilityMode till ett DataGridRowDetailsVisibilityMode värde.

Som standard är värdet inställt på VisibleWhenSelected. Du kan ställa in den på Visible för att visa information för alla rader eller Collapsed för att dölja informationen för alla rader.
Om det behövs anger du egenskapen AreRowDetailsFrozen till true för att förhindra att radinformationsavsnittet rullas vågrätt.

Feedback

Var den här sidan till hjälp?

Last updated on 2025-05-07