Información general sobre WPF y Silverlight Designer

[Esta documentación se proporciona solo para fines preliminares y está sujeta a cambios en versiones posteriores. Se incluye temas en blanco como marcadores].

WPF y Silverlight Designer proporciona compatibilidad de diseño visual para crear aplicaciones WPF y de Silverlight. Para compilar las interfaces de usuario de las aplicaciones, arrastre los controles del Cuadro de herramientas y establezca las propiedades en la ventana Propiedades. También puede editar directamente XAML en el editor XAML. En la ilustración siguiente se muestra WPF y Silverlight Designer y algunas de sus ventanas auxiliares.

Al iniciar WPF y Silverlight Designer por primera vez, las ventanas Orígenes de datos y Esquema del documento se contraen en el lado izquierdo de Visual Studio. Si se muestran y anclan las pestañas a la izquierda, se ve la vista anterior, lo cual resulta útil para usar la superficie de diseño.

Este tema contiene las siguientes secciones:

• Vista Diseño

• Vista XAML

• Propiedades (Ventana)

• Orígenes de datos (Ventana)

• Esquema del documento (Ventana)

• Compilar interfaces de usuario interactivas con formato enriquecido

• Colaboración con Expression Blend

Vista Diseño

La Vista de diseño proporciona una superficie de diseño visual para compilar los controles y aplicaciones WPF y de Silverlight. Muestra una presentación del XAML que hay actualmente en la vista XAML. Cuando se cambian los controles en la superficie de diseño, la vista XAML se actualiza para reflejar los cambios. La Vista de diseño proporciona muchas características para organizar los controles en la ventana o en la página de su aplicación WPF. En la siguiente ilustración se muestran algunas de las características de la Vista de diseño.

Zoom

El control Zoom permite controlar el tamaño de la superficie de diseño. Puede hacer zoom desde 10% hasta 20x. El valor de zoom se guarda en el archivo .suo de la solución.

Panorámica

Cuando se aplica el zoom a la superficie de diseño y aparece una barra de desplazamiento horizontal o vertical, puede aplicar la panorámica para ver las partes de la superficie de diseño que están fuera de la pantalla. Mantenga presionada la barra espaciadora y, a continuación, arrastre la superficie de diseño para aplicar la panorámica.

Ajustar a la vista

El botón Ajustar a la vista permite ajustar el tamaño de la superficie de diseño a la pantalla disponible en la Vista de diseño. Esto resulta útil si ha hecho zoom para acercarse o alejarse mucho.

Raíles de la cuadrícula

Los raíles de la cuadrícula se usan para administrar las filas y columnas en un control Grid. Puede crear y eliminar columnas y filas, y puede ajustar el alto y el ancho relativos. Para obtener más información, vea Cómo: Agregar filas y columnas a una cuadrícula.

Líneas de la cuadrícula

Las líneas de la cuadrícula se usan para controlar el ancho y alto de las columnas y filas de un objeto Grid. Para agregar una nueva columna o fila, haga clic en los raíles situados encima y a la izquierda de Grid. Para obtener más información, vea Cómo: Agregar filas y columnas a una cuadrícula.

Indicadores de línea de cuadrícula

Un indicador de línea de cuadrícula aparece como un triángulo en el raíl de la cuadrícula. Al arrastrar un indicador de línea de cuadrícula o la propia línea de cuadrícula, el ancho o el alto de las columnas o filas adyacentes se actualiza al mover el mouse. Para obtener más información, vea Cómo: Agregar filas y columnas a una cuadrícula.

Icono de desplazamiento

Un icono de desplazamiento aparece en la parte superior izquierda de un control de panel seleccionado y permite mover el panel. Haga clic en el icono de desplazamiento y arrastre el control hacia la posición deseada en la superficie de diseño. Para obtener más información, vea Cómo: Seleccionar y mover elementos en la superficie de diseño.

Asas de ajuste de tamaño

Las asas de ajuste de tamaño aparecen en los controles seleccionados y permiten cambiar el tamaño del control. Cuando se cambia el tamaño de un control, normalmente aparecen valores de ancho y alto para ayudar a ajustar el tamaño del control con exactitud.

Líneas del margen

Los márgenes representan la cantidad de espacio fijo comprendido entre el borde de un control y el borde de su contenedor. Establezca los márgenes de un control haciendo clic en las líneas del margen. Para obtener más información, vea Cómo: Establecer los márgenes de un control en WPF Designer.

Códigos auxiliares de margen

