Truco: Crear y usar controles Silverlight y WPF

Uno de los objetivos en el diseño de Silverlight y WPF era permitir a los desarrolladores encapsular la funcionalidad de la interfaz de usuario en controles reutilizables.

Podemos implementar controles personalizados derivando de una clase de control ya existente (tanto de la clase base Control como de TextBox, Button, etc). También podemos crear controles de usuario reutilizables – haciendo más sencillo el uso de los archivos XAML para crear la interfaz de usuario (y haciéndolo super fácil de crear).

En sexta parte del tutorial de Silverlight vismo cómo crear un user control con VS 2008. De esta forma podemos encapsular lo que queramos en un user control. También podéis hacer esto con Expression Blend.

Cojer algunos controles ya existentes y encapsularlos en un User Control

Algunas veces no siempre sabemos que sería mejor encapsular alguna funcionalidad de la interfaz gráfica en un user control para poder usarlo en varios sitios.

Por ejemplo, podemos estar trabajando en un formulario en el que un usuario introduce sus datos de cuenta para comprar algo. Podríamos empezar creando alguna interfaz para encapsular la dirección del usuario. Para esto, añadimos un control <border> a la página, añadimos un grid panel dentro (con 2 columnas y 4 filas), y poemos las etiquetas y los textbox dentro:

Después de ponerlo todo, nos podemos dar cuenta “Ehhh!! – vamos a usar esto también para la dirección de entrega, quizás deberáimos crear un user control para poder repetirlo en varios sitios”.

Podríamos usar el “add new item” para crear un user control en blanco y copiar y pegar la interfaz anterior.

Un truco más rápido es que podemos usar Blend para seleccionar los controles que queremos encapsular como un user control en el diseñador, hacemos clic con el botón derecho y elegimos la opción “Make Control”:

Cuando seleccionemos el elemento “Make Control”, Blend nos preguntara si queremos crear un nuevo user Control

Lo llamaremos “AddressUserControl” y le damos a ok. Esto hará que Blend cree un nuevo user control con el contenido que hemos seleccionado:

Cuando recompilamos el proyecto y vamos a la página original, veremos la mimsa interfaz de usuario – excepto que la dirección está encapsulada en el AddressUserControl:

Llamaremos a este prmier AddressUserControl “ShippingAddress”, y añadiremos una segunda instancia del user control a la página para guardar la dirección de entrega (lo llamaremos “BillingAddress”):

Y si ahora queremos cambiar el aspecto de nuestras direcciones, sólo tenemos que hacerlo en el user control.

DataBinding de objetos Address a nuestro AddressUserControl

Ahora que tenemos algunos user controls que encapsulan la interfaz gráfica de las direcciones, crearemos un modelo de clases Address que usaremos para enlazarlos. Definiremos una clase como la siguiente:

En el código trasero del archivo Page.xaml podemos instanciar dos objetos Address- uno para la dirección de entrega y otro para la dirección de cobro (los llenaremos con datos falsos en este ejemplo). Programáticamente enlazaremos los objetos Address a los AddressUserControlss de la página. Esto lo haremos con la propiedad “DataContext” en cada user control :

El último paso será añadir declarativamente los bindings en el archivo AddressUserControl.xaml que tendrá un enlace bidireccioneal entre las propieades Text de los controles de Textbox y las propiedades del modelo de objetos Address:

Cuando ejecutemos la aplicación con F5 tendremos enlazados los objetos Address a nuestros AddressUserControls:

Como configuramos los {Binding} en “Mode=TwoWay”, los cambios que hagan los usuarios en los textbox se verán reflejados en los objetos Address del modelo de datos (no hace falta ningún código para que esto ocurra).

Por ejemplo, podemos cambiar la dirección oroginal de entrega en el navegadro en lugar de Disneyland:

Si ponemos un punto de ruptura en el evento clic del botón salvar ( y hacemos clic en el boton), podemos ver que el cambio se ha producido tanto en el textbox como en el objeto Address:

Podemos implementar el evento SaveBtn_Clic para que persista los datos que queramos – sin tener que obtener manualmente los datos ni manipularos de ninguna manera.

Esta separación soportada en WPF y Silverlight hace más sencilla la tarea de cambiar la interfaz gráfica de las direcciones sin tener que actualizar ningún código de nuestra página. También hace posible crear más fácilmente test unitarios para la funcionalidad.

Resumen

WPF y Silverlight hacen muy fácil encapsular funcionalidad de la interfaz gráfica con controles, y el mecanismo de user control que proporcionan se aprovecha de esto. Combinando user control y los bindings, permiten tener escenarios de separación entre código y presentación consiguiendo un código muy limpio cuando trabajamos con datos.

Podéis descargar la versión completa del ejemplo anterior aquí si queréis ejecutarlo en vuestra máquina.

Espero que sirva.

Scott.

Traducido por: Juan María Laó Ramos.

Artículo original.