Inténtelo: Crear un control de usuario de WPF

Si desea diseñar un componente reutilizable que se pueda agregar a la mesa de trabajo como cualquier control de sistema, puede crear un control de usuario en Microsoft Expression Blend. Los controles de usuario pueden contener otros controles, recursos y escalas de tiempo de animación de la misma forma que una aplicación Windows Presentation Foundation (WPF). La única diferencia es que el elemento raíz es UserControl en lugar de Window o Page

Los siguientes procedimientos muestran cómo crear un control de usuario con animaciones y cómo crear una instancia del control en otro documento. (Para obtener un ejemplo de creación de un control personalizado en código que pueda basarse en un control de sistema existente, vea Inténtelo: crear un control WPF personalizado).

Puede encontrar más ejemplos de controles de usuarios en las muestras que se incluyen con Expression Blend. En el menú Ayuda, haga clic en la Pantalla de bienvenida, seleccione la ficha Ejemplos y, a continuación, haga clic en el nombre de un ejemplo, como SmoothBlends. Para obtener más información acerca de los controles de usuario, vea el artículo acerca de información general sobre la creación de controles en la sección Windows Presentation Foundation de MSDN.

[!NOTA]

Los controles de usuario no son compatibles con Microsoft Silverlight 1.0. Sin embargo, puede crear clases personalizadas de JavaScript y crear instancias mediante programación. Para obtener un ejemplo, vea la clase Button en el ejemplo ButtonGallery que está disponible en la ficha Ejemplos de la Pantalla de bienvenida (en el menú Ayuda).

Los controles de usuario son compatibles con Silverlight 2. Para obtener más información, vea Crear un nuevo control de usuario en un proyecto Silverlight 2.

Para definir el control de usuario

1. En Expression Blend, realice una de las siguientes acciones:

   • Para crear un control de usuario en un archivo .dll, haga clic en Nuevo proyecto, en el menú Archivo, seleccione el tipo de proyecto Biblioteca de controles WPF, asigne un nombre al proyecto, seleccione el lenguaje del archivo de código subyacente del documento principal y, por último, haga clic en Aceptar. Use esta opción si desea ocultar la implementación del control de usuario cuando se lo pase a otra persona, o si desea poder cambiar la apariencia del control de usuario creando una plantilla cuando el control de usuario se dibuje en otra aplicación.

   • Para crear un control de usuario en un archivo .xaml en un proyecto existente, haga clic en Nuevo elemento (Ctrl+N) en el menú Archivo, seleccione la plantilla UserControl, asigne un nombre al archivo y, por último, haga clic en Aceptar. Esta opción es más fácil de cambiar porque el control de usuario está en el mismo proyecto en el que se usa. Por lo tanto, puede omitir el paso de actualizar una referencia a un archivo .dll.

   Expression Blend abre el control de usuario para su edición.

2. Decida qué tipo de panel desea para el elemento raíz. De forma predeterminada, se usa un control Grid llamado LayoutRoot, que permite cambiar el tamaño de cualquier animación cuando se dibuja el control de usuario en otro documento. Puede cambiar este tipo de control por Canvas o a cualquier otro control de panel; para ello, haga clic con el botón secundario en el elemento LayoutRoot en Objetos y escala de tiempo, señale Cambiar tipo de diseño y, a continuación, haga clic en el nombre del panel.

3. En el cuadro de herramientas, seleccione los controles y las herramientas de dibujo que desea incluir en el control de usuario y dibújelos en la mesa de trabajo. Modifíquelos mediante las propiedades del panel Propiedades. Los controles de usuario pueden contener cualquier cosa que pueda contener una aplicación WPF.

4. En Objetos y escala de tiempo, cree las escalas de tiempo de las animaciones que desee. Para obtener un ejemplo, vea Crear una animación sencilla.

   [!NOTA]

   A la hora de establecer fotogramas clave, considere los tiempos de todas las animaciones de la aplicación y el momento en que se ejecutará la animación en el control de usuario. Por ejemplo, supongamos que desea crear una aplicación que primero anima una pantalla de presentación y luego anima la interfaz de usuario con un efecto de atenuación. Puede poner cada animación en su propio control de usuario, pero deje tiempo suficiente al comienzo de la segunda animación para el intervalo de tiempo que tarda en completarse la animación de la pantalla de bienvenida.

   Sugerencia:

   Establezca un fotograma clave en la marca de 0 segundos si desea que la animación pueda iniciarse varias veces. Por ejemplo, si crea una escala de tiempo de animación que desplaza un objeto de izquierda a derecha y se desencadena como consecuencia de un doble clic del mouse, pero no se establece un fotograma clave en la marca de 0 segundos, la animación sólo se ejecutará una vez aunque vuelva a hacer doble clic más tarde, ya que se trata de un comportamiento de la transición. Para obtener información acerca de los comportamientos de la transición, vea la sección sobre usar varias escalas de tiempo de animación superpuestas en la Información general de animación.

