UserControls en Windows Phone 8

Esta vez les mostraré como hacer uso de los UserControl o controles de usuario en Windows Phone, para empezar definamos qué son y sus posibles usos:





Un UserControl es una "parte de la interfaz" que podemos diseñar con xaml, tal cómo lo haríamos en cualquier página, y usar varias veces en nuestro proyecto.
Un ejemplo puede ser una noticia, por cada noticia que queramos mostrar, creamos una instancia de nuestro UserControl y lo agregamos a nuestra página.

Para demostrar su uso, crearemos una lista de "tuits", que en realidad sólo serán con strings predefinidos, mi intensión en esta ocasión no es usar APIs ni nada por el estilo.

Ahora sí, creemos un nuevo proyecto en Visual Studio, yo crearé uno de Windows Phone 8 con Visual Studio Express 2012 for Windows Phone:

Le llamé UserControls, recuerden crear el proyecto con C# para que les sea más fácil seguirme.

Ok, ahora limpiemos y organicemos un poco las cosas, lo que hice fue eliminar comentarios del MainPage.xaml y el MainPage.xaml.cs, que para este proyecto no nos son útiles.

Y la acción comienza de la siguiente manera.
Dando click derecho en nuestro proyecto (UserControls) vamos a la opción de agregar, nuevo elemento y seleccionamos Windows Phone UserControl:

Y se crea algo como esto:

Cómo pueden ver, la estructura es muy parecida a la de una página común. Ahora comencemos el diseño.

Podemos agregar cualquier elemento, cómo en el xaml de una página:

Ok, lo que hice fue, además de demostrar que no se diseñar, cambiar el alto y ancho del control a 150 y 420 respectivamente, esto es sólo el espacio que ocupará cada "tuit" en la página. Posteriormente cambié el fondo del grid a gris oscuro, simplemente para que se vea la separación de cada tuit.

Dentro del grid agregué un stackPanel para apilar los elementos que defina dentro; definí un fondo diferente al del grid y un margen superior para denotar la separación con un posible tuit superior. Entiendo que el diseño puede ser mejor, simple demostración(:

Ahora, dentro del stackPanel definí dos TextBlocks, les asigné su nombre y un texto de ejemplo para verificar que el diseño vaya saliendo como lo planeo. No olviden establecer la propiedad TextWrapping del TextBlock de contenido a "Wrap", de esta forma, el texto que ya no quepa en una línea se escribirá en la siguiente.

Muy bien, hemos terminado el diseño de nuestro control de usuario, ahora codifiquemos un poco.
Navegaremos al TuitControl.xaml.cs, ahí obtendremos valores y asignaremos a los TextBlock:

Ok, definí dos propiedades (me ayudé del atajo provisto por Visual Studio "propfull"), una para cada TextBlock. username recibirá un valor y luego lo asignará a la propiedad Text de txtUserName. contenido hará lo propio con txtContenido.

Ahora vayamos al MainPage.xaml

Bien, eso fue fácil, lo único que hice fue agregar un ListBox sl grid "ContentPanel" y dentro un StackPanel; el  StackPanel nos permitirá apilar, uno tras otro, cada TuitControl que agreguemos a él (pequeño spoiler), y el listbox permitirá el scroll.

Ahora, el paso final, navegar al MainPage.xaml.cs y hacer lo siguiente:

Definamos un string[] dentro de la clase, luego, en el constructor, estableceremos su tamaño en 10 y asignaremos valores, de nuevo, puede haber mejores formas de hacer esto, work with me, esto es una demostración que espero sirva para los más novatos, algo así como estaba yo hace menos de un mes(:

Ahora creamos un método que nos "cargue" los tuits y los agregue a la interfaz. Con ayuda de un ciclo for crearé un TuitControl por cada mensaje en el string[] mensajes. A sus propiedades Username y Contenido les asignaré valores, los cuales a su vez, si recuerdan el TuitControl.xaml.cs, se asignarán a los TextBlocks.
Al final, agregaré cada uno de esos TuitControls al StackPanel "stackTuits" que se encuentra en el MainPage.xaml.

Cuando corran la aplicaciónm deberán tener algo como esto.
Y listo. Puedes descargar el proyecto desde aquí.

"Here, go nuts." -Ross Geller