Introducción a Blend para Visual Studio 2013
Blend para Visual Studio es una herramienta visual que permite crear interfaces de usuario atractivas y experiencias multimedia excelentes para aplicaciones de escritorio de Windows, aplicaciones web, aplicaciones de Windows Phone y aplicaciones de la Tienda Windows. Blend es compatible con Windows Presentation Foundation (WPF) y Silverlight e incluye SketchFlow para crear prototipos (en las ediciones de Visual Studio Ultimate y Premium).
Blend para Visual Studio reemplaza a Expression Blend. Para obtener información sobre otros productos de Expression y opciones de soporte técnico, consulte la página de cambios de Microsoft Expression.
Blend almacena su trabajo en un lenguaje de marcado declarativo basado en XML (XAML). También admite código HTML5, CSS3 y JavaScript para aplicaciones web. Los cambios en la interfaz de usuario se pueden realizar visualmente en la vista de diseño, que es donde destaca Blend, pero también se puede ajustar la interfaz de usuario en XAML. (Aprenda a diseñar la interfaz de usuario de XAML con Blend). Luego puede enlazar la interfaz de usuario al código de su aplicación en Visual Studio.
Cómo obtener Blend
Blend se instala al instalar Visual Studio. Está disponible en Visual Studio Professional 2013 con Update 2 y versiones posteriores. Para abrirlo:
Escriba Blend desde la pantalla de inicio de Windows.
-O bien-
Abra un proyecto de WPF, Silverlight, Windows Phone o Tienda Windows en Visual Studio y, a continuación, elija Abrir en Blend desde el menú Vista o desde el menú contextual del proyecto.
¿Por qué usar Blend?
Visual Studio proporciona un enfoque Code First al desarrollo. También tiene un diseñador excelente para que pueda agregar elementos de interfaz de usuario a la aplicación durante el desarrollo. Puede utilizar marcos como Windows Presentation Foundation o Silverlight para compilar la interfaz de usuario. Sin embargo, las animaciones y los controles personalizados a menudo requieren estar familiarizado con conceptos complejos y tener una amplia experiencia en codificación.
Blend proporciona un área de trabajo visual, donde puede compilar la nueva interfaz de usuario o manipular la interfaz de usuario existente de manera más rápida e intuitiva. La paleta de herramientas de Blend es más amplia y sofisticada que la de Visual Studio, por lo que se pueden hacer muchas más cosas. (Por ejemplo, puede crear animaciones y establecer los planos de proyección para agregar efectos 3D a controles directamente en el diseñador). Al utilizar la mejor herramienta para cada trabajo, aumenta su productividad: diseñe la interfaz de usuario de la aplicación en Blend, ajuste el código XAML subyacente si lo desea y, a continuación, utilice el editor de código de Visual Studio para programar una funcionalidad adicional y depurar la aplicación. Puede tener el mismo proyecto abierto en Visual Studio y Blend y cambiar entre el diseño y el código para obtener resultados más rápidamente.
El código de ejemplo siguiente sirve para animar una forma en C#:
.png "Crear una animación en código de C#")
Esta es una instantánea de la experiencia en Blend:
.png "Crear una animación en Blend")
Para aumentar la productividad, considere el uso de Blend para las siguientes tareas. Estas son las áreas en las que Blend ofrece más velocidad y funcionalidad que el diseñador de Visual Studio o el código por sí solos.
Para |
Solo Visual Studio |
Visual Studio con Blend |
Más información |
|---|---|---|---|
Crear animaciones |
No hay ninguna herramienta de diseño para animaciones; debe crearse mediante programación. Esto requiere tener conocimientos del sistema de animación y temporización en WPF y una amplia experiencia en codificación. Para crear animaciones en aplicaciones de la Tienda Windows, se requiere cierta fluidez en XAML o HTM5, CSS y JavaScript. |
Puede crear animaciones visualmente y verlas previamente en Blend. Esto es más rápido y preciso que la compilación de las animaciones en el código. Puede agregar desencadenadores para controlar la interacción del usuario y puede cambiar al código para agregar controladores de eventos y otras funciones. Blend también admite la creación de animaciones CSS basada en escala de tiempo (según lo especificado por el W3C) sin necesidad de usar código JavaScript. Puede editar las animaciones directamente dentro de la aplicación para que pueda ver cómo interactúa con otros elementos. |
|
Convertir formas y texto en trazados para una manipulación más fácil |
No se admite. |
Puede realizar cambios sutiles o espectaculares en las formas (como rectángulos y elipses) si las convierte en trazados, logrando así un mejor control de la edición. Puede cambiar la forma de los trazados, combinarlo y crear trazados compuestos de varias formas. También puede convertir bloques de texto en trazados para manipularlos como imágenes vectoriales. |
|
Agregar interactividad a los diseños de interfaz de usuario |
Requiere código de C#, Visual Basic o C++. |
Arrastre y coloque comportamientos en los controles para agregar interactividad a los diseños estáticos. Los comportamientos son fragmentos de código listos para usar que encapsulan funcionalidades como arrastrar y colocar, zoom y cambios de estado visual. Hay un conjunto cada vez mayor de comportamientos entre los que puede elegir, pero también puede crear los suyos propios. Después puede personalizar cada comportamiento mediante la modificación de sus propiedades en Blend o la adición de controladores de eventos en código. |
|
Editar la aplicación de forma interactiva |
No se admite. |
Interactúe con su aplicación HTML mientras se ejecuta y haga cambios (por ejemplo, alterne un botón, cambie una opción o dibuje en un lienzo). Los cambios se conservan al volver al modo de edición. También puede utilizar el modo interactivo para pausar la ejecución de la aplicación en un estado concreto, editar el código subyacente y ver los efectos de inmediato. |
|
Usar material gráfico de Adobe |
No se admite. |
Importe material gráfico de Adobe FXG, PhotoShop o Illustrator e implemente la interfaz de usuario en Blend y Visual Studio. |
|
Editar controles, plantillas y estilos |
Requiere codificación y conocimientos de plantillas y estilos WPF. |
Convierta cualquier imagen en un control. Utilice las herramientas de edición de plantillas para realizar cambios en controles, estilos y plantillas con unos pocos clics del ratón. Por ejemplo, puede usar recursos de estilo de Blend para implementar controles WPF comunes (como botones, cuadros de lista, barras de desplazamiento, menús, etc.) y cambiar su color, estilo o plantilla subyacente directamente en Blend. A continuación, puede cambiar a código para dar los últimos retoques si lo desea. |
|
Conectar la interfaz de usuario a los datos |
Puede crear un origen de datos a partir de recursos como bases de datos de SQL Server, servicios web o WCF, objetos o listas de SharePoint y enlazar el origen de datos a los controles de la interfaz de usuario. Los datos en tiempo de diseño deben crearse manualmente para una experiencia de diseño interactivo. |
Cree fácilmente datos de ejemplo para prototipos y pruebas y cambie a datos reales cuando esté listo. Las capacidades de generación de datos de Blend son excepcionales (puede agregar nombres, números, direcciones URL y fotografías de manera fácil y rápida) y pueden ahorrarle mucho tiempo. Para datos reales, puede enlazar los controles de interfaz de usuario a un archivo XML o a cualquier origen de datos CLR. |
|
Diseñar una aplicación de la Tienda Windows o de Windows Phone |
Capacidades limitadas en el diseñador; use XAML para trabajo complejo. |
(Para compatibilidad con Windows Phone se requiere Visual Studio Professional 2013 con Update 2 o una versión posterior). Blend proporciona amplias capacidades de diseño y acelera y simplifica el desarrollo de aplicaciones. Compile su aplicación de principio a fin en el diseñador de Blend, pruébela en los emuladores e intégrela con su propio código para obtener funcionalidad adicional. |
Diseño de aplicaciones de Windows Phone con Blend Blend para Visual Studio 2012 (aplicaciones de la Tienda Windows) Creación de aplicaciones para la Tienda Windows (MSDN Magazine) |
Crear guiones gráficos y prototipos |
Debe codificar su prototipo en Visual Basic o C#, o usar una herramienta independiente como Adobe Director o Flash. |
Utilice SketchFlow para dibujar y compilar un prototipo de trabajo que se puede convertir en una aplicación funcional sin necesidad de reimplementación. Puede animar y agregar anotaciones a los prototipos SketchFlow. También puede compartir los prototipos con otras personas, ejecutar estudios de uso y ver cuál es la respuesta en SharePoint o en el Reproductor SketchFlow. |
Recursos
Para |
Vea |
|---|---|
Impulsar su trabajo con una visita guiada por Blend |
Diseñar la interfaz de usuario XAML con Blend (Microsoft Virtual Academy) |
Descubrir por qué los desarrolladores cambian a Blend |
Cómo Blend hace fácil crear una aplicación Windows 8 en 24 horas (entrada de blog) |
Ver las novedades en la versión más reciente de Blend |
Novedades para desarrolladores HTML (entrada de blog) Novedades para aplicaciones XAML de la Tienda Windows (entrada de blog) |
Familiarizarse con el área de trabajo de Blend |
Establecer los colores y las fuentes del área de trabajo en Blend |
Usar paneles de diseño y controles para organizar controles, imágenes y otros objetos en una página |
|
Permitir a los usuarios interactuar con la aplicación |
|
Mejorar la apariencia visual de la aplicación con imágenes, vídeos y clips de audio |
|
Crear, modificar y animar objetos 3D |
|
Agregar formas o dibujar patrones de forma libre, editarlos, convertirlos en controles o utilizarlos para crear trazados de una animación |
|
Cambiar la forma en que aparecen los objetos, crear estilos y plantillas que se pueden aplicar a varios objetos |
|
Crear animaciones cortas para el movimiento y el fundido de objetos |
|
Ver datos de ejemplo en el diseñador mientras se personaliza el diseño de las páginas |
|
Compilar un prototipo de trabajo que se puede convertir en una aplicación funcional sin necesidad de reimplementación |
|
Diseñar aplicaciones de la Tienda Windows y Windows Phone |
|
Obtener recursos adicionales para el desarrollo de aplicaciones de la Tienda |