5. En Desencadenadores, configure cualquier propiedad o desencadenador de eventos que haga que su aplicación responda a la interacción del usuario. Para obtener un ejemplo, vea Agregar o quitar un desencadenador.

   [!NOTA]

   Cuando decida qué desencadenadores desea establecer en el control de usuario, considere todas las propiedades y desencadenadores que desee que estén disponibles para este control. Por ejemplo, supongamos que desea crear una aplicación que contenga un botón y una animación incluida en un control de usuario. En Expression Blend, no puede agregar un desencadenador al control de usuario para que inicie la escala de tiempo de la animación cuando se haga clic en el botón a menos que el botón forme parte del control de usuario. Además, sólo puede enlazar datos entre valores de propiedades si ambas propiedades se encuentran en el mismo control de usuario. Puede solucionar esto mediante la programación en archivos de código subyacente o creando una plantilla con desencadenadores y escalas de tiempo de animación para el control de usuario tras agregarlo a un documento. Para obtener más información acerca de los controles de usuario, vea el artículo de información general sobre la creación de controles en la sección Windows Presentation Foundation de MSDN. Para obtener información acerca de cómo modificar un archivo de código subyacente de Expression Blend, vea Editar un archivo de código subyacente.

6. Cuando acabe de crear el control de usuario, asegúrese de que cambia el tamaño del elemento raíz del documento de forma que sea tan grande como sea necesario, pero no más. En Objetos y escala de tiempo, seleccione la raíz del documento y, después, mediante la herramienta Selección , ajuste el tamaño de la ventana del documento con los controles Adorner de la mesa de trabajo.

7. Si el control de usuario depende de que se haga clic con el mouse o de alguna interacción con el área vacía del control de usuario, es necesario que configure el fondo del elemento raíz con un pincel sólido para que el control de usuario ocupe espacio en la mesa de trabajo cuando se agregue a otro documento. En la categoría Pinceles del panel Propiedades, cambie la propiedad Background (fondo) del elemento raíz a Pincel de color sólido . Si desea mantener el fondo invisible, cambie la subpropiedad Alpha a 0.

8. Si el control de usuario depende de un alto o ancho específico, configure las propiedades MinHeight (alto mínimo) y MinWidth (ancho mínimo) en la sección Opciones avanzadas  en la categoría Diseño del panel Propiedades.

9. Si desea que el control de usuario pueda cambiar de tamaño cuando se dibuje en un documento, asegúrese de que las propiedades Width (ancho) y Height (alto) de todos los objetos en el control de usuario queden restablecidas en Auto.

10. Guarde los archivos y el proyecto; para ello, haga clic en Guardar todo en el menú Archivo.

11. Si el proyecto es una biblioteca de controles, genere el proyecto para crear el archivo .dll; para ello, haga clic en Generar proyecto (Ctrl+Mayús+B) en el menú Proyecto. El archivo .dll se genera y se guarda en la carpeta \bin\Debug en la misma ubicación que el proyecto.

Volver al principio

Para crear una instancia del control de usuario en otro documento

1. Si creó una biblioteca de controles, agregue una referencia al archivo .dll en el proyecto en el que desee usar el control de usuario. En el menú Proyecto, haga clic en Agregar referencia, busque el archivo .dll del control de usuario en la ventana Agregar referencia y, a continuación, haga clic en Abrir.

2. Genere el proyecto actual (Ctrl+Mayús+B) para que el control de usuario esté disponible para su selección en el Panel biblioteca.

3. En la ficha Controles personalizados del Panel biblioteca, seleccione el control de usuario. El icono del control de usuario aparecerá seleccionado encima del botón Panel biblioteca.

4. Use el mouse para dibujar el control de usuario en la mesa de trabajo.

5. Pruebe el proyecto (F5) para ver el control de usuario en acción.

Volver al principio

Para editar un control de usuario después de agregarlo a otro documento

Si creó un documento de control de usuario en lugar de una biblioteca de controles (.dll), puede entrar en el modo de edición del control con el menú contextual.

1. Haga clic con el botón secundario en el control de usuario en la mesa de trabajo o en Objetos y escala de tiempo; a continuación, haga clic en Editar control.Expression Blend abre el documento de control de usuario para su edición.

2. Tras efectuar los cambios, guarde el archivo y vuelva al documento principal.

Si creó un control de usuario en un proyecto de biblioteca de controles, debe editar el proyecto de biblioteca de controles original y, después, volver a generar el archivo .dll.

Volver al principio