BlackWaspTM

This web site uses cookies. By using the site you accept the cookie policy.This message is for compliance with the UK ICO law.

Windows Presentation Foundation
.NET 4.0+

WPF Data Display Controls - DataGrid - Row Details

The one hundred and sixteenth part of the Windows Presentation Foundation Fundamentals tutorial is the last one that describes features of the DataGrid control. This article looks at the row details feature.

Row Details

In the previous seven articles we've seen most of the more commonly used functionality of the WPF DataGrid control, whilst creating a simple example that shows some details of the planets of the solar system. In this article, which is the final one describing data grids, we'll look at one more feature, known as row details.

The row details feature allows you to add extra information about the objects represented in a grid, or to show the details from existing cells using a different layout. Row details are shown in an automatically expanding section below a row, not within the row itself and, usually, not using a grid layout. They can display any control, including a layout control with many children. These controls are automatically bound to the object in the row that they extend.

To demonstrate, we'll modify the sample project from the previous article. If you do not have an up-to-date copy, download it using the link at the top of the article, "WPF Data Display Controls - DataGrid - Editing".

Adding a Row Details Template

Adding row details is a simple task. You apply a data template to the DataGrid's RowDetailsTemplate property. Let's add one to the data grid that shows planet details. We won't add any extra properties to the Planet class in this case. We'll just show several properties in the new section.

Update the DataGrid control's XAML, as shown below. The row details template appears near the bottom of the code. It shows five TextBlocks, which display the planet's name, category, number of moons and whether the planet has rings and a global magnetic field. These controls are arranged using a Grid.

<DataGrid Name="SampleGrid"
          ItemsSource="{Binding Source={StaticResource SortedPlanets}}"
          AutoGenerateColumns="False" Hyperlink.Click="DataGrid_Click"
          SelectionMode="Extended" SelectionUnit="FullRow"
          RowHeaderWidth="20" ColumnHeaderHeight="35" RowHeight="25"
          Background="LightCyan" RowBackground="White"
          AlternatingRowBackground="Aquamarine"
          FrozenColumnCount="1"
          VerticalGridLinesBrush="LightBlue" GridLinesVisibility="Vertical"
          CanUserAddRows="False" CanUserDeleteRows="False">
    <DataGrid.Columns>
        <DataGridTextColumn Binding="{Binding Name}" Header="Planet" Width="80"
                            Foreground="Blue" FontWeight="Bold"
                            CanUserReorder="False"/>
        <DataGridCheckBoxColumn Binding="{Binding HasRings}" Header="Rings?" Width="50"
                                CanUserResize="False"/>
        <DataGridCheckBoxColumn Binding="{Binding GlobalMagneticField}"
                                Width="140" Header="Global Magnetic Field?"
                                IsThreeState="True"/>
        <DataGridComboBoxColumn Header="Category" Width="80"
                                SelectedItemBinding="{Binding Category}">
            <DataGridComboBoxColumn.ItemsSource>
                <CompositeCollection>
                    <sys:String>Terrestrial</sys:String>
                    <sys:String>Gas Giant</sys:String>
                    <sys:String>Ice Giant</sys:String>
                    <sys:String>Dwarf Planet</sys:String>
                </CompositeCollection>
            </DataGridComboBoxColumn.ItemsSource>
        </DataGridComboBoxColumn>
        <DataGridHyperlinkColumn Binding="{Binding MoreInfoUri}" Header="More"
                                 Width="80" ContentBinding="{Binding Name}"
                                 SortMemberPath="Name" />
        <DataGridTemplateColumn Header="Moons" Width="50" SortMemberPath="Moons">
            <DataGridTemplateColumn.CellTemplate>
                <DataTemplate>
                    <TextBlock Text="{Binding Moons}" />
                </DataTemplate>
            </DataGridTemplateColumn.CellTemplate>
            <DataGridTemplateColumn.CellEditingTemplate>
                <DataTemplate>
                    <Grid>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition/>
                            <ColumnDefinition Width="Auto"/>
                        </Grid.ColumnDefinitions>
                        <TextBlock Text="{Binding Moons}" />
                        <ScrollBar Grid.Column="1" Minimum="0" Maximum="100"
                                   SmallChange="1" Orientation="Vertical"
                                   Value="{Binding Moons,
                                           UpdateSourceTrigger=PropertyChanged}"
                                   RenderTransformOrigin="0.5,0.5">
                            <ScrollBar.RenderTransform>
                                <ScaleTransform ScaleY="-1"/>
                            </ScrollBar.RenderTransform>
                        </ScrollBar>
                    </Grid>
                </DataTemplate>
            </DataGridTemplateColumn.CellEditingTemplate>
        </DataGridTemplateColumn>
    </DataGrid.Columns>

    <DataGrid.RowDetailsTemplate>
        <DataTemplate>
            <Border BorderThickness="1" BorderBrush="Black"
                    Background="AliceBlue" Margin="4" Padding="4">
                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="100"/>
                        <ColumnDefinition/>
                        <ColumnDefinition Width="100"/>
                        <ColumnDefinition/>
                    </Grid.ColumnDefinitions>
                    <Grid.RowDefinitions>
                        <RowDefinition/>
                        <RowDefinition/>
                        <RowDefinition/>
                    </Grid.RowDefinitions>

                    <TextBlock Grid.ColumnSpan="4" FontFamily="Arial"
                               FontSize="20" FontWeight="Bold"
                               Text="{Binding Name}"/>

                    <TextBlock Grid.Row="1" FontWeight="Bold" Text="Category"/>
                    <TextBlock Grid.Row="1" Grid.Column="1" Text="{Binding Category}"/>

                    <TextBlock Grid.Row="1" Grid.Column="2" FontWeight="Bold"
                               Text="Moons"/>
                    <TextBlock Grid.Row="1" Grid.Column="3" Text="{Binding Moons}"/>

                    <TextBlock Grid.Row="2" FontWeight="Bold" Text="Rings?"/>
                    <TextBlock Grid.Row="2" Grid.Column="1" Text="{Binding HasRings}"/>

                    <TextBlock Grid.Row="2" Grid.Column="2" FontWeight="Bold"
                               Text="Magnetic Field?"/>
                    <TextBlock Grid.Row="2" Grid.Column="3"
                               Text="{Binding GlobalMagneticField}"/>
                </Grid>
            </Border>
        </DataTemplate>
    </DataGrid.RowDetailsTemplate>
</DataGrid>

Run the program to see the results. Select a row in the data grid to expand the details for that row. The image below shows the grid with the "Earth" row selected.

WPF DataGrid with Row Details

1 December 2014