Crear un control de usuario

Si desea diseñar un componente reutilizable que se pueda agregar al área de diseño como cualquier control de sistema, puede crear un control de usuario en Microsoft® Expression Blend™. Los controles de usuario pueden contener controles, recursos, escalas de tiempo de animación y otros controles de usuario, de la misma forma que una aplicación estándar. La única diferencia es que el elemento raíz es UserControl en lugar de Window.

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 Crear un control personalizado.)

Para obtener más información acerca de los controles de usuario, incluidos ejemplos de código y XAML, vea el tema de información general de la creación de controles en la sección sobre Windows Presentation Foundation en MSDN (en inglés).

Sugerencia 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 Pantalla de bienvenida, seleccione la ficha Ejemplos y, a continuación, haga clic en el nombre de un ejemplo, como Color Swatch.

Para definir el control de usuario

  1. En Expression Blend, realice una de las acciones siguientes:
    • 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, déle 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.
    • 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, déle un nombre al archivo y, por último, haga clic en Aceptar. Esta opción es más fácil de editar porque el control de usuario se encuentra en el mismo proyecto en que se usa, por lo que se puede saltar 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 control de tipo 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 a Canvas o a cualquier otro control de panel; para ello, haga clic con el botón secundario en el elemento LayoutRoot, debajo de 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 el área de diseño. Modifíquelos mediante las propiedades del panel Propiedades. Los controles de usuario pueden contener cualquier cosa que una aplicación estándar pueda contener.
  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 la escala de tiempo de una animación que desplaza un objeto de izquierda a derecha y se produce cuando se hace doble clic con el mouse, pero no establece un fotograma clave en la marca de 0 segundos, la animación no se ejecutará más de una vez en posteriores acciones de doble clic con el mouse, ya que se trata de una animación de continuación. Para obtener información acerca de las animaciones de continuación, vea Usar varias escalas de tiempo de animación superpuestas.
  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 un ejemplo de un control de usuario con un archivo de código subyacente, vea el tema de información general de la creación de controles en la sección sobre Windows Presentation Foundation en MSDN (en inglés). Para obtener información acerca de cómo editar un archivo de código subyacente en 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 Herramienta Selección, ajuste el tamaño de la ventana del documento con las etiquetas contextuales azules del área de diseño.
  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 un espacio real en el área de diseño cuando se agregue a otro documento. En la categoría Pinceles del panel Propiedades, cambie la propiedad Background del elemento raíz a un Pincel de color sólido 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 de propiedades avanzadas Botón Mostrar propiedades avanzadas de 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 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.

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 Botón 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 el área de diseño.
  5. Pruebe el proyecto (F5) para ver el control de usuario en acción.

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 el área de diseño o en Objetos y escala de tiempo; a continuación, haga clic en Editar control.
    Expression Blend abre el documento del 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.