Diseño de XAML en Visual StudioDesign XAML in Visual Studio

Las herramientas visuales de Visual Studio y Blend para Visual Studio permiten crear interfaces de usuario atractivas y experiencias multimedia enriquecidas con XAML para diversos tipos de aplicaciones.Visual Studio and Blend for Visual Studio both provide visual tools for building engaging user interfaces and rich media experiences with XAML for a variety of app types. Ambas herramientas comparten un conjunto común de características que incluyen un editor XAML visual, pero Blend para Visual Studio proporciona herramientas de diseño adicionales para tareas más avanzadas, como la animación y los comportamientos.Both tools share a common set of features including a visual XAML editor, but Blend for Visual Studio provides additional design tools for more advanced tasks such as animation and behaviors.

El proceso de diseño de una aplicación depende de la herramienta que elija y de su plataforma de destino.The process of designing an app depends on the tool you choose and your target platform. En este artículo se comparan las herramientas de diseño XAML en Visual Studio y en Blend para Visual Studio.This article compares the XAML design tools in Visual Studio and Blend for Visual Studio. Para obtener tutoriales más detallados sobre el uso de las herramientas, vea los temas siguientes:For more detailed walkthroughs of using the tools, see the following topics:

Elegir la herramienta adecuadaChoose the right tool

La elección de las herramientas de diseño depende en gran medida de sus habilidades.Your choice of design tools is largely dependent on your skill set. Si está más orientado al código, puede escribir código XAML en Visual Studio para llevar a cabo tareas de diseño avanzadas.If you are more code-oriented, you can write XAML code in Visual Studio to accomplish advanced design tasks. Si está más orientado al diseño, Blend para Visual Studio le permite realizar tareas avanzadas sin escribir código.If you are more design-oriented, Blend for Visual Studio lets you perform advanced tasks without writing code.

Puede alternar entre Visual Studio y Blend para Visual Studio, e incluso puede tener el mismo proyecto abierto en ambos al mismo tiempo.You can switch back and forth between Visual Studio and Blend for Visual Studio, and you can even have the same project open in both at the same time. Los cambios realizados en los archivos XAML en un IDE pueden aplicarse a través de recarga automática cuando se cambia al otro IDE.Changes made to XAML files in one IDE can be applied via automatic reload when you switch to the other IDE. Puede controlar el comportamiento de recarga a través de las opciones en el cuadro de diálogo Herramientas > Opciones en cualquiera de los dos IDE.You can control the reload behavior via options in the Tools > Options dialog box in either IDE.

Funcionalidades compartidasShared Capabilities

