[Windows 8] ListView & ListBox

Posted on Actualizado enn


Artículo escrito por: Néstor Fernández.

Twitter: @xamlparaadeptos

Son controles de selección que presentan (apilan) controles o una lista de datos, un elemento bajo el otro, y que opcionalmente permiten al usuario seleccionar uno o varios de estos elementos.

Ambos controles, el ListView y el ListBox, organizan la información de la misma forma y su comportamiento es casi el mismo. Por lo tanto es bueno que tengamos presentes algunas pocas y sutiles diferencias al momento de seleccionar el más adecuado:

  • El ListBox se conserva en Metro-XAML por compatibilidad con el código XAML existente para Silverlight y WPF. Al migrar nuestras aplicaciones a Metro-XAML podremos conservar los controles ListBox.
  • Con un ListView se obtiene la misma funcionalidad de ListBox, y un poco más. Esto es, siempre que tengamos que elegir entre un ListBox y un ListView, es preferible utilizar el ListView.
  • El ListView está optimizado para aprovechar la apariencia y comportamiento esperado de una aplicación Metro. Para el caso del ListView se implementan temas, inercia, snap grid, entre otros.

El ListView, el ListBox y todos los controles que pueden presentar lista de datos cuentan con la propiedad ItemsSource, a la cual se le asigna una colección que contenga los datos a presentar.

Funcionalidad

Además de presentar una lista de cosas apiladas, con un ListBox y un ListView se obtienen algunas funcionalidades extra, por ejemplo:

Arrastrar Elementos (solamente en ListView)

Al establecer la propiedad "CanDragItems" en True, el usuario puede arrastrar elementos desde el ListView hacia otras partes de la interfase, una suerte de Arrastrar y Soltar (Drag & Drop). No sobra decir que esta funcionalidad requiere código adicional que valide y finalice dicha operación, sin embargo, el arrastre ya está implementado.

Reordenar Elementos (ListView y ListBox)

Esta operación permite al usuario arrastrar un elemento de la lista y ubicarlo en otra posición de la misma. Implementarlo en un ListBox requiere algo de código, sin embargo, el ListView alimentado, por ejemplo, con un ObservableCollection implementa toda esta funcionalidad sin código:

   1:  <ListView
   2:    CanReorderItems="True"
   3:    AllowDrop="True"
   4:    ...

Los Elementos y Controles (ListView y ListBox)

Aunque por comodidad estos controles pueden alimentarse desde una lista de datos (propiedad "ItemsSource") también es posible utilizarlos para presentar un grupo de controles agregándolos a la propiedad "Items".

La Selección (ListView y ListBox)

Ambos controles permiten seleccionar uno o varios elementos de su lista. Este comportamiento se especifica a través de la propiedad "SelectionMode". Sin embargo, al querer presentar una lista de solo lectura de modo que el usuario no pueda seleccionar algo de ella, solo el ListView puede hacerlo: SelectionMode="None".

Se puede acceder al elemento seleccionado por medio de la propiedad "SelectedItem", o, de haber más de un elementos seleccionado, por la propiedad "SelectedItems" que es una colección.

Plantilla para los Items (ListView y ListBox)

Todos los controles que presentan listas de datos cuentan con la propiedad "ItemsTemplate", que define la plantilla (del tipo DataTemplate) que debe utilizarse para presentar cada uno de los datos.

Desplazamiento (ListView y ListBox)

Si la lista de los elementos que se presentan no cabe completamente dentro del ListView o del ListBox, automáticamente se activa una barra de desplazamiento (ScrollViewer) que le permite al usuario desplazarse para poder observar todos los elementos.

Ejemplo 1

Aquí un ListView presenta una lista de datos que se alimenta con la colección disponible en el DataContext ("{Binding})", utiliza la plantilla "dtDatos" para presentar cada elemento y permite al usuario reorganizar los elementos dentro de al lista.

   1:  <ListView
   2:    CanReorderItems="True"
   3:    AllowDrop="True"
   4:    ItemsSource="{Binding}"
   5:    ItemTemplate="{StaticResource dtDatos}" />

Ejemplo 2

Aun un ListBox presenta una lista de datos que se alimenta con la colección disponible en el DataContext ("{Binding})", utiliza la plantilla "dtDatos" para presentar cada elemento y permite al usuario seleccionar más de un elemento ("Extended").

   1:  <ListBox 
   2:    SelectionMode="Extended"
   3:    ItemsSource="{Binding}"
   4:    ItemTemplate="{StaticResource dtDatos}"
   5:    Grid.Column="1" />

3 comentarios sobre “[Windows 8] ListView & ListBox

    Resumen Post 2012 « Todo en ASP.NET escribió:
    12/19/2012 en 22:05

    […] [Windows 8] ListView & ListBox […]

    Ruddy Cruceta escribió:
    10/14/2013 en 15:42

    Como estas Mi Hermano Julio espero que bien tengo un problema haber si me podias ayudar estoy trabajando en un proyecto y necesito hacer un ListView y poder reordenar los items que ese ListView tenga dentro. Saludos!!!!

    Ruddy Cruceta escribió:
    10/14/2013 en 15:47

    Si tienes algun ejemplo te lo voy ha agradecer mucho estoy trabajando con MVC 4

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s