Compartir a través de


Áreas del área de trabajo en Blend

Si no ha trabajado nunca con Blend, tómese un momento para familiarizarse con el área de trabajo. Este tema le servirá de paseo introductorio.

En este tema:

  • Paseo por el área de trabajo

  • Paseo por la mesa de trabajo

  • Paseo por el panel Herramientas

  • Paseo por el panel Activos

  • Paseo por el panel Objetos y escala de tiempo

  • Paseo por el panel Propiedades

  • Paseo por el panel Proyectos

  • Paseo por el panel Dispositivo

Paseo por el área de trabajo

Blend tiene dos áreas de trabajo predeterminadas: el área de trabajo Diseño y el área de trabajo Animación. Puede cambiar entre ellas si presiona CTRL + F11.

El área de trabajo Diseño le permite centrarse en la creación general. El área de trabajo Animación mueve el panel Objetos y escala de tiempo bajo la mesa de trabajo para que haya más espacio para mostrar la escala de tiempo.

El área de trabajo Diseño (izquierda) y el área de trabajo Animación (derecha)

eea17aa0-ebae-42b5-a03a-165bf4d54fda

B1_1

Menús

B1_4

Mesa de trabajo

B1_2

Panel Herramientas

B1_5

Panel Proyectos, panel Propiedades y panel Recursos

B1_3

Panel Objetos y escala de tiempo

B1_6

Panel de resultados (bajo el panel Objetos y escala de tiempo cuando se está en el área de trabajo Animación)

El área de trabajo en Blend para Visual Studio consta de todos los elementos de la interfaz visual, lo que incluye la mesa de trabajo, los paneles, las configuraciones del área de trabajo, las vistas de creación y los menús.

Workspaces

B1_1

Pestañas de documentos   Vea todos los documentos de proyectos que están abiertos: ventanas, páginas, diccionarios de recursos y controles de usuario.

B1_2

Archivos activos   Determine el documento que está abierto en la mesa de trabajo y muestre todos los archivos abiertos en las pestañas de documentos.

B1_3

Vistas   Utilice uno de los tres entornos de creación en tiempo real:

  • Vista Diseño Use la vista Diseño para crear documentos mediante una representación visual en la mesa de trabajo.

  • Vista Código Use la vista Código para crear o editar código XAML.

    Nota

    Los paneles Herramientas, Objetos y escala de tiempo y Propiedades no funcionan en la vista Código.Además, la mayoría de los elementos de menú se deshabilitan en esta vista.

  • Vista en dos paneles Muestra la vista Código y la vista Diseño. También puede cambiar la orientación de las ventanas mediante la opción Orientación de la vista en dos paneles del menú Ver.

El área de trabajo de Blend se puede personalizar y escalar de forma exclusiva. Puede cambiar la orientación del panel, acoplar paneles o convertirlos en flotantes, cambiar el tamaño de los paneles arrastrando los bordes, acercar la mesa de trabajo y alternar el ajuste de objetos en la mesa de trabajo. Además, puede cambiar la combinación de colores del área de trabajo mediante la propiedad Theme (tema) del cuadro de diálogo Opciones (disponible a través del menú Herramientas).

Paseo por la mesa de trabajo

La mesa de trabajo es su superficie de trabajo. Para diseñar visualmente un documento, dibuje objetos y modifíquelos.

78ec5d4d-3af1-46bd-ab63-bc4fc542806f

B1_1

Área de diseño visual   Establezca las opciones de la mesa de trabajo, como cambiar el color del fondo, en el cuadro de diálogo Opciones.

B1_2

Editor XAML   Edite el código XAML en el Editor XAML.

B1_3

Controles de la mesa de trabajo   Use estos controles para aplicar zoom a la mesa de trabajo, activar la representación de efectos, establecer opciones de ajuste y activar anotaciones de archivos.

B1_4

Fichas de documentos   Utilícelas cuando tenga abierto más de un documento en la mesa de trabajo; haga clic en la ficha correspondiente para cambiar de un documento a otro.

B1_5

Botones de vista   Use este botones para cambiar entre la Vista de diseño, la Vista XAML y la Vista en dos paneles.

B1_6

Manipuladores de objetos   Utilice los manipuladores de objetos para modificar el objeto con el mouse.

Vea un vídeo corto: Configure Installed Features The artboard.

