DESARROLLADOR

Windows Phone 7: enlazar datos personalizados de ListBox

app final listEl aspecto final que queremos.

En un artículo anterior de Windows Phone, analizamos cómo personalizar el elemento de estilo ListBox para que contenga widgets de interfaz. Esta vez, daremos un paso atrás y comenzaremos a personalizar los datos que se muestran.

Primero, cree una aplicación Panorama predeterminada, o puede usar o reciclar el código del artículo anterior. Voy a volver a usar el mismo código base que el artículo anterior.

El cuadro de lista que deseo personalizar es el que está debajo del encabezado «Segundo elemento» y contiene los elementos «Tiempo de ejecución uno» a «Tiempo de ejecución dieciséis» con cuadrados rojos junto a ellos. El resultado final será una lista de direcciones URL que inician una sesión de Internet Explorer cuando se selecciona un elemento.

Para que podamos manipular ListBox en el archivo de código subyacente (MainPage.xaml.cs para MainPage.xaml) que contiene el código C#, debemos proporcionar ListBox con una propiedad Name en su declaración XAML. Elegí un nombre poco imaginativo «SecondLB».

No debería sorprendernos saber que los ListBoxes tratan con listas. Entonces, para agregar cualquier dato que queramos al ListBox, solo necesitamos crear la lista que queremos y establecerla como ItemsSource del ListBox. Dado que estamos mostrando una lista de sitios web, estaría bien una lista rápida de objetos personalizados que almacenen detalles de los sitios web.

El objeto personalizado se llama sitio y se ve así:

Sitio web de clase abierta

{

public String nombre { obtener; poner; }

Uri Url pública {obtener; poner;}

public String describe { obtener; poner; }

Uri público ImageUrl {obtener; poner;}

sitio web público (nombre de cadena, URL de Uri, descripción de cadena, URL de imagen de Uri)

{

este.Nombre = nombre;

esta.url = url;

this.Description = descripción;

this.ImageUrl = imageurl;

}

}

Ahora completemos ListBox cuando se cargue MainPage, lo que hacemos agregando al método MainPage_Loaded:

la lista sitio = nueva lista();

sitio.Añadir(

nuevo sitio (

«Google»,

El nuevo Uri («

«Motores de búsqueda y publicidad»,

El nuevo Uri («

)

);

sitio.Añadir(

nuevo sitio (

«Microsoft»,

El nuevo Uri («

«Ellos hicieron esto»,

El nuevo Uri («

)

);

sitio.Añadir(

nuevo sitio (

«vincular por código»,

El nuevo Uri («

«Blog»,

El nuevo Uri («

)

);

sitio.Añadir(

nuevo sitio (

«manzana»,

El nuevo Uri («

«Una empresa de confianza»,

El nuevo Uri («

)

);

SecondLB.ItemsSource = sitio;

Si ejecutamos la aplicación en el simulador, verá que el ListBox está vacío excepto por el cuadrado rojo. Esto es el resultado de configurar ItemsSource, pero no declarar qué propiedades XML de cada objeto del sitio web debe mostrar ListBox.

Reparar elementos de TextBlock es fácil. Cambie los enlaces de LineOne y LineTwo a Name y Description respectivamente.


Es un pequeño truco para reemplazar los cuadrados rojos con imágenes de cada sitio web. Para cargar una imagen desde una URL, necesitamos crear una BitmapImage y cargar la URL en su propiedad UriSource. Este BitmapImage está contenido en la propiedad Source de la imagen normal. Dado que el objeto del sitio web almacena la URL de la imagen que deseamos usar en su propiedad ImageUrl, solo necesitamos crear el enlace correcto:

Cuando ejecutamos la aplicación ahora, el sitio web se muestra correctamente.

Siempre puede cambiar el título «Segundo elemento» en el segundo PanoramaItem a «Sitio» o cualquier otro que considere adecuado.

Una vez que haya seleccionado su sitio, es hora de abrir Internet Explorer. Agregue a la declaración ListBox XAML:

SelectionChanged=»SecondLB_SelectionChanged»

Esto llamará al método SecondLB_SelectionChanged siempre que el usuario seleccione un elemento en ListBox.

En C#, tomaremos el elemento seleccionado listBox.SelectedItem, lo convertiremos en nuestro objeto de sitio web y lo pasaremos a Internet Explorer a través de la clase WebBrowserTask en el espacio de nombres Microsoft.Phone.Tasks.

vacío privado SecondLB_SelectionChanged (remitente del objeto, SelectionChangedEventArgs e)

{

ListBox listBox = remitente como ListBox;

if (cuadro de lista! = nulo && cuadro de lista. Elemento seleccionado! = nulo)

{

Sitio sItem = (sitio) listBox.SelectedItem;

WebBrowserTask webBrowserTask = new WebBrowserTask();

webBrowserTask.Uri = sItem.Url;

webBrowserTask.Show();

}

}

ie render bugNo deben existir espacios en blanco debajo del contenido.

Ahora, cuando ejecutamos la aplicación, los sitios individuales se cargan en una instancia completa de Internet Explorer como se esperaba.

A veces, hay un error que pinta el menú y la barra de direcciones de Internet Explorer como bloques blancos. El pensamiento actual es que esto se debe a que se adjunta el depurador, que dibuja correctamente cuando no está en uso.

Al cargar un sitio en IE y presionar el botón Atrás para regresar a nuestro programa, notará que si selecciona el mismo sitio nuevamente, no se cargará. Esto se debe a que ListBox recuerda la selección que realizó al iniciar WebBrowserTask. Dado que nuestro detector de eventos está vinculado al evento SelectionChanged y la selección no ha cambiado, el evento no se activa.

Todo lo que se necesita es una solución simple. Cuando el usuario presiona el botón Atrás de IE y regresa a nuestra aplicación, llama al método Page.OnNavigatedTo. Si establecemos el índice seleccionado de los ListBoxes en negativo, podemos volver a seleccionar el mismo elemento cuando regresemos a la página.

anulación protegida void OnNavigatedTo (NavigationEventArgs e)

{

base.OnNavigatedTo(e);

SecondLB.IndiceSeleccionado = -1;

}

Y, aquí vamos, disfrute vinculando ListBoxes al contenido de su corazón.

LEER  El jefe de movilidad empresarial de IBM comparte más sobre la nueva aplicación iOS

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Botón volver arriba