Crear una IU con el Diseñador XAMLCreate a UI by using XAML Designer

El Diseñador XAML en Visual Studio y Blend para Visual Studio proporciona una interfaz visual que lo ayudará a diseñar aplicaciones basadas en XAML, como aplicaciones de WPF, UWP y Xamarin.Forms.The XAML Designer in Visual Studio and Blend for Visual Studio provides a visual interface to help you design XAML-based apps, such as WPF, UWP, and Xamarin.Forms apps. Puede crear interfaces de usuario para sus aplicaciones arrastrando controles desde la ventana Cuadro de herramientas (ventana Recursos en Blend para Visual Studio) y estableciendo propiedades en la ventana Propiedades.You can create user interfaces for your apps by dragging controls from the Toolbox window (Assets window in Blend for Visual Studio) and setting properties in the Properties window. También puede modificar el XAML directamente en la vista XAML.You can also edit XAML directly in XAML view.

En el caso de los usuarios avanzados, incluso es posible personalizar el Diseñador XAML.For advanced users, you can even customize the XAML Designer.

Área de trabajo del Diseñador XAMLXAML Designer workspace

El área de trabajo en el Diseñador XAML consta de varios elementos de la interfaz visual.The workspace in XAML Designer consists of several visual interface elements. Estos incluyen la mesa de trabajo (que es la superficie de diseño visual), el editor XAML, la ventana Esquema del documento (la ventana Objetos y escala de tiempo en Blend para Visual Studio) y la ventana Propiedades.These include the artboard (which is the visual design surface), XAML editor, Document Outline window (Objects and Timeline window in Blend for Visual Studio), and Properties window. Para abrir el Diseñador XAML, haga clic con el botón derecho en un archivo XAML en el Explorador de soluciones y elija Ver diseñador.To open the XAML Designer, right-click a XAML file in Solution Explorer and choose View Designer.

El Diseñador XAML proporciona una vista XAML y una vista Diseño sincronizada del marcado XAML representado de la aplicación.XAML Designer provides a XAML view and a synchronized Design view of your app's rendered XAML markup. Con un archivo XAML abierto en Visual Studio o en Blend para Visual Studio, puede cambiar entre la vista Diseño y la vista XAML mediante las pestañas Diseño y XAML.With a XAML file open in Visual Studio or Blend for Visual Studio, you can switch between Design view and XAML view by using the Design and XAML tabs. Puede usar el botón Intercambiar paneles botón Intercambiar paneles en el Diseñador XAMLpara cambiar la ventana que aparece en la parte superior: la mesa de trabajo o el editor XAML.You can use the Swap Panes button Swap Panes button in XAML Designer to switch which window appears on top: either the artboard or the XAML editor.

Vista de diseñoDesign view

En la vista Diseño, la ventana que contiene la mesa de trabajo es la ventana activa y se puede usar como superficie de trabajo principal.In Design view, the window containing the artboard is the active window and you can use it as a primary work surface. Puede usarla para diseñar visualmente una página en la aplicación si agrega, dibuja o modifica elementos.You can use it to visually design a page in your app by adding, drawing, or modifying elements. Para más información, consulte Trabajar con elementos en el Diseñador XAML.For more information, see Work with elements in XAML Designer. Esta ilustración muestra la mesa de trabajo en la vista Diseño.This illustration shows the artboard in Design view.

Vista de diseño del diseñador XAML

Las siguientes características están disponibles en la mesa de trabajo:These features are available in the artboard:

Guías de alineaciónSnaplines

Las guías de alineación son límites de alineación que aparecen como líneas discontinuas de color rojo para mostrar cuándo se alinean los bordes de los controles o cuándo se alinean las líneas base de texto.Snaplines are alignment boundaries that appear as red-dashed lines to show when the edges of controls are aligned or when text baselines are aligned. Los límites de alineación aparecen solamente cuando está habilitado el ajuste a las guías de alineación .Alignment boundaries appear only when snapping to snaplines is enabled.

Raíles GridGrid rails

Los raíles de cuadrícula se usan para administrar las filas y columnas en un panel de cuadrícula.Grid rails are used to manage rows and columns in a Grid panel. Puede crear y eliminar filas y columnas, así como ajustar el alto y el ancho relativos.You can create and delete rows and columns, and you can adjust their relative widths and heights. El raíl Grid vertical, que aparece a la izquierda de la mesa de trabajo, se usa para las filas, mientras que la línea horizontal, que aparece en la parte superior, se usa para las columnas.The vertical Grid rail, which appears on the left of the artboard, is used for rows, and the horizontal line, which appears at the top, is used for columns.

Controles Adorner de GridGrid adorners

