Un espacio en mi control para tu control

Crear un control que pueda albergar otros controles es tan pero tan sencillo que no lo van a creer.

Hace poco necesité crear un control para usarlo en varias páginas. Quedó todo muy bonito y funcionando. Pero como en este negocio ni siquiera el cliente sabe lo que quiere resultó que se necesitaba una funcionalidad adicional y diferente para el control dependiendo de la página que lo contuviese. Dicha funcionalidad se expresaba por medio de un botón adicional al interior del control: en una página el botón hacia esto, en otra el botón hacia aquello, etc. pero siempre dicha funcionalidad estaba vinculada a la página que lo contiene.

No tardé en encontrarme con una de las tantas maravillas escondidas que incluye Silverlight: el ContentPresenter. Así las cosas finalmente decidí que la funcionalidad la manejaría cada página y que yo establecería en mi control un espacio para albergar el o los controles adicionales que soportarían la funcionalidad específica de cada página.

Nuevamente, comencemos por el final. Este es el resultado que obtendremos en este ejercicio:

Controles

Aquí estamos mostrando el mismo control tres veces. La copia en la parte superior no incluye controles adicionales y sigue funcionando sin ningún problema. Las otras dos copias incluyen diferentes controles adicionados a través de la página que los contiene. Recalco que en todos los casos el control es el mismo.

Primer paso: En mi control ubiqué un sitio en la parte derecha para colocar los controles adicionales. Allí inserté  

  1. <ContentPresenter x:Name="cpContenedor" />

Todo lo que debo hacer es asignar la propiedad Content de mi ContentPresenter con cualquier otro control que yo quiera presentar en dicha posición (la posición donde está el tag del ContentPresenter).

Segundo paso: Para poder asignar la propiedad Content utilizo una simple propiedad al interior de mi control:

 

  1. public UIElement ControlesAdicionales
  2. {
  3.     get { return cpContenedor.Content as UIElement; }
  4.     set { cpContenedor.Content = value; }
  5. }

Utilicé el tipo UIElement ya que todo lo que pueda tener una representación visual en pantalla llega a heredar en algún momento de UIElement.

Tercer y último paso: Una vez ponga mi control en la página, o en otro control, lleno la propiedad ControlesAdicionales con cualquier otro control que necesite:

 

  1. <my:MiControl x:Name="miControl1">
  2.     <my:MiControl.ControlesAdicionales>
  3.         <Image Source="/DemoContentPresenter;component/boligan.jpg"
  4.                         Margin="5"
  5.                         Width="96"
  6.                         Height="120" />
  7.     </my:MiControl.ControlesAdicionales>
  8. </my:MiControl>

Y lo mas lindo de esto es que puedes agregarle a tu control tantos ContentPresenter como necesites.

El código fuente lo encontrarán aqui.

Anuncios

Acerca de SilverIdeas

Instructor y entusiasta en el uso de Silverlight y otras tecnologías XAML.
Esta entrada fue publicada en Silverlight. Guarda el enlace permanente.

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s