Tutoriales Silverlight. Parte 6: User Controls para implementar escenarios Maestro Detall...

Page 1 of 19

• Sobre el Blog
• Tutoriales
• Donaciones

16
Jul
08

Tutoriales Silverlight. Parte 6: User Controls para implementar escenarios

Maestro Detalle
por JeffersOn Escribir un Comentario
Categorías: Silverlight

Pueden 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:

http://jsantillan.wordpress.com/2008/07/16/tutoriales-silverlight-parte-6-user-controls-par... 15/08/2010
Tutoriales Silverlight. Parte 6: User Controls para implementar escenarios Maestro Detall... Page 2 of 19

Veremos algunos detalles:

http://jsantillan.wordpress.com/2008/07/16/tutoriales-silverlight-parte-6-user-controls-par... 15/08/2010
Tutoriales Silverlight. Parte 6: User Controls para implementar escenarios Maestro Detall... Page 3 of 19

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”

http://jsantillan.wordpress.com/2008/07/16/tutoriales-silverlight-parte-6-user-controls-par... 15/08/2010
Tutoriales Silverlight. Parte 6: User Controls para implementar escenarios Maestro Detall... Page 4 of 19

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:

http://jsantillan.wordpress.com/2008/07/16/tutoriales-silverlight-parte-6-user-controls-par... 15/08/2010
Tutoriales Silverlight. Parte 6: User Controls para implementar escenarios Maestro Detall... Page 5 of 19

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í:

http://jsantillan.wordpress.com/2008/07/16/tutoriales-silverlight-parte-6-user-controls-par... 15/08/2010
Tutoriales Silverlight. Parte 6: User Controls para implementar escenarios Maestro Detall... Page 6 of 19

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:

http://jsantillan.wordpress.com/2008/07/16/tutoriales-silverlight-parte-6-user-controls-par... 15/08/2010
Tutoriales Silverlight. Parte 6: User Controls para implementar escenarios Maestro Detall... Page 7 of 19

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:

http://jsantillan.wordpress.com/2008/07/16/tutoriales-silverlight-parte-6-user-controls-par... 15/08/2010
Tutoriales Silverlight. Parte 6: User Controls para implementar escenarios Maestro Detall... Page 8 of 19

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:

http://jsantillan.wordpress.com/2008/07/16/tutoriales-silverlight-parte-6-user-controls-par... 15/08/2010
Tutoriales Silverlight. Parte 6: User Controls para implementar escenarios Maestro Detall... Page 9 of 19

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:

http://jsantillan.wordpress.com/2008/07/16/tutoriales-silverlight-parte-6-user-controls-par... 15/08/2010
Tutoriales Silverlight. Parte 6: User Controls para implementar escenarios Maestro Det... Page 10 of 19

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

http://jsantillan.wordpress.com/2008/07/16/tutoriales-silverlight-parte-6-user-controls-par... 15/08/2010
Tutoriales Silverlight. Parte 6: User Controls para implementar escenarios Maestro Det... Page 11 of 19

Fijense 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:

http://jsantillan.wordpress.com/2008/07/16/tutoriales-silverlight-parte-6-user-controls-par... 15/08/2010
Tutoriales Silverlight. Parte 6: User Controls para implementar escenarios Maestro Det... Page 12 of 19

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

http://jsantillan.wordpress.com/2008/07/16/tutoriales-silverlight-parte-6-user-controls-par... 15/08/2010
Tutoriales Silverlight. Parte 6: User Controls para implementar escenarios Maestro Det... Page 13 of 19

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.

Artículo Original

Ads by Google
Mp3 Gratis
¡Descarga tus canciones favoritas con la Barra Gratis de Actualidad!
Musica.alot.com

http://jsantillan.wordpress.com/2008/07/16/tutoriales-silverlight-parte-6-user-controls-par... 15/08/2010
Tutoriales Silverlight. Parte 6: User Controls para implementar escenarios Maestro Det... Page 14 of 19

0 Respuestas a “Tutoriales Silverlight. Parte 6: User Controls para implementar escenarios

