Inténtelo: crear un control personalizado con propiedades personalizadas

Microsoft Expression Blend ofrece diversos controles de sistema y estilos simples que puede usar en sus aplicaciones. Sin embargo, si estos controles o estilos no satisfacen alguna de sus necesidades específicas, puede generar un control personalizado creando una clase de Microsoft .NET heredada de una de las clases System.Windows.Controls.

Los procedimientos siguientes muestran cómo crear un control Button personalizado que incluya una propiedad nueva con la ruta de un archivo de imagen para que muestre una imagen.

Para obtener un ejemplo de cómo crear un control de usuario sin usar código y, por lo tanto, sin propiedades personalizadas, vea Crear un control de usuario vacío.

Para obtener más información acerca de controles personalizados, incluidos ejemplos de código y XAML, vea los temas Información general sobre la creación de controles y DependencyProperty (Clase) en la sección Windows Presentation Foundation de MSDN.

Para definir un control personalizado

1. En el panel Proyectos, busque el archivo Window1.xaml y expándalo para mostrar el archivo de código subyacente del proyecto, denominado Window1.xaml.cs. (Si eligió Microsoft Visual Basic como lenguaje cuando creó el proyecto, el archivo de código subyacente tendrá el nombre Window1.xaml.vb.) Haga doble clic en el archivo de código subyacente para abrirlo y editarlo.

2. En el archivo Window1.xaml.cs, pegue el código fuente de la definición de clase siguiente justo antes de la última llave de cierre (}) del archivo. En el caso de Visual Basic, pegue el código apropiado justo antes de End Namespace o justo después del último caso de End Class.

   public class ImageButton : Button 
   { 
     public ImageSource Source 
     { 
       get { return base.GetValue(SourceProperty) as ImageSource; } 
       set { base.SetValue(SourceProperty, value); } 
     } 
     public static readonly DependencyProperty SourceProperty = 
       DependencyProperty.Register("Source", typeof(ImageSource), typeof(ImageButton), null); 
   }
   

   Class ImageButton
     Inherits Button
     Public Property Source() As ImageSource
       Get
         Return CType(MyBase.GetValue(SourceProperty), ImageSource)
       End Get
       Set(ByVal value As ImageSource)
         MyBase.SetValue(SourceProperty, value)
       End Set
     End Property
     Public Shared ReadOnly SourceProperty As DependencyProperty = DependencyProperty.Register("Source", GetType(ImageSource), GetType(ImageButton), nothing)
   End Class
   

3. Guarde el archivo de código subyacente modificado y ciérrelo.

   Sugerencia:

   La clase ImageButton demuestra el modelo de la propiedad de dependencia. De forma externa, la clase expone una propiedad normal Common Language Runtime (CLR, es decir, .NET) denominada Source, que es del tipo ImageSource. La clase también registra y expone un campo de propiedad de dependencia de sólo lectura denominado SourceProperty e implementa los descriptores de acceso CLR para la propiedad Source en términos de la propiedad de dependencia. Dar soporte a una propiedad con una propiedad de dependencia registrada permite a WPF o Silverlight proporcionar una gran cantidad de servicios a la propiedad. Estos servicios incluyen estilos, enlaces de datos, herencia de valores, valores predeterminados y animación. También existe una característica denominada enlace de plantillas, que permite establecer un enlace con el valor de la propiedad desde una plantilla de control. En este tutorial se muestra cómo funciona el enlace de plantilla.

   Sugerencia:

   Si prefiere guardar el código fuente de la definición de clase del control personalizado en un archivo de código fuente separado, puede hacerlo. Si lo prefiere, como alternativa a los dos pasos anteriores, puede crear un nuevo archivo denominado ImageButton.cs, pegar el código fuente en este archivo junto con la declaración del espacio de nombres y el mismo conjunto de directivas en uso del archivo de código subyacente del documento y, a continuación, agregar el nuevo archivo al proyecto (en el menú Proyecto, haga clic en Agregar elemento).

4. Ahora debe generar el proyecto de modo que el nuevo control ImageButton aparezca en el panel Activos. En el menú Proyecto de Expression Blend, haga clic en Generar proyecto (o presione CTRL+MAYÚS+B). Compruebe que la compilación se haya completado sin errores.

5. Vuelva a la edición de Window1.xaml en Expression Blend.

6. En el panel Herramientas, situado en el lado izquierdo de Expression Blend, haga clic en Activos .

   El panel Activos se abre para mostrarle todos los controles, paneles y otros elementos que puede colocar en el documento.

7. En la ficha Proyecto, seleccione el control ImageButton de la lista.

   El icono del panel Herramientas situado debajo del botón Activos está establecido ahora en el control ImageButton y ya está seleccionado, de modo que puede dibujar el control en la mesa de trabajo.

   [!NOTA]

   Los controles personalizados no aparecerán en la categoría Proyecto del panel Activos a menos que haya agregado el código fuente al proyecto y haya realizado una compilación (CTRL+MAYÚS+B).

