Otro control fundamental para el desarrollo de aplicaciones universales para Windows es el ListView.
Un ListView muestra una lista de items(cada item de la lista puede estar compuesto por varios controles visuales) y nos permite interactuar con sus elementos (seleccionarlos, borrarlos, reordenarlos etc.)
El control ListView está optimizado para su uso en dispositivos táctiles como también en dispositivos con mouse.
Problema
Implementar una aplicación que muestre en un ListView los nombres de países sudamericanos y la cantidad de habitantes que tiene. Cuando el operador seleccione uno mostrarlo en un TextBlock que se ubica en la parte inferior.
Como primer paso creamos un nuevo proyecto llamado "Proyecto21" seleccionando desde el menú de opciones del Visual Studio: Archivo -> Nuevo -> Proyecto.
El ListView dijimos que tiene por objetivo mostrar una lista de elementos, en nuestro problema cada elemento de la lista tendrá dos datos a mostrar: el nombre del país y su cantidad de habitantes.
Crearemos una clase Pais que tenga dos propiedades (Nombre y CantidadHabitantes).
Para crear una nueva clase con el Visual Studio vamos al menú de opciones: Proyecto -> Agregar nuevo elemento...
En este diálogo seleccionamos "Clase" e indicamos el nombre del archivo a crear "Pais.cs":
Ahora en este archivo procedemos a implementar la clase Pais:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
namespace Proyecto21
{
class Pais
{
public string Nombre { get; set; }
public int CantidadHabitantes { get; set; }
}
}
Ahora implementamos el archivo MainPage.xaml:
<Page
x:Class="Proyecto21.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:Proyecto21"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="70" />
</Grid.RowDefinitions>
<ListView x:Name="listView1" Grid.Row="0" IsItemClickEnabled="True">
<ListView.ItemTemplate>
<DataTemplate>
<StackPanel>
<TextBlock Text="{Binding Nombre}" FontSize="20" />
<TextBlock Text="{Binding CantidadHabitantes}" FontSize="10" />
</StackPanel>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
<StackPanel Grid.Row="1" Background="LightSalmon" Orientation="Horizontal">
<TextBlock Text="Nombre:" FontSize="24" Margin="20,0,20,0" />
<TextBlock x:Name="textBox1" FontSize="24" FontWeight="Bold" Margin="20,0,0,0" />
</StackPanel>
</Grid>
</Page>
En la definición del ListView definimos un Name para hacer referencia en el código C# para enlazar los datos:
<ListView x:Name="listView1" Grid.Row="0" IsItemClickEnabled="True">
Cada item de la lista se muestra mediante TextBlock y los enlazamos con las propiedades de la clase Pais:
<StackPanel>
<TextBlock Text="{Binding Nombre}" FontSize="20" />
<TextBlock Text="{Binding CantidadHabitantes}" FontSize="10" />
</StackPanel>
En el archivo MainPage.xaml.cs tenemos:
using System;
using System.Collections.Generic;
using System.Collections.ObjectModel;
using System.IO;
using System.Linq;
using System.Runtime.InteropServices.WindowsRuntime;
using Windows.Foundation;
using Windows.Foundation.Collections;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Controls.Primitives;
using Windows.UI.Xaml.Data;
using Windows.UI.Xaml.Input;
using Windows.UI.Xaml.Media;
using Windows.UI.Xaml.Navigation;
// La plantilla de elemento Página en blanco está documentada en https://go.microsoft.com/fwlink/?LinkId=402352&clcid=0xc0a
namespace Proyecto21
{
/// <summary>
/// Página vacía que se puede usar de forma independiente o a la que se puede navegar dentro de un objeto Frame.
/// </summary>
public sealed partial class MainPage : Page
{
private ObservableCollection<Pais> paises = new ObservableCollection<Pais>();
public MainPage()
{
this.InitializeComponent();
cargarListView();
}
private void cargarListView()
{
paises.Add(new Pais { Nombre = "Argentina", CantidadHabitantes = 40000000 });
paises.Add(new Pais { Nombre = "Chile", CantidadHabitantes = 17000000 });
paises.Add(new Pais { Nombre = "Bolivia", CantidadHabitantes = 10000000 });
paises.Add(new Pais { Nombre = "Perú", CantidadHabitantes = 30000000 });
paises.Add(new Pais { Nombre = "Ecuador", CantidadHabitantes = 16000000 });
paises.Add(new Pais { Nombre = "Paraguay", CantidadHabitantes = 7000000 });
paises.Add(new Pais { Nombre = "Uruguay", CantidadHabitantes = 3000000 });
paises.Add(new Pais { Nombre = "Brasil", CantidadHabitantes = 200000000 });
paises.Add(new Pais { Nombre = "Venezuela", CantidadHabitantes = 30000000 });
paises.Add(new Pais { Nombre = "Colombia", CantidadHabitantes = 48000000 });
paises.Add(new Pais { Nombre = "Surinam", CantidadHabitantes = 500000 });
paises.Add(new Pais { Nombre = "Guyana", CantidadHabitantes = 800000 });
paises.Add(new Pais { Nombre = "Guyana Francesa", CantidadHabitantes = 250000 });
listView1.ItemsSource = paises;
}
}
}
Definimos un atribulo llamado paises de la clase ObservableCollection con elementos de tipo Pais:
private ObservableCollection<Pais> paises = new ObservableCollection<Pais>();
Para poder definir un objeto de la clase ObservableCollection debemos importar el espacio de nombres:
using System.Collections.ObjectModel;
En el constructor llamamos al método cargarListView:
public MainPage()
{
this.InitializeComponent();
cargarListView();
}
En el método cargarListView procedemos a crear objetos de la clase Pais e insertarlos en el objeto paises:
private void cargarListView()
{
paises.Add(new Pais { Nombre = "Argentina", CantidadHabitantes = 40000000 });
paises.Add(new Pais { Nombre = "Chile", CantidadHabitantes = 17000000 });
paises.Add(new Pais { Nombre = "Bolivia", CantidadHabitantes = 10000000 });
paises.Add(new Pais { Nombre = "Perú", CantidadHabitantes = 30000000 });
paises.Add(new Pais { Nombre = "Ecuador", CantidadHabitantes = 16000000 });
paises.Add(new Pais { Nombre = "Paraguay", CantidadHabitantes = 7000000 });
paises.Add(new Pais { Nombre = "Uruguay", CantidadHabitantes = 3000000 });
paises.Add(new Pais { Nombre = "Brasil", CantidadHabitantes = 200000000 });
paises.Add(new Pais { Nombre = "Venezuela", CantidadHabitantes = 30000000 });
paises.Add(new Pais { Nombre = "Colombia", CantidadHabitantes = 48000000 });
paises.Add(new Pais { Nombre = "Surinam", CantidadHabitantes = 500000 });
paises.Add(new Pais { Nombre = "Guyana", CantidadHabitantes = 800000 });
paises.Add(new Pais { Nombre = "Guyana Francesa", CantidadHabitantes = 250000 });
listView1.ItemsSource = paises;
}
Es importante la última línea del método donde enlazamos el listView1 con el objeto paises:
listView1.ItemsSource = paises;
Ya tenemos funcionando el ListView (sin la captura del Clic de los items):
Para capturar la selección de un item del ListView debemos implementar el evento ItemClick en el ListView:
<ListView x:Name="listView1" Grid.Row="0" IsItemClickEnabled="True" ItemClick="ListView1_ItemClick">
Y en la clase MainPage el método ListView_ItemClick debe ser:
private void ListView1_ItemClick(object sender, ItemClickEventArgs e)
{
Pais pais = (Pais)(e.ClickedItem);
textBox1.Text = pais.Nombre + "(" + pais.CantidadHabitantes + ")";
}
El resultado final de la aplicación es:
Este proyecto lo puede descargar en un zip desde este enlace :Proyecto21.zip