Compartir a través de


Crear contenido en la mesa de trabajo

La mayor parte del área de trabajo de SketchFlow es igual que el área de trabajo de Microsoft Expression Blend. La mesa de trabajo de Expression Blend proporciona una vista de pantallas individuales en las que puede dibujar con las herramientas de dibujo de Expression Blend, importar imágenes de Adobe Photoshop y usar la completa gama de controles disponibles en Expression Blend para Windows Presentation Foundation (WPF) y Microsoft Silverlight. También puede usar animación para mostrar diferentes estados de un elemento concreto o para representar la interacción con los elementos de la pantalla.

Agregue nuevas pantallas a un proyecto prototipo en el panel Mapa SketchFlow y después cree contenido en la mesa de trabajo en la ventana Diseño.

Ee341385.c5da9dd8-4356-4803-aab0-64635bf9866b(ES-ES,Expression.30).png

Ee341385.25182a96-9a69-478a-9cfe-5b360e6a9bea(ES-ES,Expression.30).png

Mesa de trabajo

Ee341385.05fe4b1d-f584-4bd2-99b6-8bc2d735a89d(ES-ES,Expression.30).png

Panel Mapa SketchFlow

Cuando se centre en pantallas individuales, puede dibujar con cualquiera de las herramientas de dibujo de gráficos vectoriales disponibles en Expression Blend, o bien puede importar archivos de Photoshop, manteniendo las capas, las máscaras vectoriales y el texto. También puede usar imágenes de controles de interfaz de usuario (UI) como parte de un prototipo y crear componentes reutilizables sobre la marcha. Tiene acceso también a la completa gama de controles de interfaz de usuario reales disponibles para WPF y Silverlight.

Para crear una nueva pantalla no conectada

  1. Haga clic con el botón secundario en el panel Mapa SketchFlow y elija alguna de las siguientes opciones:

    • Agregar pantalla de navegación

    • Agregar pantalla de componentes

    [!NOTA]

    Para conectar la nueva pantalla a una pantalla existente, haga clic en la nueva pantalla y arrástrela hasta la pantalla con la que desea conectarla.

  2. Para dibujar algo en la nueva pantalla, haga doble clic en el nodo en el panel Mapa SketchFlow para seleccionar la ficha de documento asociada.

Para obtener más información sobre cómo crear nuevas pantallas y trabajar en el panel Mapa SketchFlow, vea Crear un flujo de aplicación.

Objetos

En Expression Blend, un objeto es todo lo que se puede colocar en la mesa de trabajo. Por ejemplo, una vez agregado un elemento visual a la mesa de trabajo, éste se convierte en un objeto de la aplicación.

Para agregar un objeto a la mesa de trabajo, seleccione una herramienta en el panel Herramientas o en el panel Activos, o bien seleccione un control personalizado o con estilo en el panel Activos. Asimismo, puede arrastrar un control con estilo desde el panel Recursos o arrastrar recursos desde el panel Recursos a un objeto existente de la mesa de trabajo para aplicar el recurso a una de las propiedades del objeto. Además, puede arrastrar imágenes, archivos de sonido, archivos de vídeo y otros elementos multimedia directamente desde Windows Explorer en Expression Blend, o copiar imágenes de otras aplicaciones y pegarlas directamente en la mesa de trabajo.

Para obtener más información sobre cómo trabajar con objetos, vea Trabajar con objetos y controles.

Controles

Un control es un tipo de objeto que permite al usuario interactuar o proporcionar entradas. Expression Blend ofrece una amplia lista de controles que puede usar para diseñar prototipos de WPF y Silverlight.

Puesto que los elementos de interfaz de usuario sin pulir pueden distraer la revisión y centrarla en el aspecto de la aplicación en lugar del diseño interactivo, SketchFlow incluye también un conjunto de estilos que dan a los controles estándar un aspecto de boceto a mano a la vez que mantienen toda su funcionalidad. En el panel Activos, haga clic en Estilos.

Para obtener más información sobre cómo trabajar con controles en Expression Blend, vea Elegir y usar controles interactivos.

Animación SketchFlow

La animación SketchFlow se puede usar en prototipos SketchFlow para facilitar a los revisores la visualización de los diferentes estados en los que puede estar un elemento concreto de la interfaz de usuario. Se pueden usar para mostrar cómo ser vería la interacción con la pantalla, usando animación. Asimismo, pueden usarse para albergar diferentes alternativas de diseño para una pantalla dada.

Para obtener más información sobre cómo trabajar con animación SketchFlow, vea Agregar interactividad.

Controles de comportamiento

Expression Blend incluye controles de comportamiento, que son bloques de código reutilizables que facilitan la aplicación de interactividad con calidad de producción a cualquier elemento de diseño de la mesa de trabajo sin necesidad de conocer o escribir código. Si bien Expression Blend proporciona algunos controles de comportamiento preempaquetados, puede agregar también controles de comportamiento personalizados. Un desarrollador puede proporcionar un controlador de comportamiento personalizado que un diseñador puede aplicar fácilmente a un elemento de diseño en la mesa de trabajo.

Para obtener más información sobre cómo trabajar con controles de comportamiento en Expression Blend, vea Agregar interactividad.

Zoom y desplazamiento lateral

Si dispone de un mouse con rueda, puede cambiar el zoom en la mesa de trabajo presionando la tecla CTRL y girando la rueda del mouse.

También puede arrastrar la mesa de trabajo y cualquiera de los elementos que contiene si presiona la BARRA ESPACIADORA mientras la arrastra. Además, puede arrastrar el diagrama de flujo de la aplicación a cualquier parte de la ventana presionando la BARRA ESPACIADORA mientras arrastra el diagrama.

Anotaciones

Además de crear y modificar objetos y controles en la mesa de trabajo, puede dejar comentarios y notas en la mesa de trabajo usando anotaciones. Las anotaciones se pueden adjuntar también directamente a objetos de la pantalla. Las anotaciones en tiempo de diseño están visibles cuando se abre un proyecto SketchFlow en Microsoft Visual Studio.

Para obtener más información, vea Anotar un documento.