8. Con el icono ImageButton seleccionado en el panel Herramientas, dibuje un objeto ImageButton haciendo clic en la mesa de trabajo y dibujando un rectángulo de selección dentro del documento.

   El objeto ImageButton se representa en la mesa de trabajo y un elemento ImageButton denominado [ImageButton] "ImageButton" se incluye en la lista como elemento secundario de LayoutRoot en el panel Objetos y escala de tiempo.

Para modificar el estilo del control personalizado

1. Para crear una plantilla de control de todos los elementos ImageButton, haga clic con el botón secundario en el nuevo elemento ImageButton, haga clic en Editar plantilla y, a continuación, haga clic en Editar una copia.

   Aparece el cuadro de diálogo Crear recurso Style.

2. En el campo Nombre de recurso (clave) del cuadro de diálogo Crear recurso Style, en el cuadro de texto junto al primer botón de opción, escriba ImageButtonStyle.

   Esto establece un nombre de la plantilla en el diccionario de recursos de modo que pueda establecerla como plantilla de cualquier elemento ImageButton.

   [!NOTA]

   Las plantillas de control están incluidas en los estilos, por lo que el estilo que se aplica a un control incluye la apariencia (partes) y el comportamiento del control.

3. En el campo Definir en, seleccione el botón de opción Este documento y asegúrese de que Window: Window esté seleccionado en la lista desplegable.

   El campo Definir en indica el diccionario de recursos en el que se definirá la nueva plantilla. Si selecciona Window: Window, la plantilla será visible para todos los controles ImageButton de la ventana.

4. Haga clic en Aceptar.

   Ahora ha copiado la plantilla de control predeterminada de todos los elementos ImageButton y ha guardado la copia como un objeto ControlTemplate nuevo denominado ImageButtonStyle. La nueva plantilla se ha colocado en el diccionario de recursos, que puede ver en el nodo Window del panel Recursos.

   Con la creación de una nueva plantilla, Expression Blend cambia a un modo en que puede ver y editar la nueva plantilla. En el panel Objetos y escala de tiempo, la palabra Template situada sobre el nuevo árbol de elementos indica el ámbito actual en el que está editando. La plantilla incluye un elemento ContentPresenter que mostrará automáticamente el valor de la propiedad Content del objeto ImageButton que usa esta plantilla.

   Sugerencia:

   Para salir del modo de edición de plantilla y volver al ámbito del documento, haga clic en Ámbito superior, que se encuentra encima del árbol de elementos junto a la palabra ImageButtonStyle. Para volver al modo de edición de plantilla para una plantilla existente, haga clic con el botón secundario en el elemento cuya plantilla desee editar en el panel Objetos y escala de tiempo (en este caso, el elemento [ImageButton] "ImageButton"), haga clic en Editar plantilla y, a continuación, en Editar actual.

5. En el panel Objetos y escala de tiempo, haga clic con el botón secundario en el objeto ContentPresenter, elija Agrupar en y, a continuación, haga clic en Grid.

   El objeto ContentPresenter está formado por un elemento secundario de un nuevo objeto Grid. Sin el objeto Grid, no podría agregar un segundo elemento secundario a la plantilla porque el objeto Chrome sólo puede contener un elemento secundario.

6. Con el objeto Grid seleccionado en el panel Objetos y escala de tiempo, busque las propiedades Width y Height en la categoría Diseño del panel Propiedades. Haga clic en Opciones avanzadas de la propiedad junto a cada una de las propiedades y haga clic en Restablecer.

7. Para dividir la cuadrícula en dos columnas, haga doble clic en el objeto Grid en el panel Objetos y escala de tiempo para activar la cuadrícula y, a continuación, con la herramienta Selección seleccionada en el panel Herramientas, mueva el puntero del mouse sobre el área gruesa y azul de la regla de la parte superior de Grid en la mesa de trabajo. Una regla de columna naranja seguirá al puntero del mouse para indicar dónde se colocará el nuevo divisor de columna si hace clic.

   Haga clic para crear un nuevo divisor de columna en el medio de Grid.

   Aparece un divisor de columna azul dentro de Grid.

8. Seleccione Imagen  en la categoría Controles del panel Activos (haga clic en la subcategoría Todo). Con el elemento Grid aún activado en el panel Objetos y escala de tiempo, dibuje un nuevo elemento Image en la columna derecha de Grid.

9. Con el nuevo elemento Image seleccionado en Objetos y escala de tiempo, mire en Propiedades comunes en el panel Propiedades. Haga clic en Opciones avanzadas de la propiedad  a la derecha de la propiedad Source, seleccione Enlace de plantillas y, a continuación, haga clic en Source.

   Acaba de enlazar mediante una plantilla la propiedad Source de Image a la propiedad Source del elemento ImageButton que usa esta plantilla.

10. Ha terminado de editar la plantilla. Para salir al ámbito del elemento raíz, haga clic en Ámbitosuperior en el panel Objetos y escala de tiempo.

11. Con el elemento ImageButton seleccionado en Objetos y escala de tiempo, busque la propiedad Source en la categoría Varios del panel Propiedades y establézcala como la ruta de acceso de un archivo de imagen en el equipo.

    La imagen se muestra a la derecha del control ImageButton.