Un control Adorner de Grid aparece como un triángulo con una línea vertical u horizontal asociada a él en el raíl Grid.A Grid adorner appears as a triangle that has a vertical or horizontal line attached to it on the Grid rail. Cuando se arrastra un control Adorner de Grid, el ancho o el alto de las filas o las columnas adyacentes se actualiza al mover el mouse.When you drag a Grid adorner, the widths or heights of adjacent columns or rows update as you move the mouse.

Los controles Adorner de Grid se usan para controlar el ancho y alto de las filas y las columnas de Grid.Grid adorners are used to control the width and height of a Grid's rows and columns. Puede agregar una columna o fila nuevas haciendo clic en el raíl Grid.You can add a new column or row by clicking in the Grid rails. Cuando se agrega una línea de fila o columna nueva para un panel Grid que tiene dos o más columnas o filas, aparece una minibarra de herramientas fuera del raíl que permite establecer explícitamente el ancho y el alto.When you add a new row or column line for a Grid panel that has two or more columns or rows, a mini-toolbar appears outside of the rail that enables you to set width and height explicitly. La minibarra de herramientas permite establecer las opciones de ajuste de tamaño de las filas y columnas Grid.The mini-toolbar enables you to set sizing options for Grid rows and columns.

Control Adorner de cuadrícula en el Diseñador XAML

Controladores de tamañoResize handles

Los controladores de tamaño aparecen en los controles seleccionados y le permiten cambiar el tamaño del control.Resize handles appear on selected controls and enable you to resize the control. Cuando cambia el tamaño de un control, suelen aparecer los valores de ancho y alto para ayudarle a ajustar el tamaño del control.When you resize a control, width and height values typically appear to help you size the control. Para más información sobre cómo manipular los controles en la vista Diseño, consulte Trabajar con elementos en el Diseñador XAML.For more information about manipulating controls in Design view, see Work with elements in XAML Designer.

MárgenesMargins

Los márgenes representan la cantidad de espacio fijo comprendido entre el borde de un control y el borde de su contenedor.Margins represent the amount of fixed space between the edge of a control and the edge of its container. Puede establecer los márgenes de un control mediante propiedades Margin en Diseño en la ventana Propiedades.You can set the margins of a control by using the Margin properties under Layout in the Properties window.

Controles Adorner de margenMargin adorners

Use los controles Adorner de margen para cambiar los márgenes de un elemento con respecto a su contenedor de diseño.Use margin adorners to change the margins of an element relative to its layout container. Cuando un control Adorner de margen está abierto, no se establece un margen y el control Adorner de margen muestra una cadena rota.When a margin adorner is open, a margin is not set and the margin adorner displays a broken chain. Cuando el margen no está establecido, los elementos permanecen en su lugar cuando se cambia el tamaño del contenedor de diseño en tiempo de ejecución.When the margin is not set, elements remain in place when the layout container is resized at run time. Cuando el control Adorner de margen está cerrado, dicho control muestra una cadena intacta y los elementos se mueven con el margen cuando se cambie el tamaño del contenedor de diseño en tiempo de ejecución (el margen permanece fijo).When a margin adorner is closed, a margin adorner displays an unbroken chain, and elements move with the margin as the layout container is resized at run time (the margin remains fixed).

Manipuladores de elementoElement handles

Puede modificar un elemento con los manipuladores de elemento que aparecen en la mesa de trabajo cuando se mueve el puntero del mouse sobre los vértices del cuadro azul que rodea al elemento.You can modify an element by using the element handles that appear on the artboard when you move the pointer over the corners of the blue box that surrounds an element. Estos manipuladores permiten girar, cambiar el tamaño, voltear, mover o agregar un radio de redondeo al elemento.These handles enable you to rotate, resize, flip, move, or add a corner radius to the element. El símbolo del manipulador de elemento varía según la función y cambia según la ubicación exacta del puntero.The symbol for the element handle varies by function and changes depending on the exact location of the pointer. Si no ve los manipuladores de elemento, asegúrese de que el elemento está seleccionado.If you don't see the element handles, make sure the element is selected.

En la vista Diseño, en el área inferior izquierda de la ventana, están disponibles otros comandos de la mesa de trabajo, tal como se muestra aquí:In Design view, additional artboard commands are available in the lower-left area of the window, as shown here:

Comandos de la Vista de diseño

Estos comandos están disponibles en esta barra de herramientas:These commands are available on this toolbar:

ZoomZoom

El zoom le permite cambiar el tamaño de la superficie de diseño.Zoom enables you to size the design surface. Puede usar un zoom con un valor del 12,5 % al 800 %, o bien seleccionar opciones como Ajustar a la selección y Ajustarse a todos.You can zoom from 12.5% to 800% or select options such as Fit selection and Fit all.

