Share via

Diseñar aplicaciones de la Tienda Windows con Blend para Visual Studio 2013

  • Artículo

Blend para Visual Studio es una colección de herramientas de diseño incluida con Visual Studio 2013 que puedes usar para crear visualmente aplicaciones de la Tienda Windows compiladas mediante JavaScript, VB, C# o C++.

Blend se instala al instalar Visual Studio. Para buscar Blend, escribe Blend en el cuadro Buscar.

También puedes abrir un proyecto en Blend desde Visual Studio. Con el proyecto abierto en Visual Studio, realiza alguna de las siguientes acciones:

  • En el menú Ver, haz clic en Abrir en Blend.

  • Haz clic con el botón secundario en el archivo de proyecto en el Explorador de soluciones y después haz clic en Abrir en Blend.

    Comando Abrir en Blend de Visual Studio

Para las aplicaciones de la Tienda Windows compiladas mediante JavaScript, Blend incluye un conjunto de herramientas HTML5 y CSS3 que permiten realizar tareas como crear rápidamente animaciones CSS3, definir y administrar estilos, y depurar código HTML y CSS. Para obtener más información, consulta "Diseño de aplicaciones de la Tienda Windows (HTML)" más adelante en este artículo.

Para crear la primera aplicación HTML de la Tienda Windows con Blend, consulte Crear la primera aplicación de la Tienda Windows con Blend, parte 1: la página maestra (HTML y JavaScript).

Para las aplicaciones de la Tienda Windows compiladas mediante VB, C# o C++, Blend incluye un conjunto de herramientas XAML que ayudan a realizar tareas como aplicar rápidamente estilos a controles, crear y definir plantillas, y enlazar con datos de ejemplo. Para obtener más información, consulta "Diseño de aplicaciones de la Tienda Windows (XAML)" más adelante en este artículo.

