Compartir a través de

Cómo: Agregar detalles de fila a un control DataGrid

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

DataGrid se muestra con detalles de fila

Se define la plantilla de detalles de fila como XAML en línea o como un recurso. Ambos enfoques se muestran en los procedimientos siguientes. 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 datos desde un origen de datos.

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

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

    El siguiente código XAML muestra el DataGrid y cómo definir el RowDetailsTemplate de forma interna. 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 usando un recurso

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

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

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

    En el código XAML siguiente se muestra el RowDetailsTemplate definido en la Application clase .

    <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. DataTemplateEn , establezca la directiva x:Key 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 RowDetailsTemplate propiedad 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 las filas

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

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

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