Mostrar u ocultar cuadrícula de ajusteShow/Hide snap grid

Muestra u oculta la cuadrícula de ajuste que hace visibles las líneas de cuadrícula.Displays or hides the snap grid that shows the gridlines. Las líneas de cuadrícula se usan al habilitar Ajustar a las líneas de cuadrícula o Ajustar a las guías de alineación.Gridlines are used when you enable either snapping to gridlines or snapping to snaplines.

Activar o desactivar el ajuste a las líneas de cuadrículaTurn on/off snapping to gridlines

Si el ajuste a las líneas de cuadrícula está habilitado cuando se arrastra un elemento por la mesa de trabajo, el elemento tiende a alinearse con la línea de cuadrícula vertical u horizontal más cercana.If snapping to gridlines is enabled, when you drag an element on the artboard, the element tends to align with the closest horizontal and vertical gridlines.

Alternar el fondo de la mesa de trabajoToggle artboard background

Alterna entre un fondo claro y uno oscuro.Toggles between a light and dark background.

Activar o desactivar el ajuste a las guías de alineaciónTurn on/off snapping to snaplines

Las guías de alineación le ayudan a alinear los controles entre sí.Snaplines help you align controls relative to each other. Si el ajuste a las guías de alineación está habilitado, al arrastrar un control en relación con otros controles, aparecerán los límites de alineación cuando los bordes y el texto de algunos controles estén alineados horizontal o verticalmente.If snapping to snaplines is enabled, when you drag a control relative to other controls, alignment boundaries appear when the edges and the text of some controls are aligned horizontally or vertically. El límite de alineación es una línea roja discontinua.An alignment boundary appears as a red-dashed line.

Deshabilitar el código de proyectoDisable project code

Deshabilita el código de proyecto, por ejemplo, los controles personalizados y los convertidores de valores, y recarga el diseñador.Disables project code, for example, custom controls and value converters, and reloads the designer.

Vista XAMLXAML view

En la vista XAML, la ventana que contiene el editor XAML es la ventana activa, y el Editor XAML es la herramienta de creación principal.In XAML view, the window containing the XAML editor is the active window, and the XAML editor is your primary authoring tool. El lenguaje XAML proporciona un vocabulario declarativo basado en XML para especificar la interfaz de usuario de una aplicación.The Extensible Application Markup Language (XAML) provides a declarative, XML-based vocabulary for specifying an application's user interface. La vista XAML incluye IntelliSense, formato automático, resaltado de sintaxis y navegación por etiquetas.XAML view includes IntelliSense, automatic formatting, syntax highlighting, and tag navigation. En la imagen siguiente se muestra una vista XAML con un menú de IntelliSense abierto:The following image shows XAML view with an IntelliSense menu open:

Vista XAML

Ventana Esquema del documentoDocument Outline window

La ventana Esquema del documento de Visual Studio es similar a la ventana Objetos y escala de tiempo de Blend para Visual Studio.The Document Outline window in Visual Studio is similar to the Objects and Timeline window in Blend for Visual Studio. Esquema de documento le ayuda a realizar estas tareas:Document Outline helps you perform these tasks:

  • Ver la estructura jerárquica de todos los elementos de la mesa de trabajo.View the hierarchical structure of all elements on the artboard.

  • Seleccionar elementos para poder modificarlos (por ejemplo, moverlos por la jerarquía o establecer sus propiedades en la ventana Propiedades).Select elements so that you can modify them (for example, move them around in the hierarchy or set their properties in the Properties window). Para más información, consulte Trabajar con elementos en el Diseñador XAML.For more information, see Work with elements in XAML Designer.

  • Crear y modificar plantillas para elementos que son controles.Create and modify templates for elements that are controls.

  • Crear animaciones (solo en Blend para Visual Studio).Create animations (Blend for Visual Studio only).

Para ver la ventana Esquema del documento en Visual Studio, en la barra de menús, seleccione Ver > Otras ventanas > Esquema del documento.To view the Document Outline window in Visual Studio, on the menu bar select View > Other Windows > Document Outline. Para ver la ventana Objetos y escala de tiempo en Blend para Visual Studio, en la barra de menús, seleccione Ver > Esquema del documento.To view the Objects and Timeline window in Blend for Visual Studio, on the menu bar select View > Document Outline.

Ventana Esquema del documento en Visual Studio

