Silverlight UserControls

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 Detallepor JeffersOn Escribir un Comentario Categoras: Silverlight Pueden descargar el cdigo completo del cliente Digg del ejemplo aqu Comprendiendo los User Controls Uno de los fines principales en el diseo de Silverlight y WPF es permitir a los desarrolladores encapsular la funcionalidad de la interfaz grfica 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 ms sencillo el uso del lenguaje XAML, y son ms fciles de implementar. Para la aplicacin que estamos desarrollando, queremos implementar un escenario Maestro/Detalle en el que la aplicacin permita a los usuarios buscar, obtener una lista de historias relacionadas con la bsqueda, 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


Veremos algunos detalles:



Vamos a implementar esto creando un user control StoryDetailsView que mostrar el contenido cuando se seleccione un elemento de nuestro ListBox. Creacin del user control StoryDetailsView Empezamos haciendo clic derecho en el proyecto DiggSample y seleccionamos Add New Item. Esto nos mostrar una ventana de dilogo. Seleccionamos el template UserControl y le daremos el nombre StoryDetailsView



De esta forma hemos aadido un User Control con este nombre al proyecto DiggSample:

Crear un dilogo modal bsico con un UserControl Usaremos este control para mostrar en un dilogo los detalles del elemento seleccionado. Cuando se muestran esos detalles queremos que aparezca encima del contenido de la pgina, y queremos asegurarnos de que el usuario no puede hacer otras cosas en la pgina hasta que no cierre esos detalles. Hay un par de formas de implementar este comportamiento. Para nuestro caso abrimos el archivo StoryDetailsView.xaml y aadimos el siguiente contenido:



El control 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 podis ver). El control ser pintado encima del control Rectngulo, y ocupar una parte de la pantalla. El color de fondo es azul y contiene un botn de cerrar. Cuando es visible, el user control StoryDetailsview se mostrar as:



Implementaremos el cdigo del evento CloseBtn_Click en el cdigo 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 detrs:



Mostrando el control StoryDetailsView Una forma sencilla de hacer aparecer el control StoryDetailsView sera aadirlo 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 aplicacin):

Y ahora podemos trabajar con el evento SelectionChanged el control ListBox en el cdigo 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 dilogo 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 informacin 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 travs de la propoiedad SelectedItem. La forma ms sencilla para acceder a esos datos sera 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 cdigo 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 ttulo de la historia con la siguiente expresion:

Y ahora cuando se haga clic en una historia:


Tutoriales Silverlight. Parte 6: User Controls para implementar escenarios Maestro Det... Page 10 of 19

El evento de seleccin, pondr el DataContext del user control al objeto DigStory seleccionado, y luego lomostrar:



Fijense que ahora aparece el ttulo del elemento que hemos seleccionado. Terminando el aspecto del user control Ya hemos visto cmo hacer de manera simple un maestro/detalle. Para terminarlo aadiremos ms controles al StoryDetailsView y ms expresiones de databinding:



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



No hace falta cambiar el cdigo despus de esto. Ya que estamos usando las expresiones de databinding para obtener los valores del DataContext. Artculo Original Ads by Google

Mp3 GratisDescarga tus canciones favoritas con la Barra Gratis de Actualidad! Musica.alot.com



0 Respuestas a Tutoriales Silverlight. Parte 6: User Controls para implementar escenarios Maestro Detalle Feed para esta Entrada Direccin de Trackback

1. Dejar un comentario Deja un comentarioNombre Correo electrnico 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



Autor

JeffersOn

Suscribirse a RSS

Con mi Cdigo de afiliado logras beneficios para ambos! recibirn 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 ms fastidian a los programadores Repair My Word Motorola tambin apuesta por Android

Posts Ms Vistos Reino Unido prohbe un anuncio del iPhone por publicidad engaosa

Categoras .NET Framework (1) ADO.NET Data Services (5) AJAX (1) Android (2)



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



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





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.


Documents

Silverlight UserControls