Creación de una interfaz de usuario con Blend para Visual Studio

 

Para obtener la documentación más reciente de Visual Studio 2017 RC, consulte Documentación de Visual Studio 2017 RC.

Blend para Visual Studio le ayuda a diseñar aplicaciones de escritorio de Windows basadas en XAML, aplicaciones web, aplicaciones de Windows Phone y aplicaciones de la Tienda Windows. Proporciona la misma experiencia de diseño XAML básica que Visual Studio y agrega diseñadores visuales para tareas avanzadas como animaciones y comportamientos.

Si no ha trabajado nunca con Blend para Visual Studio, tómese un momento para familiarizarse con las características exclusivas del área de trabajo. Este tema le servirá de paseo introductorio.

System_CAPS_ICON_note.jpg Nota

Para recorrer las características de diseño compartido como la mesa de trabajo, la ventana Esquema del documento y la ventana Dispositivo, consulte Tutorial: Crear una UI usando el Diseñador XAML.

En este tema:

Puede usar el panel Herramientas en Blend para Visual Studio para crear y modificar objetos en la aplicación. Para crear objetos, seleccione una herramienta y dibuje en la mesa de trabajo utilizando el mouse.

Herramientas de selección Seleccione objetos y trazados.

Utilice la herramienta Selección directa para seleccionar objetos anidados y segmentos de trazados.
Llamada AHerramientas de pincel y degradado
Herramientas de vista Ajuste la vista de la mesa de trabajo; por ejemplo, para desplazarla lateralmente y hacer zoom.Llamada BHerramientas de trazado
Herramientas de pincel Trabaje con los atributos visuales de un objeto; por ejemplo, transformar un pincel, pintar un objeto o seleccionar los atributos de un objeto para aplicarlos a otro.Llamada CHerramientas de forma
Herramientas de objeto Dibuje en la mesa de trabajo los objetos más habituales, como trazados, formas, paneles de diseño, texto y controles.Llamada DPaneles de diseño
Herramientas de activos Acceda al panel Activos y muestre el último activo de la biblioteca que se ha utilizado.Llamada EControles de texto
Llamada FControles comunes

Vea un breve vídeo: Configurar las características instaladas The Toolbar.

Puede encontrar todos los controles del panel Activos, similar al Cuadro de herramientas de Visual Studio. Además de los controles, encontrará todo lo que puede agregar a la mesa de trabajo en el panel Activos, incluidos estilos, elementos multimedia, comportamientos y efectos.

DescriptionCuadro de búsqueda Escriba texto en el cuadro Buscar para filtrar la lista de activos.
DescriptionModo de cuadrícula y Modo de lista Permite alternar entre la vista Modo de cuadrícula y la vista Modo de lista de los activos.
DescriptionCategorías de activos Haga clic en una categoría o subcategoría para ver la lista de activos de esa categoría.
DescriptionEstilos Muestre todos los estilos que se encuentran en el diccionario de recursos.
DescriptionDescripción Permite ver una descripción de la categoría o subcategoría de activos seleccionada.

Utilice este panel para organizar los objetos en la mesa de trabajo y, si lo desea, para animarlos.