Maestro Detalle”

Feed para esta Entrada Dirección de Trackback

1. Dejar un comentario

Deja un comentario

Nombre

Correo electrónico

Sitio Web

Enviar

Recibir siguientes comentarios por correo.

Recibir nuevas entradas por email.

« Tutorial Silverlight. Parte 5: ListBox y DataBinding para listar datos.

Tutoriales Silverlight. Parte 7: Templates de User Controls para personalizar el Look & Feel »

Visitas
• 32,207 hits

http://jsantillan.wordpress.com/2008/07/16/tutoriales-silverlight-parte-6-user-controls-par... 15/08/2010
Tutoriales Silverlight. Parte 6: User Controls para implementar escenarios Maestro Det... Page 15 of 19

Autor

• JeffersOn

Suscribirse a RSS

Con mi Código de afiliado

logras beneficios para ambos! recibirán el 80% de revenue share (en lugar del 60%).

Entradas recientes
• Microsoft® Silverlight™ Tools para Visual Studio 2008 SP1 (RC1)
• Windows Live Tools para Visual Studio
• Las 10 cosas que más fastidian a los programadores
• Repair My Word
• Motorola también apuesta por Android

Posts Más Vistos

• Reino Unido prohíbe un anuncio del iPhone por publicidad engañosa

Categorías
• .NET Framework (1)
• ADO.NET Data Services (5)
• AJAX (1)
• Android (2)

http://jsantillan.wordpress.com/2008/07/16/tutoriales-silverlight-parte-6-user-controls-par... 15/08/2010
Tutoriales Silverlight. Parte 6: User Controls para implementar escenarios Maestro Det... Page 16 of 19

• ASP.NET (1)
• C# (1)
• Enterprise Library (1)
• Google (2)
• Humor (5)
• Ineta LATAM (1)
• Internet (2)
• LINQ (3)
• Microsoft Popfly (1)
• Microsoft Robotics Studio (4)
• Microsoft Surface (1)
• Microsoft Touch Wall (2)
• Microsoft Volta (1)
• Noticias (23)
• Otros (23)
• Recursos (15)
• Robots (1)
• Silverlight (21)
• TrueSpace (1)
• Visual Studio 2008 (1)
• WebCasts (6)
• Windows Live (5)
• Windows Server 2008 (1)
• XNA (1)
• Zune (8)

Afiliados

Blogroll
• Comunidades Andinas
• El Ave Fenix
• El Guille
• Mentores

Blogs Amigos
• BlackOut360
• CanYouHearTheBits
• elChelo

http://jsantillan.wordpress.com/2008/07/16/tutoriales-silverlight-parte-6-user-controls-par... 15/08/2010
Tutoriales Silverlight. Parte 6: User Controls para implementar escenarios Maestro Det... Page 17 of 19

Publicidad

Últimos comentarios
• DejavuMaster en 101 Ejemplos de LINQ
• Amateratsu en 10 razones para salir con un geek
• kenda en 10 razones para salir con un geek
• . : elChelo en Microsoft® Silverlight™ Tools para Visual Studio 2008 SP1 (RC1)
• Jeff en Firefox ocupa demasiada memoria

Enlaces Microsoft

http://jsantillan.wordpress.com/2008/07/16/tutoriales-silverlight-parte-6-user-controls-par... 15/08/2010
Tutoriales Silverlight. Parte 6: User Controls para implementar escenarios Maestro Det... Page 18 of 19

http://jsantillan.wordpress.com/2008/07/16/tutoriales-silverlight-parte-6-user-controls-par... 15/08/2010
Tutoriales Silverlight. Parte 6: User Controls para implementar escenarios Maestro Det... Page 19 of 19

Archivos
• Octubre 2008 (12)
• Septiembre 2008 (4)
• Agosto 2008 (31)
• Julio 2008 (27)
• Junio 2008 (64)

Blog de WordPress.com. | Theme: Redoable Lite by Dean J Robinson.

http://jsantillan.wordpress.com/2008/07/16/tutoriales-silverlight-parte-6-user-controls-par... 15/08/2010