Paseo por el panel Herramientas

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.

Tools panel

B1_1

Herramientas de selección   Seleccione objetos y trazados.

Utilice la herramienta Selección directa para seleccionar objetos anidados y segmentos de trazados.

Callout A

Herramientas de pincel y degradado

B1_2

Herramientas de vista   Ajuste la vista de la mesa de trabajo; por ejemplo, para desplazarla lateralmente y hacer zoom.

Callout B

Herramientas de trazado

B1_3

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.

Callout C

Herramientas de forma

B1_4

Herramientas de objeto   Dibuje en la mesa de trabajo los objetos más habituales, como trazados, formas, paneles de diseño, texto y controles.

Callout D

Paneles de diseño

B1_5

Herramientas de activos   Acceda al panel Activos y muestre el último activo de la biblioteca que se ha utilizado.

Callout E

Controles de texto 

Callout F

Controles comunes 

Vea un vídeo corto: Configure Installed Features The Toolbar.

Paseo por el panel Activos

El panel Herramientas muestra los controles más populares, pero puede encontrarlos todos en el panel Activos. De hecho, encontrará todo lo que puede agregar a la mesa de trabajo, incluidos controles, estilos, elementos multimedia, comportamientos y efectos.

Assets panel

B1_1

Cuadro de búsqueda   Escriba texto en el cuadro Buscar para filtrar la lista de activos.

B1_2

Modo 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.

B1_3

Categorías de activos   Haga clic en una categoría o subcategoría para ver la lista de activos de esa categoría.

B1_4

Estilos   Muestre todos los estilos que se encuentran en el diccionario de recursos.

B1_5

Descripción   Permite ver una descripción de la categoría o subcategoría de activos seleccionada.

Paseo por el panel Objetos y escala de tiempo

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

Object and Timeline panel in animation mode

B1_1

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.

B1_2

Indicador de modo de grabación Vea si se están grabando cambios de propiedad en una escala de tiempo.

B1_3

Selector de guiones gráficos   Vea una lista de los guiones gráficos creados.

B1_4

Cerrar guión gráfico Cierre el guión gráfico actual.

B1_5

Opciones de guión gráfico Puede crear, duplicar, revertir, eliminar o cerrar un guión gráfico, y también cambiarle el nombre.

B1_6

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.

B1_7

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.

B1_8

Registro de un fotograma clave Registre una instantánea de las propiedades del objeto seleccionado en el momento actual.

B1_9

Opciones de ajuste Establezca el ajuste de escala de tiempo, la resolución de ajuste y desactive el ajuste a la escala de tiempo.

97fa60b9-0caf-4387-9225-b57510d32209

Mostrar/Ocultar, Bloquear/Desbloquear   Muestre u oculte las opciones de visibilidad y bloqueo para la vista de objetos.

B1_11

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.

B1_12

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.

B1_13

Fotogramas clave establecidos en escalas de tiempo   Cambie el valor de una propiedad en un momento específico en el tiempo.

d839d12c-07a1-4127-a830-4a8e7069f4fe

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).

B1_15

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.

Callout 16

Á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.

Paseo por el panel Propiedades

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.

Properties panel

Categorías   Expanda y contraiga las categorías de propiedades. Haga clic en Expandir 6375953d-074c-421a-bbb3-6f5055b67b64 y Contraer para mostrar u ocultar los detalles de la categoría.

B1_1

Nombre y tipo   Vea el icono, el nombre y el tipo del objeto seleccionado.

B1_2

Organizar por Organice las propiedades alfabéticamente por nombre, origen o categoría.

B1_3

Propiedades del pincel Establezca las propiedades visuales de pinceles como los pinceles de relleno, trazo y primer plano.

B1_4

Editor de colores   Sirve para los pinceles de color sólido y degradado.

B1_5

Selector de color Seleccione un color.

B1_6

Chips de color   Vea los colores inicial, actual y último.

B1_7

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.

B1_8

Propiedades y eventos Establezca las propiedades o elija los eventos para un elemento seleccionado.

B1_9

Cuadro de búsqueda Permite buscar propiedades. Filtre las propiedades que se muestran al escribir en el cuadro Búsqueda.

97fa60b9-0caf-4387-9225-b57510d32209

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.

B1_11

Recursos de color Aplique exactamente el mismo color a diferentes propiedades. La pestaña Recursos de color incluye Recursos locales y Recursos del sistema.