Un código auxiliar de margen aparece en un control seleccionado cuando el margen de este está establecido en 0. Haga clic en el código auxiliar de margen para establecer una distancia de margen hasta el borde correspondiente del contenedor. Para obtener más información, vea Cómo: Establecer los márgenes de un control en WPF Designer.

Líneas de ajuste

Las guías de alineación ayudan a alinear los controles entre sí. Si están habilitadas, al arrastrar un control en relación con otros controles, las guías de alineación aparecen cuando los bordes y el texto de algunos controles están alineados horizontal o verticalmente. Para obtener más información, vea Cómo: Alinear con márgenes y líneas base del texto.

Barra de información

La barra de información aparece en la parte superior de la Vista de diseño y muestra información sobre cómo presentar los problemas en dicha vista. En algunos casos, puede hacer clic en la barra de información para obtener información adicional sobre el problema. En la siguiente ilustración se muestra una vista expandida de la barra de información.

Barra de tamaño

Al mover el puntero del mouse sobre un raíl de la cuadrícula para un control Grid que tiene dos o más columnas o filas, aparece la barra de tamaño fuera del raíl. La barra de tamaño permite establecer las opciones de tamaño fijo, proporcional y automático para las filas y las columnas de Grid. Para obtener más información, vea Cómo: Cambiar el tamaño de filas y columnas en un control Grid.

Etiqueta de tamaño de raíz

La etiqueta de tamaño de raíz aparece en la parte inferior derecha de la ventana en la Vista de diseño cuando la ventana está seleccionada. Dicha etiqueta permite alternar el tamaño raíz de la ventana entre automático y fijo. Para obtener más información, vea Atributos en tiempo de diseño.

Vista XAML

El lenguaje XAML proporciona un vocabulario declarativo, basado en XML, para especificar la interfaz de usuario de una aplicación. WPF y Silverlight Designer proporciona una vista XAML y una Vista de diseño sincronizada del marcado XAML que presenta la aplicación. La vista XAML incluye IntelliSense, formato automático, resaltado de sintaxis y navegación por etiquetas. En la siguiente ilustración se muestran algunas de las características de XAML.

Barra de vista en dos paneles

La barra de vista en dos paneles permite controlar los tamaños relativos de la Vista de diseño y la vista XAML. También puede intercambiar las vistas, especificar si la vista en dos paneles es horizontal o vertical y contraer cualquiera de las vistas. Para obtener más información, vea Vista dividida: Ver la superficie de diseño de WPF y XAML al mismo tiempo.

IntelliSense de extensiones de marcado

