Parte 6: User Controls para implementar escenarios Maestro Detalle

Este es el sexto de ocho tutoriales en el que estamos creando un cliente de Digg con la Beta 1 de Silverlight 2. La idea es que estos tutoriales se lean en orden, con el objetivo de explicar los fundamentos de la programación con Silverlight.

Podéis descargar el código completo del cliente Digg del ejemplo aquí

Comprendiendo los User Controls

Uno de los fines principales en el diseño de Silverlight y WPF es permitir a los desarrolladores encapsular la funcionalidad de la interfaz gráfica en user controls reutilizables. Podemos crear controles personalizados heredando de cualquier clase existente Control (tanto de la clase base Control como de TextBox, Button, etc). Otra forma es crear User Controls – que hacen más sencillo el uso del lenguaje XAML, y son más fáciles de implementar.

Para la aplicación que estamos desarrollando, queremos implementar un escenario Maestro/Detalle en el que la aplicación permita a los usuarios buscar, obtener una lista de historias relacionadas con la búsqueda, y permitirles seleccionar una para ver los detalles. Por ejemlpo, si seleccionamos una historia de la lista:

Veremos algunos detalles:

Vamos a implementar esto creando un user control “StoryDetailsView” que mostrará el contenido cuando se seleccione un elemento de nuestro ListBox.

Creación del user control StoryDetailsView

Empezamos haciendo clic derecho en el proyecto DiggSample y seleccionamos “Add New Item”. Esto nos mostrará una ventana de diálogo. Seleccionamos el template UserControl y le daremos el nombre “StoryDetailsView”

De esta forma hemos añadido un User Control con este nombre al proyecto DiggSample:

Crear un diálogo modal básico con un UserControl

Usaremos este control para mostrar en un diálogo los detalles del elemento seleccionado. Cuando se muestran esos detalles queremos que aparezca encima del contenido de la página, y queremos asegurarnos de que el usuario no puede hacer otras cosas en la página hasta que no cierre esos detalles.

Hay un par de formas de implementar este comportamiento. Para nuestro caso  abrimos el archivo StoryDetailsView.xaml y añadimos el siguiente contenido:

El control <Rectangle> está configurado para que ocupe todo el espacio en la pantalla. El color de fondo es un gris transparente (su opacidad es 7.65 como podéis ver). El control <Border> será pintado encima del control Rectángulo, y ocupará una parte de la pantalla. El color de fondo es azul y contiene un botón de cerrar.

Cuando es visible, el user control StoryDetailsview se mostrará así:

Implementaremos el código del evento “CloseBtn_Click” en el código trasero. Cuando se presione, este evento pondrá la Visibilidad del UserControl a “Collapsed” – lo que lo hará desaparecer de la pantalla y volveremos a ver el contenido de detrás:

Mostrando el control StoryDetailsView

Una forma sencilla de hacer aparecer el control StoryDetailsView sería añadirlo al final del archivo Page.xaml, y poner su visibilidad por defecto en Collapsed (lo que significa que no es visible cuando se carga por primera vez la aplicación):

Y ahora podemos trabajar con el evento “SelectionChanged” el control ListBox en el código trasero:

Cuando un usuario seleccione un elemento de la lista, podemos usar este evento parhacer que el user control ShowDetailsView se muestre:

Esto hará que se muestre el diálogo modal. Cuando se haga clic en el boton “Close” desaparacerá, volviendo a mostrar la lista de historias.

Pasando los datos de la historia al control StoryDetailsView

Por último queremos mostrar en el user control StoryDetailsView los detalles de la información que tiene la historia que hemos seleccionado en el ListBox.

En el evento “SelectionChanged” del list box podemos acceder al objeto DiggStory que hemos seleccionado  a través de la propoiedad “SelectedItem”.

La forma más sencilla para acceder a esos datos sería poner la propiedad “DataContext” del user control al objeto que se ha seleccionado antes de hacer que el control sea visible:

Ahora podemos escribir el el código necesario para mostrar esos datos en el user control. O usar expresiones de databinding.

Por ejemplo, podemos actualizar el xaml de StoryDetailsView para mostrar el título de la historia con la siguiente expresion:

Y ahora cuando se haga clic en una historia:

El evento de selección, pondrá el DataContext del user control al objeto DigStory seleccionado, y luego lomostrará:

Fijáos que ahora aparece el título del elemento que hemos seleccionado.

Terminando el aspecto del user control

Ya hemos visto cómo hacer de manera simple un maestro/detalle. Para terminarlo añadiremos más controles al StoryDetailsView y más expresiones de databinding:

Podemos actualizar el user control StoryDetailsView para que sea igual que el anterior actualizando el control <Border> de la siguiente manera:

No hace falta cambiar el código después de esto. Ya que estamos usando las expresiones de databinding para obtener los valores del DataContext.

 

Traducido por: Juan María Laó Ramos.

Artículo Original