B1_12

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).

B1_13

Canal alfa   Modifique el valor alfa mediante el editor de números situado al lado de A.

d839d12c-07a1-4127-a830-4a8e7069f4fe

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.

B1_15

Valor hexadecimal   Vea el valor hexadecimal del color mostrado.

Callout 16

Control deslizante de degradado Aparece únicamente si se selecciona un pincel de degradado.

d50027a1-6824-4ad8-8b4e-558b0756dcf8

Mostrar propiedades avanzadas   Vea las categorías de propiedades que se usan con menos frecuencia.

Vea un vídeo corto: Configure Installed Features Properties panel.

Paseo por el panel Proyectos

Utilice el panel Proyectos para administrar los archivos del proyecto.

604be326-7297-454f-9e70-ac79cc4dd9f1

B1_1

Cuadro de búsqueda   Escriba texto en el cuadro Buscar para filtrar la lista de archivos del proyecto.

B1_2

Solución   Contiene el proyecto de aplicación y los archivos correspondientes.

B1_3

Referencias   Incluye referencias del proyecto como archivos DLL.

B1_4

Elemento vinculado   Se superpone una flecha sobre un icono de elemento vinculado, lo que significa que el elemento no existe en la carpeta del proyecto.

B1_5

SampleData   Incluye archivos de datos de muestra generados.

B1_6

MainWindow.xaml   Archivo de código subyacente para el documento principal.

B1_7

ResourceDictionary   Conjunto de recursos que se puede compartir durante todo el proyecto.

Vea un vídeo corto: Configure Installed Features The Project panel.

Paseo por el panel Dispositivo

Este panel le ayudará a simular varias vistas de la aplicación durante su ejecución.

Device panel

B1_1

Apariencia   Muestra una vista previa de los diferentes tamaños y resoluciones de la aplicación.

B1_2

Orientación   Muestra una vista previa de las diferentes orientaciones de la aplicación: Horizontal o Vertical.

B1_3

Borde   Muestra una vista previa de las diferentes alineaciones de los bordes de la aplicación: Ambos, Izquierdo, Derecho o Ninguno.

B1_4

Contraste alto   Muestra una vista previa de la aplicación en función de la configuración de contraste seleccionada. Al establecerse en un valor distinto de Predeterminado, esta configuración invalidará la propiedad RequestedTheme establecida en App.xaml.

B1_5

Invalidar ajuste de escala   Muestra una vista previa de la aplicación con una escala de visualización mayor. Si la escala de visualización es del 100 %, Invalidar ajuste de escala simulará una escala de visualización del 140 %. Si la escala de visualización es del 140 %, la escala simulada será del 180 %.

B1_6

Tema   Muestra una vista previa de la aplicación en función del tema seleccionado.

B1_7

Ancho mínimo   Muestra una vista previa de la aplicación con la configuración de ancho mínimo. El ancho mínimo se puede cambiar en App.xaml.

B1_8

Mostrar cromo Active o desactive la casilla Mostrar cromo para activar o desactivar el marco de tableta simulado alrededor de la aplicación en la vista de Diseño.

B1_9

Recortar para mostrar Active o desactive la casilla Recortar para mostrar para recortar todo el documento o mostrar la pantalla del documento.

97fa60b9-0caf-4387-9225-b57510d32209

Destino de implementación Seleccione el dispositivo de destino donde se implementará la aplicación cuando se compile.

Ayúdenos a desarrollar nuestro contenido

Si ha encontrado un vídeo o un artículo que le haya ayudado a familiarizarse con el área de trabajo de Blend, compártalo con nosotros. Después de revisar el contenido, quizá lo agreguemos como vínculo para que otros puedan beneficiarse de su descubrimiento.

También nos gustaría que nos sugiriese nuevos vídeos. En caso de recibir solicitudes similares de otras personas, crearemos un vídeo si así nos lo permiten nuestro tiempo y prioridades.

Nadie conoce su negocio mejor que usted. Por lo tanto, díganos qué recursos le han ayudado a familiarizarse con el espacio de trabajo de Blend e indíquenos qué áreas necesitan explicarse mejor, tanto por nuestra parte como por parte de cualquier miembro de nuestra comunidad. De este modo, podremos perfeccionar el contenido para ayudarle.

Comparta sus sugerencias aquí.