Crear un control de usuario vacío

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. La única diferencia es que el elemento raíz es un 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 personalizado con propiedades personalizadas.

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.

Para obtener más información acerca de los controles de usuario, vea Información general sobre la creación de controles en la sección Windows Presentation Foundation de MSDN.

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 o Biblioteca de controles de Silverlight 3, 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 el panel 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 panel 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 el panel 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 "Usar varias escalas de tiempo de animación superpuestas" en Animar objetos.

5. En el panel Desencadenadores, configure cualquier propiedad o desencadenador de eventos que hará 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 un ejemplo de un control de usuario con un archivo de código subyacente, vea el artículo 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 Modificar 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 el panel 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 Adorner azules 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 y MinWidth en la sección Propiedades 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 y Height de todos los objetos en el control de usuario queden restablecidas en Automático.

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.

Vea también

Tareas

Crear un control de usuario a partir de objetos existentes

Dibujar un control de usuario en otro documento