Además de IntelliSense de lenguaje estándar, la vista XAML admite IntelliSense para extensiones de marcado. Al escribir una llave de apertura ({) en la vista XAML, IntelliSense muestra las extensiones de marcado disponibles. Al seleccionar una extensión de marcado en la lista, IntelliSense muestra los atributos disponibles. Para obtener más información, vea Tutorial: Editar XAML en WPF Designer.

Explorador de etiquetas

El explorador de etiquetas aparece bajo la vista XAML y permite moverse a cualquier etiqueta primaria de la etiqueta actualmente seleccionada en la vista mencionada. Al mover el puntero del mouse sobre una etiqueta en el explorador de etiquetas, se muestra una vista previa en miniatura de ese elemento. Tutorial: Editar XAML en WPF Designer.

Zoom

El control Zoom permite controlar el tamaño de la vista XAML. Puede usar el zoom desde 20% hasta 400%.

Propiedades (Ventana)

La ventana Propiedades permite establecer los valores de propiedad en los controles en la Vista de diseño. En la siguiente ilustración se muestra un ejemplo de la ventana Propiedades.

La parte superior de la ventana Propiedades tiene varias opciones. Para cambiar el nombre del control seleccionado actualmente, coloque el cursor en el cuadro Nombre y escriba el nombre. En la esquina superior derecha se muestra una vista previa en miniatura del control seleccionado actualmente. Para enumerar las propiedades por categoría o alfabéticamente, haga clic en el botón Por categorías o Alfabético. Para ordenar las propiedades por origen, haga clic en el botón Ordenar por origen de propiedad. Para ver la lista de eventos de un control, haga clic en el botón Eventos. Para buscar una propiedad, empiece a escribir el nombre de esta en el cuadro Buscar. La ventana Propiedades muestra las propiedades que coinciden con su búsqueda cuando escribe.

A la derecha del nombre de la propiedad, en la primera columna, aparece un marcador de propiedad. El marcador de propiedad indica si se ha aplicado a la propiedad un recurso o enlace de datos. Al hacer clic en el marcador de propiedad, puede abrir el generador de enlace de datos, el selector de recursos o navegar a la definición de un recurso. En la siguiente ilustración se muestran las opciones que están disponibles cuando hace clic en el marcador de propiedad de un estilo.

Generador de enlace de datos

El generador de enlace de datos permite crear enlaces de datos sin necesidad de escribir código XAML. Puede crear enlaces a los recursos, contextos de datos y propiedades de los elementos. También puede aplicar convertidores de valores. Para obtener más información, vea Tutorial: Crear un enlace de datos mediante WPF Designer y Tutorial: Usar DesignInstance para enlazar datos en el diseñador.

Editor de márgenes

El editor de márgenes le permite ver la configuración de cada margen y su efecto sobre la posición del control. Con el editor de márgenes, también puede cambiar los márgenes de un control o modificar los márgenes de varios controles. Para obtener más información, vea Cómo: Establecer los márgenes de un control en WPF Designer.

Selector de recursos

El selector de recursos permite buscar recursos y asignarlos a las propiedades en la ventana Propiedades. También puede extraer los valores codificados de forma rígida a los recursos para promover la reutilización. Para obtener más información, vea Usar recursos.

Editor de pinceles

El editor de pinceles permite crear muchos tipos distintos de pinceles en la ventana Propiedades. Para obtener más información, vea Cómo: Crear un pincel mediante el editor de pinceles.

Orígenes de datos (Ventana)

Para integrar datos de forma rápida en la aplicación WPF, use Orígenes de datos (ventana). Una vez establecida una conexión de datos, puede arrastrar las tablas de datos a la superficie de diseño y se generarán automáticamente lógica de negocios y enlaces de datos. Se puede enlazar a un objeto, conjunto de datos de ADO.NET, Entity Data Model o servicio. Para obtener más información, vea Enlazar controles WPF a datos en Visual Studio.

Esquema del documento (Ventana)

La ventana Esquema del documento proporciona una vista jerárquica de un documento XAML. Puede usar la ventana Esquema del documento para obtener una vista previa y para seleccionar o eliminar elementos XAML. En la siguiente ilustración se muestra un ejemplo de la ventana Propiedades.

Para obtener más información, vea Navegar en la jerarquía de elementos de un documento de WPF.

Compilar interfaces de usuario interactivas con formato enriquecido

En WPF, las clases Window y Page son superficies visuales en las que se muestra información al usuario. Normalmente, para compilar aplicaciones WPF se agregan controles a Window y se programan respuestas a las acciones del usuario, como clics del mouse o presiones de teclas. Un control es un elemento discreto de la interfaz de usuario que muestra datos o acepta la entrada de datos.

Cuando un usuario hace algo en Window o en alguno de sus controles, la acción genera un evento. La aplicación reacciona a estos eventos y los procesa cuando se provocan. Para obtener más información, vea Cómo: Crear controladores de eventos simples.

WPF contiene diversos controles que se pueden agregar a una ventana: controles que muestran cuadros de texto, botones, listas desplegables, botones de radio e incluso páginas web. Para obtener una lista con todos los controles que se pueden usar en una ventana, vea Biblioteca de controles. Si un control existente no satisface sus necesidades, WPF también admite la creación de controles personalizados mediante las clases UserControl y Control.

Con el método de arrastrar y colocar de WPF y Silverlight Designer, puede crear aplicaciones WPF con toda facilidad. Simplemente seleccione los controles con el puntero del mouse y agréguelos en el lugar de la ventana que desee. El diseñador proporciona herramientas, como las guías de alineación y el zoom continuo, para que la organización de los controles sea más fácil.

Por último, si tiene que crear sus propios elementos de interfaz de usuario personalizados, los espacios de nombres System.Windows.Media y System.Windows.Shapes contienen una gran selección de clases necesarias para representar líneas, círculos y otras formas directamente en una ventana.

Ayuda para la creación de ventanas y controles

Para obtener información paso a paso sobre cómo usar estas características, vea los siguientes temas de Ayuda.

Colaboración con Expression Blend

WPF proporciona una separación fundamental de contenido y presentación, que permite a los programadores de software y a los diseñadores gráficos colaborar en la apariencia y comportamiento de una aplicación. WPF y Silverlight Designer se ha optimizado para los desarrolladores de software y Expression Blend se ha optimizado para los diseñadores gráficos. Para obtener más información, vea Colaboración con Expression Blend.

Vea también

Conceptos

WPF Designer para desarrolladores de Windows Forms

Colaboración con Expression Blend

Otros recursos

diseñador de WPF

Biblioteca de controles

XAML en WPF