ListView, TreeView y DataGrid en WPF

ListView deriva de ListBox y agrega la propiedad View. Si no se establece View, se comporta como un ListBox. La propiedad View apunta a una instancia de una clase derivada de ViewBase, que define estilos para el control y sus elementos.

Creación de múltiples columnas con GridView

GridView, derivado de ViewBase, permite definir listas con varias columnas mediante objetos GridViewColumn en su colección Colums. Para cada columna, se configuran Header y DisplayMemberBinding para mostrar datos específicos.

<ListView Margin="8" Name="productoList">
  <ListView.View>
    <GridView>
      <GridView.Columns>
        <GridViewColumn Header="Nombre"
         DisplayMemberBinding="{Binding Path=NombreProducto}" />
        <GridViewColumn Header="ID"
         DisplayMemberBinding="{Binding Path=Identificador}" />
        <GridViewColumn Header="Precio" DisplayMemberBinding=
"{Binding Path=Costo, StringFormat={}{0:C}}" />
      </GridView.Columns>
    </GridView>
  </ListView.View>
</ListView>

Ajuste del ancho de columnas

Se puede establecer un ancho inicial para las columnas, pero los usuarios pueden redimensionarlas. Para bloquear el redimensionamiento, se usan propiedades como CanUserResizeColumns.

Uso de plantillas de celda

CellTemplate permite definir plantillas de datos personalizadas para columnas, como aplicar ajuste de texto o mostrar imágenes.

<GridViewColumn Header="Descripción" Width="300">
  <GridViewColumn.CellTemplate>
    <DataTemplate>
      <TextBlock Text="{Binding Path=Detalle}" TextWrapping="Wrap"/>
    </DataTemplate>
  </GridViewColumn.CellTemplate>
</GridViewColumn>

TreeView

TreeView soporta enlace de datos jerárquico, con TreeViewItem que actúan como controles de elementos independientes.

Creación de un árbol con enlace de datos

Se usan plentillas jerárquicas para definir la relación entre niveles de datos, como categorías y productos.

<TreeView Name="arbolCategorias" Margin="8">
  <TreeView.ItemTemplate>
    <HierarchicalDataTemplate ItemsSource="{Binding Path=Productos}">
      <TextBlock Text="{Binding Path=NombreCategoria}" />
      <HierarchicalDataTemplate.ItemTemplate>
        <DataTemplate>
          <TextBlock Text="{Binding Path=NombreModelo}" />
        </DataTemplate>
      </HierarchicalDataTemplate.ItemTemplate>
    </HierarchicalDataTemplate>
  </TreeView.ItemTemplate>
</TreeView>

Plantillas basadas en tipo de datos

Se pueden definir plantillas jerárquicas en recursos para aplicar automáticamente según el tipo de datos enlazado, facilitando la visualización de estructuras complejas.

DataGrid

DataGrid muestra datos en una cuadrícula de filas y columnas, con soporte para selección, edición y formato.

Generación automática de columnas

Al establecer AutoGenerateColumns en true, DataGrid crea columnas usando reflexión en las propiedades públicas del origen de datos.

<DataGrid x:Name="gridProductos" AutoGenerateColumns="True">
</DataGrid>

Definición manual de columnas

Con AutoGenerateColumns en false, se definen columans explícitamente, como DataGridTextColumn para datos de texto.

<DataGrid x:Name="gridProductos" Margin="8" AutoGenerateColumns="False">
  <DataGrid.Columns>
    <DataGridTextColumn Header="Artículo" Width="180"
     Binding="{Binding Path=NombreArticulo}"/>
    <DataGridTextColumn Header="Costo"
     Binding="{Binding Path=PrecioUnitario}"/>
  </DataGrid.Columns>
</DataGrid>

Tipos de columnas

DataGrid ofrece varios tipos de columnas: DataGridTextColumn para texto, DataGridCheckBoxColumn para booleanos, DataGridHyperlinkColumn para enlaces, DataGridComboBoxColumn para listas desplegables y DataGridTemplateColumn para plantillas personalizadas.

Formato y estilo de columnas

Se usan propiedades como ElementStyle para aplicar estilos a elementos internos, como permitir ajuste de texto en columnas.

<DataGridTextColumn Header="Detalle" Width="400"
 Binding="{Binding Path=Descripcion}">
  <DataGridTextColumn.ElementStyle>
    <Style TargetType="TextBlock">
      <Setter Property="TextWrapping" Value="Wrap"/>
    </Style>
  </DataGridTextColumn.ElementStyle>
</DataGridTextColumn>

Detalles de fila

RowDetailsTemplate define contenido adicional mostrado al seleccionar una fila, como descripciones extendidas.

<DataGrid.RowDetailsTemplate>
  <DataTemplate>
    <Border Margin="10" Padding="10" BorderBrush="SteelBlue" BorderThickness="3"
     CornerRadius="5">
      <TextBlock Text="{Binding Path=Descripcion}" TextWrapping="Wrap"
       FontSize="10"/>
    </Border>
  </DataTemplate>
</DataGrid.RowDetailsTemplate>

Edición y validación

DataGrid soporta edición en celda con controles apropiados según el tipo de columna, y permite validación mediante reglas de enlace de datos.

<DataGridTextColumn Header="Precio">
  <DataGridTextColumn.Binding>
    <Binding Path="CostoUnitario" StringFormat="{}{0:C}">
      <Binding.ValidationRules>
        <local:ReglaPrecioPositivo Max="999.99"/>
      </Binding.ValidationRules>
    </Binding>
  </DataGridTextColumn.Binding>
</DataGridTextColumn>

Los eventos como CellEditEnding y RowEditEnding facilitan la validación y cancelación de ediciones.

Etiquetas: WPF ListView TreeView DataGrid XAML

Publicado el 6-20 00:51