La vista principal de la ventana Esquema del documento/Objetos y escala de tiempo muestra la jerarquía de un documento en una estructura de árbol.The main view in the Document Outline/Objects and Timeline window displays the hierarchy of a document in a tree structure. Puede usar la naturaleza jerárquica del esquema del documento para examinar el documento en los distintos niveles de detalle y para bloquear y ocultar elementos individualmente o en grupos.You can use the hierarchical nature of the document outline to examine the document at varying levels of detail and to lock and hide elements singly or in groups. Estas son las opciones disponibles en la ventana Esquema del documento/Objetos y escala de tiempo:These are the options available in the Document Outline/Objects and Timeline window:

Mostrar u ocultarShow/hide

Muestra u oculta los elementos de la mesa de trabajo.Displays or hides artboard elements. Cuando se muestra, aparece como el símbolo de un ojo.Appears as a symbol of an eye when shown. También puede presionar Ctrl+H para ocultar un elemento y Mayús+Ctrl+H para mostrarlo.You can also press Ctrl+H to hide an element and Shift+Ctrl+H to show it.

Bloquear o desbloquearLock/unlock

Bloquea o desbloquea los elementos de la mesa de trabajo.Locks or unlocks artboard elements. Los elementos bloqueados no se pueden modificar.Locked elements can't be modified. Cuando se bloquea un elemento, aparece un símbolo de candado.Appears as a padlock symbol when locked. También puede presionar Ctrl+L para bloquear un elemento y Mayús+Ctrl+L para desbloquearlo.You can also press Ctrl+L to lock an element and Shift+Ctrl+L to unlock it.

Devolver ámbito a pageRootReturn scope to pageRoot

La opción que aparece en la parte superior de la ventana Esquema del documento/Objetos y escala de tiempo, que muestra un símbolo de flecha hacia arriba, se mueve al ámbito anterior.The option at the top of the Document Outline/Objects and Timeline window, which shows an up arrow symbol, moves to the previous scope. Esta opción solo es aplicable cuando se está en el ámbito de un estilo o una plantilla.Scoping up is applicable only when you're in the scope of a style or template.

Propiedades (ventana)Properties window

La ventana Propiedades permite establecer valores de propiedad en los controles.The Properties window enables you to set property values on controls. Este es su aspecto:Here's what it looks like:

Propiedades (ventana)

Hay varias opciones en la parte superior de la ventana Propiedades:There are various options at the top of the Properties window:

  • Cambie el nombre del elemento actualmente seleccionado en el cuadro Nombre.Change the name of the currently selected element in the Name box.
  • En la esquina superior izquierda, hay un icono que representa el elemento actualmente seleccionado.In the upper-left corner, there's an icon that represents the currently selected element.
  • Para organizar las propiedades por categoría o alfabéticamente, haga clic en Categoría, Nombreu Origen en la lista Organizar por .To arrange the properties by category or alphabetically, click Category, Name, or Source in the Arrange by list.
  • Para ver la lista de eventos de un control, haga clic en el botón Eventos, que aparece como un símbolo de rayo.To see the list of events for a control, click the Events button, which appears as a lightning bolt symbol.
  • Para buscar una propiedad, empiece a escribir el nombre de la propiedad en el cuadro de búsqueda.To search for a property, start to type the name of the property in the search box. La ventana Propiedades muestra las propiedades que coinciden con la búsqueda a medida que escribe.The Properties window displays the properties that match your search as you type.

Algunas propiedades permiten establecer propiedades avanzadas si selecciona un botón de flecha hacia abajo.Some properties allow you to set advanced properties by selecting a down arrow button.

A la derecha de cada propiedad de valor se encuentra un marcador de propiedad que aparece como un símbolo de cuadro.To the right of each property value is a property marker that appears as a box symbol. La apariencia del marcador de propiedad indica si se aplicó a la propiedad un enlace de datos o un recurso.The appearance of the property marker indicates whether there's a data binding or a resource applied to the property. Por ejemplo, un símbolo de cuadro blanco indica un valor predeterminado, un símbolo de cuadro negro suele indicar que se ha aplicado un recurso local y un símbolo de cuadro naranja suele indicar que se ha aplicado un enlace de datos.For example, a white box symbol indicates a default value, a black box symbol typically indicates that a local resource has been applied, and an orange box typically indicates a data binding has been applied. Al hacer clic en el marcador de propiedad, puede navegar a la definición de un estilo, abrir el generador de enlace de datos o abrir el selector de recursos.When you click the property marker, you can navigate to the definition of a style, open the data binding builder, or open the resource picker.

Para más información sobre cómo usar las propiedades y controlar los eventos, consulte Introducción a los controles y patrones.For more information about using properties and handling events, see Intro to controls and patterns.

Vea tambiénSee also