Para realizar las tareas más básicas, los IDE de Visual Studio y de Blend para Visual Studio comparten el mismo conjunto de ventanas y funcionalidades, con algunas diferencias sutiles.For most basic tasks, the IDE for Visual Studio and Blend for Visual Studio share the same set of windows and capabilities, with some subtle differences. Entre los aspectos destacados se incluyen:Some highlights include:

  • Una interfaz de usuario coherente: las aplicaciones se pueden diseñar en el contexto familiar de la interfaz de usuario de Visual Studio, que permite cambiar entre los IDE de manera más agradable y productiva.A consistent user interface: You can design your applications within the familiar context of the Visual Studio user interface, which makes switching between IDEs a more pleasant and productive experience. Blend para Visual Studio usa el tema oscuro de Visual Studio, lo que le ayuda a centrarse en el contenido que está diseñando, ya que mejora el contraste entre el contenido y la interfaz de usuario.Blend for Visual Studio uses the Visual Studio Dark theme that helps you focus on the content you are designing by improving the contrast between your content and the user interface. Vea Crear una IU con el Diseñador XAML.See Create a UI by using XAML Designer.

    Blend para IDE de Visual Studio

  • IntelliSense en XAML: los dos IDE admiten todas las funcionalidades comunes que cabe esperar de IntelliSense, incluida la finalización de instrucciones, la compatibilidad con operaciones comunes de editor, como comentar y dar formato al código, y la navegación a los recursos, los enlaces y el código.XAML IntelliSense: Both IDEs support all of the common capabilities you would expect from IntelliSense including statement completion, support for common editor operations like commenting and formatting code, and navigation to resources, binding, and code.

  • Funciones básicas de depuración: ahora se puede depurar en Blend, e incluso establecer puntos de interrupción en el código para depurar la aplicación en ejecución.Basic debugging capabilities: You can now debug in Blend, including setting breakpoints in your code to debug your running app. Para mantener una experiencia de depuración coherente con Visual Studio, Blend para Visual Studio incluye la mayoría de las barras de herramientas y ventanas de depuración de Visual Studio.To maintain a consistent debugging experience with Visual Studio, Blend for Visual Studio includes most of Visual Studio's debugging windows and toolbars. Las funcionalidades de depuración avanzadas, como el diagnóstico y el análisis de código, solo están disponibles en Visual Studio.Advanced debugging capabilities such as diagnostics and code analysis are only available in Visual Studio. Vea Depurar en Visual Studio.See Debug in Visual Studio.

  • Experiencia de recarga de archivos: tanto si los archivos XAML se editan en Blend para Visual Studio como en Visual Studio, los archivos editados se recargarán de forma automática al cambiar de uno a otro.File reload experience: You can edit your XAML files in either Blend for Visual Studio or Visual Studio, and have your edited files reload automatically as you switch between them. Para minimizar las interrupciones del flujo de trabajo, ahora puede establecer las preferencias de recarga de archivos en el cuadro de diálogo de recarga de archivos.To minimize workflow interruptions, you can now set your file reload preferences in the file reload dialog.

    Experiencia de recarga de archivo

  • Diseños y configuraciones sincronizados: los diseños personalizados permiten guardar y aplicar las personalizaciones de diseño de la ventana de herramientas.Synchronized Layouts and Settings: Custom layouts enable you to save and apply tool window layout customizations. Visual Studio sincroniza estas personalizaciones y preferencias de Visual Studio y Blend para Visual Studio en los equipos cuando inicia sesión con la misma cuenta de Microsoft.Visual Studio synchronizes these customizations and preferences for both Visual Studio and Blend for Visual Studio across machines when you sign in with the same Microsoft account. Vea Sincronizar la configuración de Visual Studio en varios equipos.See Synchronize settings across multiple computers.

  • Explorador de soluciones común: el Explorador de soluciones proporciona una vista organizada de los proyectos y los archivos, así como acceso a los comandos asociados a ellos.A common Solution Explorer: Solution Explorer provides you with an organized view of your projects and their files, as well as ready access to the commands associated with them. Con el Explorador de soluciones, es más fácil trabajar con proyectos empresariales grandes.With Solution Explorer, it is easier to work with big enterprise projects. Vea Soluciones y proyectos.See Solutions and projects.

  • Team Explorer: con Team Explorer se pueden administrar los proyectos con repositorios GIT o TFS para facilitar la colaboración en equipo.Team Explorer: With Team Explorer you can manage your projects with GIT or TFS repositories to facilitate team collaboration. Consulte Trabajar en Team Explorer.See Work in Team Explorer.

  • NuGet: los paquetes NuGet se pueden administrar en Visual Studio y Blend para Visual Studio.NuGet: You can manage NuGet packages in both Visual Studio and Blend for Visual Studio. NuGet es un administrador de paquetes para .NET Framework que simplifica la instalación y la eliminación de paquetes de una solución.NuGet is a package manager for the .NET Framework that simplifies the installation and removal of packages from a solution.

Funcionalidades avanzadas de Blend para Visual StudioAdvanced Capabilities in Blend for Visual Studio

Para aumentar la productividad, considere el uso de Blend para Visual Studio para las siguientes tareas.To increase your productivity, consider using Blend for Visual Studio for the following tasks. Estas son las áreas en las que Blend para Visual Studio ofrece más velocidad y funcionalidad que el diseñador de Visual Studio o el código por sí solos.These are the areas where Blend for Visual Studio offers more speed and functionality than the Visual Studio designer or code alone.

EnTo Programa para la mejoraVisual Studio Blend para Visual StudioBlend for Visual Studio Más informaciónMore information
Crear animacionesCreate animations No hay ninguna herramienta de diseño para animaciones; debe crearse mediante programación.There is no design tool for animations; you have to create them programmatically. Esto requiere tener conocimientos del sistema de animación y temporización en WPF y una amplia experiencia en codificación.This requires an understanding of the animation and timing system in WPF and extensive coding expertise. Puede crear animaciones visualmente y verlas previamente en Blend para Visual Studio.You create animations visually and can preview them in Blend for Visual Studio. Esto es más rápido y preciso que la compilación de las animaciones en el código.This is faster and more accurate than building your animations in code. Puede agregar desencadenadores para controlar la interacción del usuario y puede cambiar al código para agregar controladores de eventos y otras funciones.You can add triggers to handle user interaction, and you can switch to code to add event handlers and other functionality. Animar objetosAnimate objects
Convertir formas y texto en trazados para una manipulación más fácilTurn shapes and text into paths for easier manipulation No se admite.Not supported. 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.You can make subtle or dramatic changes to shapes (such as rectangles and ellipses) by converting them to paths, which provide better editing control. Puede cambiar la forma de los trazados, combinarlo y crear trazados compuestos de varias formas.You can reshape or combine paths, and create compound paths from multiple shapes.