Vista de objetos Vea el árbol visual de un documento. Se pueden mostrar varios niveles de detalle. También se pueden agregar capas para organizar aún más los objetos en la mesa de trabajo, lo que permite bloquear y ocultarlos como grupo.
Indicador de modo de grabación Vea si se están grabando cambios de propiedad en una escala de tiempo.
Selector de guiones gráficos Vea una lista de los guiones gráficos creados.
Cerrar guión gráfico Cierre el guión gráfico actual.
Opciones de guión gráfico Puede crear, duplicar, revertir, eliminar o cerrar un guión gráfico, y también cambiarle el nombre.
Controles de reproducción Navegue a través de la escala de tiempo. Además, puede arrastrar el cabezal de reproducción para navegar por la escala de tiempo.
Devolver ámbito a Establezca de nuevo el ámbito de la vista de objetos en el ámbito u objeto raíz anterior. Solo puede hacerlo cuando está modificando un estilo o una plantilla.
Registro de un fotograma clave Registre una instantánea de las propiedades del objeto seleccionado en el momento actual.
Opciones de ajuste Establezca el ajuste de escala de tiempo, la resolución de ajuste y desactive el ajuste a la escala de tiempo.
Mostrar/Ocultar, Bloquear/Desbloquear Muestre u oculte las opciones de visibilidad y bloqueo para la vista de objetos.
Posición del cabezal de reproducción en la escala de tiempo Muestre la hora actual en milisegundos. Además, se puede escribir directamente un valor de tiempo en este campo para ir a un momento concreto. La precisión depende de la resolución de ajuste establecida en las Opciones de ajuste.
Cabezal de reproducción Determine el momento en el que se encuentra la animación. El cabezal de reproducción se puede arrastrar a lo largo de la escala de tiempo para obtener una vista previa de la animación.
Fotogramas clave establecidos en escalas de tiempo Cambie el valor de una propiedad en un momento específico en el tiempo.
Cambiar orden de los objetos Establezca el orden de presentación de los objetos. Haga clic en este botón para organizar los objetos de la vista de estructura por orden Z (de delante hacia atrás) o por orden de marcado (el orden en que aparecen en la vista XAML).
Zoom de escala de tiempo Establezca la resolución de zoom de la escala de tiempo. El acercamiento le permite modificar una animación con más detalle, mientras que el alejamiento muestra una visión general de lo que ocurre en períodos de tiempo más largos. Si se acerca pero no puede establecer un fotograma clave en la posición temporal que desee, compruebe si la resolución de ajuste es lo bastante alta.
Área de composición de la escala de tiempo Vea la escala de tiempo y mueva los fotogramas clave arrastrándolos o usando sus menús contextuales.

Utilice este panel para ver y modificar las propiedades de un objeto. También puede establecer esas propiedades directamente en la mesa de trabajo. Si lo hace, los cambios de propiedad se reflejarán en el panel Propiedades.

Categorías Expanda y contraiga las categorías de propiedades. Haga clic en Expandir Description y Contraer Contraer para mostrar u ocultar los detalles de la categoría.

Nombre y tipo Vea el icono, el nombre y el tipo del objeto seleccionado.
Organizar por Organice las propiedades alfabéticamente por nombre, origen o categoría.
Propiedades del pincel Establezca las propiedades visuales de pinceles como los pinceles de relleno, trazo y primer plano.
Editor de colores Sirve para los pinceles de color sólido y degradado.
Selector de color Seleccione un color.
Chips de color Vea los colores inicial, actual y último.
Cuentagotas Use el color de cualquier elemento de la pantalla. Cuentagotas de color está disponible cuando se selecciona Pincel de color sólido. Cuentagotas de degradado está disponible cuando se selecciona Pincel de degradado.
Propiedades y eventos Establezca las propiedades o elija los eventos para un elemento seleccionado.
Cuadro de búsqueda Permite buscar propiedades. Filtre las propiedades que se muestran al escribir en el cuadro Búsqueda.
Pestañas del Editor de pinceles Permite seleccionar un editor de pinceles. Puede elegir Sin pincel, Pincel de color sólido, Pincel de degradado, Pincel de diseño en mosaico o Recurso de pincel.
Recursos de color Aplique exactamente el mismo color a diferentes propiedades. La pestaña Recursos de color incluye Recursos locales y Recursos del sistema.
Espacio de colores RGB Modifique los colores mediante el ajuste de los valores de los editores de números R, G o B (rojo, verde, azul).
Canal alfa Modifique el valor alfa mediante el editor de números situado al lado de A.
Convertir color en recurso Convierta el color seleccionado en un recurso de color. Los recursos de color están disponibles al hacer clic en la pestaña Recursos de color.
Valor hexadecimal Vea el valor hexadecimal del color mostrado.
Control deslizante de degradado Aparece únicamente si se selecciona un pincel de degradado.
Mostrar propiedades avanzadas Vea las categorías de propiedades que se usan con menos frecuencia.

Vea un breve vídeo: Configurar las características instaladas Properties panel.

Insertar controles y modificar su comportamiento
Animar objetos
Dibujar formas y trazados
Designing XAML in Visual Studio and Blend for Visual Studio

Mostrar: