Procedimiento para agregar detalles de fila a un control DataGrid

  • Artículo

Al usar el control DataGrid, puede personalizar la presentación de datos agregando una sección de detalles de fila. Agregar una sección de detalles de fila permite agrupar algunos datos en una plantilla que, opcionalmente, está visible o contraída. Por ejemplo, puede agregar detalles de fila a un objeto DataGrid que solo presenta un resumen de los datos de cada fila de DataGrid, pero presenta más campos de datos cuando el usuario selecciona una fila. La plantilla para la sección de detalles de fila se define en la propiedad RowDetailsTemplate. En la ilustración siguiente se muestra un ejemplo de una sección de detalles de fila.

DataGrid con detalles de filas

La plantilla de detalles de fila se define como XAML en línea o como un recurso. En los siguientes procedimientos se muestran ambos enfoques. Una plantilla de datos que se agrega como un recurso se puede usar en todo el proyecto sin volver a crear la plantilla. Una plantilla de datos que se agrega como XAML en línea solo es accesible desde el control donde se define.

Para mostrar los detalles de fila mediante XAML en línea

  1. Cree un objeto DataGrid que muestre los datos de un origen de datos.

  2. En el elemento DataGrid, agregue un elemento RowDetailsTemplate.

  3. Cree un objeto DataTemplate que defina la apariencia de la sección de detalles de fila.

    En el código XAML siguiente se muestra DataGrid y cómo definir el elemento RowDetailsTemplate en línea. DataGrid muestra tres valores en cada fila y tres valores más cuando se selecciona la fila.

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

    El código siguiente muestra la consulta que se usa para seleccionar los datos que se muestran en DataGrid. En este ejemplo, la consulta selecciona datos de una entidad que contiene información del cliente.

    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

Para mostrar los detalles de fila mediante un recurso

  1. Cree un objeto DataGrid que muestre los datos de un origen de datos.

  2. Agregue un elemento Resources al elemento raíz, como un control Window o un control Page, o agregue un elemento Resources a la clase Application en el archivo App.xaml (o Application.xaml).

  3. En el elemento Resources, cree un objeto DataTemplate que defina la apariencia de la sección de detalles de fila.

    En el código XAML siguiente se muestra RowDetailsTemplate definido en la clase 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>

  4. En DataTemplate, establezca la x:Key (Directiva) en un valor que identifique de forma única la plantilla de datos.

  5. En el elemento DataGrid, establezca la propiedad RowDetailsTemplate en el recurso definido en los pasos anteriores. Asigne el recurso como un recurso estático.

    En el código XAML siguiente se muestra la propiedad RowDetailsTemplate establecida en el recurso del ejemplo anterior.

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

Para establecer la visibilidad y evitar el desplazamiento horizontal de los detalles de fila

  1. Si fuera necesario, establezca la propiedad RowDetailsVisibilityMode en un valor DataGridRowDetailsVisibilityMode.

    De forma predeterminada, este valor se establece en VisibleWhenSelected. Puede establecerlo en Visible para mostrar los detalles de todas las filas o en Collapsed para ocultar los detalles de todas las filas.

  2. Si fuera necesario, establezca la propiedad AreRowDetailsFrozen en true para evitar que la sección de detalles de fila se desplace horizontalmente.