También puede convertir bloques de texto en trazados para manipularlos como imágenes vectoriales.You can also convert text blocks into paths to manipulate them as vector images.
Dibujar formas y trazadosDraw shapes and paths
Agregar interactividad a los diseños de interfaz de usuarioAdd interactivity to your UI designs Requiere código de C#, Visual Basic o C++.Requires C#, Visual Basic, or C++ code. Arrastre y coloque comportamientos en los controles para agregar interactividad a los diseños estáticos.Drag and drop behaviors onto controls to add interactivity to your static designs. Los comportamientos son fragmentos de código listos para usar que encapsulan funcionalidades como arrastrar y colocar, zoom y cambios de estado visual.Behaviors are ready-to-use code snippets that encapsulate functionality such as drag/drop, zoom, and visual state changes. Hay un conjunto cada vez mayor de comportamientos entre los que puede elegir, pero también puede crear los suyos propios.There's a growing set of behaviors from which you can choose, and you can create your own.

Después puede personalizar cada comportamiento mediante la modificación de sus propiedades en Blend para Visual Studio o la adición de controladores de eventos en código.You can then customize each behavior by changing its properties in Blend for Visual Studio or by adding event handlers in code.
Insertar controles y modificar su comportamientoInsert controls and modify their behavior
Usar material gráfico de AdobeUse Adobe artwork No se admite.Not supported. Importe material gráfico de Adobe FXG, PhotoShop o Illustrator e implemente la interfaz de usuario en Blend para Visual Studio.Import Adobe FXG, PhotoShop, or Illustrator artwork and implement the UI in Blend for Visual Studio. Insertar imágenes, vídeos y clips de audioInsert images, videos, and audio clips
Editar controles, plantillas y estilosEdit controls, templates, and styles Requiere codificación y conocimientos de plantillas y estilos WPF.Requires coding and knowledge of WPF styles and templates. Convierta cualquier imagen en un control.Turn any image into a control.

Utilice las herramientas de edición de plantillas para realizar cambios en controles, estilos y plantillas con unos pocos clics del ratón.Use the template editing tools to make changes to controls, styles, and templates with just a few mouse clicks.

Por ejemplo, puede usar recursos de estilo de Blend para Visual Studio 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 para Visual Studio.For example, you can use Blend for Visual Studio style resources to implement common WPF controls (such as buttons, list boxes, scroll bars, menus, etc.), and change their color, style, or underlying template directly in Blend for Visual Studio. A continuación, puede cambiar a código para dar los últimos retoques si lo desea.You can then switch to code for finishing touches if you want.
Modificar el estilo de objetosModify the style of objects
Conectar la interfaz de usuario a los datosConnect your UI to data 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.You can create a data source from resources such as SQL Server databases, WCF or web services, objects, or SharePoint lists, and bind the data source to your UI controls.

Los datos en tiempo de diseño deben crearse manualmente para una experiencia de diseño interactivo.Design-time data must be created by hand for an interactive design experience.
Cree fácilmente datos de ejemplo para prototipos y pruebasCreate sample data easily for prototyping and testing. y cambie a datos reales cuando esté listo.Switch to live data when you're ready.

Las capacidades de generación de datos de Blend para Visual Studio son excepcionales (puede agregar nombres, números, direcciones URL y fotografías de manera fácil y rápida) y pueden ahorrarle mucho tiempo.Blend for Visual Studio's data generation capabilities are outstanding (you can add names, numbers, URLs, and photos easily on the fly), and can save you a lot of time.

Para datos reales, puede enlazar los controles de interfaz de usuario a un archivo XML o a cualquier origen de datos CLR.For live data, you can bind your UI controls to an XML file or to any CLR data source.
Mostrar datosDisplay data

Para obtener más información sobre el diseño XAML avanzado, vea Creación de una interfaz de usuario con Blend para Visual Studio.For more information about advanced XAML design, see Create a UI by using Blend for Visual Studio.