Para aplicar el estilo a otro control personalizado

1. En la categoría Proyecto del panel Activos, seleccione el control ImageButton. Dibuje un nuevo control ImageButton en la mesa de trabajo.

2. Haga clic con el botón secundario en el nuevo control ImageButton y haga clic, por este orden, en Editar plantilla, Aplicar recurso y en el nombre del estilo, ImageButtonStyle.

   El estilo ImageButtonStyle se aplica al nuevo control ImageButton. Busque la propiedad Source en la categoría Varios del panel Propiedades y establézcala como la ruta de acceso de un archivo de imagen del equipo.

   [!NOTA]

   Como alternativa, puede agregar a la mesa de trabajo un ImageButton que ya tenga aplicado un estilo mediante la plantilla. En la categoría Estilos del panel Activos, seleccione ImageButtonStyle y, a continuación, dibuje el ImageButton con el estilo aplicado en la mesa de trabajo.

Opciones avanzadas: aplicar descripciones a propiedades personalizadas

1. En la parte superior del archivo de código subyacente (Window1.xaml.cs), agregue una referencia al espacio de nombres System.ComponentModel.

   Los atributos Description y Category usados más adelante se definen en este espacio de nombres.

2. Pegue la línea siguiente (en negrita) antes de la definición de clase:

   [Description("Represents a custom button control that responds to a Click event. Displays an image using a custom Source property if the Source property is bound to an Image in the template.")]
   public class ImageButton : Button
   

   <Description("Represents a custom button control that responds to a Click event. Displays an image using a custom Source property if the Source property is bound to an Image in the template.")> _
   Class ImageButton
   

3. Pegue la línea siguiente (en negrita) antes de la definición de propiedad personalizada:

   [Description("The image displayed in the button if there is an Image control in the template whose Source property is template-bound to the ImageButton Source property."), Category("Common Properties")] 
       public ImageSource Source
   

   <Description("The image displayed in the button if there is an Image control in the template whose Source property is template-bound to the ImageButton Source property."), Category("Common Properties")> _ 
       Public Property Source() As ImageSource
   

   El atributo Category configura el lugar en que se mostrará la propiedad en el panel Propiedades.

4. Vuelva a generar el proyecto (CTRL+MAYÚS+B).

   Ahora, la propiedad Source de ImageButton aparecerá en la categoría Propiedades comunes del panel Propiedades y las descripciones aparecerán como información sobre herramientas cuando mueva el puntero del mouse sobre la propiedad y sobre el control en el panel Activos.

Opciones avanzadas: configurar un control para que muestre una imagen predeterminada

Puede agregar código al constructor de cualquier control personalizado que establezca una propiedad en un valor predeterminado cuando se dibuje el control en la mesa de trabajo y, por lo tanto, en el modo de diseño. Si establece una propiedad con el procedimiento siguiente, sólo afectará a lo que se ve en la mesa de trabajo y no a lo que se ve cuando se ejecuta la aplicación. Esto es útil cuando el contenido no está disponible para el control en el modo de diseño pero está disponible cuando se ejecuta la aplicación; por ejemplo, cuando el contenido proviene de una base de datos o servicio Web. En este caso, la propiedad Source de un ImageButton en la mesa de trabajo se establece en el nombre de un archivo de imagen del proyecto hasta que se configure explícitamente.

1. En el archivo de código subyacente (Window1.xaml.cs), pegue las siguientes líneas de código (en negrita) después de la definición de la propiedad:

   [!NOTA]

   Cambie el nombre del archivo (Sunset.jpg) en el código siguiente por el nombre de un archivo de imagen del proyecto. Para agregar un archivo de imagen al proyecto, haga clic con el botón secundario en el nombre del proyecto en el panel Proyectos y, a continuación, haga clic en Agregar elemento existente.

   public static readonly DependencyProperty SourceProperty = DependencyProperty.Register("Source", typeof(ImageSource), typeof(ImageButton));
   
   // Constructor:  
   public ImageButton()  
   {  
      if (DesignerProperties.GetIsInDesignMode(this))  
      {  
         this.Source = new BitmapImage(new Uri("Sunset.jpg", UriKind.Relative));  
      }  
   }  
   Public Shared ReadOnly SourceProperty As DependencyProperty = DependencyProperty.Register("Source", GetType(ImageSource), GetType(ImageButton))
   
   Public Sub New()  
       If DesignerProperties.GetIsInDesignMode(Me) Then  
           Me.Source = New BitmapImage(New Uri("Sunset.jpg", UriKind.Relative))  
       End If  
   End Sub  
   

2. Vuelva a generar el proyecto (CTRL+MAYÚS+B).

   Ahora, cuando agregue a la mesa de trabajo un ImageButton que use el estilo que ha creado, aparecerá una imagen predeterminada en el botón.

   [!NOTA]

   No podrá establecer la propiedad Source en ningún otro valor mientras se encuentre en modo de diseño.