Para crear la primera aplicación HTML de la Tienda Windows con Blend, consulte Crear la primera aplicación de la Tienda Windows con Blend, parte 1: la página maestra (XAML y C#).

Para obtener más información sobre las novedades de Blend, consulte What’s new for HTML Developers in Blend for Visual Studio 2013 y What’s new in Visual Studio 2013 Preview for authoring Windows Store XAML apps en el blog de Visual Studio.

Usar Blend con Visual Studio

Visual Studio proporciona herramientas esenciales para desarrollar aplicaciones de la Tienda Windows, incluida la administración de licencias de desarrollador, el diseñador de manifiestos, y las herramientas de codificación y empaquetado que te permiten enviar tu aplicación a la Tienda Windows.

Si usas Blend junto con Visual Studio, tendrás acceso a las eficaces herramientas de diseño HTML y XAML de Blend para personalizar más rápida y fácilmente el aspecto de tu aplicación. Puedes centrarte en todos los aspectos de la creación visual de la aplicación, incluida la estructura, el diseño, las vistas de datos y la apariencia de la aplicación, en lugar de centrarte en la sintaxis del código.

Para obtener más información sobre cómo usar Blend con Visual Studio, incluidos los flujos de trabajo y los procedimientos recomendados, consulta Cambiar y volver a Visual Studio.

Puedes abrir y editar proyectos de aplicaciones de la Tienda Windows creados en Visual Studio en Blend, así como abrir y editar aplicaciones de la Tienda Windows creadas en Blend en Visual Studio.

Puedes alternar fácilmente entre Blend y Visual Studio mientras trabajas en un proyecto. Para cambiar de Visual Studio a Blend, haz clic con el botón secundario en el proyecto en el Explorador de soluciones y después haz clic en Abrir en Blend. Para cambiar de Blend a Visual Studio, haz clic con el botón secundario en el proyecto en el panel Proyectos y después haz clic en Editar en Visual Studio.

SugerenciaSugerencia

Puedes tener el mismo archivo de proyecto abierto en Blend y en Visual Studio al mismo tiempo en el mismo equipo. Cuando guardes un cambio en un archivo en una herramienta y cambies a la otra, se te preguntará si deseas recargar el archivo para ver la versión más actualizada del proyecto.

Diseño de aplicaciones de la Tienda Windows (JavaScript y HTML)

Con Blend, puedes crear una nueva aplicación de la Tienda Windows mediante alguna de las plantillas de proyecto HTML integradas o abrir una aplicación de la Tienda Windows existente creada en Visual Studio. Como cualquier aplicación Windows nativa, una aplicación de la Tienda Windows compilada mediante HTML5, CSS3 y JavaScript tiene acceso directo a la plataforma subyacente y puede compartir información con otras aplicaciones.

Puedes modificar rápidamente el aspecto de la aplicación mediante un eficaz conjunto de herramientas de diseño HTML5 y CSS3 que te permiten:

  • Crear y modificar elementos HTML   Arrastra y coloca elementos HTML y controles de la aplicación Windows desde el panel Activos a la mesa de trabajo y, después, modifica la jerarquía, establece propiedades y aplica estilos directamente en la interfaz de usuario. Consulta Crear y diseñar una plantilla de elementos.

  • Ver estados en tiempo de ejecución   Usa el modo interactivo para tener acceso y después modificar la aplicación en estados que de otra forma solo estarían disponibles en tiempo de ejecución. Usar el modo interactivo.

  • Mostrar datos en tiempo de diseño   Enlaza a datos y muéstralos en la aplicación de la Tienda Windows para poder modificar más fácilmente el aspecto de tus datos en tiempo de ejecución. Consulta Enlazar los datos de la película.

  • Incrustar fuentes personalizadas   Usa el administrador de familias de fuentes para incrustar fuentes personalizadas en la aplicación de la Tienda Windows. Consulta Incrustar una fuente personalizada.

  • Crear animaciones CSS3   Crea y edita animaciones CSS3 usando la escala de tiempo de animación de fotogramas clave integrada.

  • Definir y administrar estilos   Crea rápidamente estilos CSS con el panel Reglas de estilo y después usa el panel Propiedades CSS para aplicar definiciones de estilo, ver la cascada CSS de cualquier elemento (la regla Propiedades prevalentes) o determinar cómo Windows 8.1 calculará los valores de propiedad CSS para cada elemento (la regla virtual Valores calculados). Consulta Definir reglas de estilo CSS.

  • Depurar código HTML y CSS    Depura visualmente el código HTML y CSS en Blend identificando y resolviendo los errores que se muestran en el panel Resultados.

Para obtener más información sobre las novedades de diseño de las aplicaciones de la Tienda Windows compiladas con JavaScript en Blend, consulte el blog de Visual Studio.

Diseño de aplicaciones de la Tienda Windows (VB/C#/C++ y XAML)

Con Blend, puedes crear una nueva aplicación de la Tienda Windows mediante alguna de las plantillas de proyecto XAML integradas o abrir una aplicación de la Tienda Windows existente creada en Visual Studio. Como cualquier aplicación Windows nativa, una aplicación de la Tienda Windows compilada mediante XAML y VB, C# o C++ tiene acceso directo a la plataforma subyacente y puede compartir información con otras aplicaciones.

Puedes modificar rápidamente el aspecto de la aplicación mediante un eficaz conjunto de herramientas de diseño XAML que te permiten:

  • Crear un diseño personalizado   Usa herramientas de diseño eficaces, incluidas plantillas, controles integrados, reglas, guías y la función de ajuste, para crear diseños personalizados para la aplicación de la Tienda Windows. Consulta Aplicar estilo a la vista de datos.

  • Crear y diseñar controles   Arrastra y coloca controles en la superficie de diseño y después edítalos modificando las propiedades directamente en la interfaz de usuario. Aplicar estilo a imágenes y elementos.

  • Crear y editar plantillas de control   Usa las herramientas de edición de plantillas para crear plantillas de control personalizadas que puedas reutilizar en todo el proyecto. Agrégalas a la biblioteca de controles para reutilizarlas en otros proyectos además de en el actual. Consulta Convertir una imagen en un control de usuario.

  • Crear y editar plantillas de datos   Crea plantillas que definan el modo en que deseas que se muestren los datos en la aplicación. Consulta Crear los enlaces de datos y aplicarles estilo.

  • Mostrar datos de ejemplo y en tiempo de diseño   Crea un enlace a datos y muestra los datos en la aplicación de la Tienda Windows para poder modificar más fácilmente el aspecto de tus datos en tiempo de ejecución. Consulta Establecer DataContext.

  • Usar los comportamientos para agregar interactividad   Agrega interactividad a la aplicación arrastrando un comportamiento integrado en el objeto en la superficie de diseño y modificando las propiedades según tus necesidades. Consulta Agregar un compartimiento integrado.

  • Editar marcado XAML   Además de las herramientas de interfaz de usuario que permiten crear y modificar fácilmente código XAML sin tocar el código, Blend incorpora también un eficaz editor de código XAML que te permite realizar cambios rápida y fácilmente directamente en el marcado XAML. Consulta Depurar XAML en Blend.

Para obtener más información sobre las novedades de diseño de las aplicaciones de la Tienda Windows compiladas con C#, C++ y VB en Blend, consulte el blog de Visual Studio.

Recursos

Además de la documentación de Blend del Centro de desarrollo de Windows, encontrarás una gran variedad de recursos que te ayudarán a empezar a crear y diseñar aplicaciones de la Tienda Windows, incluidos los siguientes: