Información general sobre WPF Designer
Actualización: noviembre 2007
En este tema se describe Windows Presentation Foundation (WPF) Designer for Visual Studio. WPF es la tecnología de interfaz de usuario para Windows Vista y es diferente de las tecnologías de vista anteriores, como los formularios Windows Forms.
WPF Designer proporciona una compatibilidad de diseño visual similar al Diseñador de Windows Forms. Para construir 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 modificar directamente XAML en el editor XAML.
Ventanas de WPF Designer
WPF Designer tiene varias ventanas para mostrar y modificar documentos XAML. En la siguiente ilustración se muestran algunas de las ventanas de WPF Designer.
.png)
Vista Diseño
La vista Diseño proporciona una superficie de diseño visual para generar controles y aplicaciones de WPF. Muestra una representación del XAML que hay actualmente en la vista XAML.
Para colocar los controles en la superficie de diseño, arrástrelos desde el Cuadro de herramientas. Las diferentes herramientas de diseño le ayudarán a colocar los controles en el lugar exacto que desee. Cuando se cambian los controles en la superficie de diseño, la vista XAML se actualiza para reflejar los cambios. Para obtener más información, vea Cómo: Agregar controles a una ventana de WPF y Cómo: Seleccionar y mover elementos en la superficie de diseño.
Vista XAML
La vista XAML proporciona una experiencia de edición completa para documentos XAML, que incluye IntelliSense, aplicar formato automáticamente, resaltar la sintaxis y navegación de etiquetas. Cuando se edita el XAML, la vista Diseño se actualiza para reflejar los cambios.
Para obtener más información, vea Tutorial: Editar XAML en WPF Designer.
Ventana Propiedades
La ventana Propiedades se usa para establecer los valores de las propiedades en los controles en la vista Diseño.
Para obtener acceso a la ventana Propiedades, abra el menú Ver y seleccione Ventana Propiedades o presione CTRL+W, P o F4. También puede hacer clic con el botón secundario en un control en la vista Diseño y seleccionar Propiedades en el menú de acceso directo. La ventana Propiedades muestra una vista previa en miniatura del control seleccionado actualmente.
Para buscar una propiedad, empiece a escribir su nombre en el cuadro Buscar situado en la parte superior de la ventana Propiedades. La ventana Propiedades muestra las propiedades que coinciden con su búsqueda cuando escribe. Haga clic en Borrar para quitar la búsqueda y mostrar todas las propiedades del objeto seleccionado.
Comenzando en Visual Studio 2008 Service Pack 1, puede ordenar las propiedades alfabéticamente o por categoría. Para ordenar alfabéticamente, haga clic en el botón Alfabético en la parte superior de la ventana Propiedades. Para ordenar por categoría, haga clic en el botón Por categorías en la parte superior de la ventana Propiedades.
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. Para obtener acceso a la ventana Esquema del documento, abra el menú Ver, elija Otras ventanas y seleccione Esquema del documento o presione CTRL+ALT+T. Para obtener más información, vea Navegar en la jerarquía de elementos de un documento de WPF.
Cuadro de herramientas
El Cuadro de herramientas contiene los controles que se pueden arrastrar a la superficie de diseño. Para obtener acceso a la ventana Cuadro de herramientas, abra el menú Ver y seleccione Cuadro de herramientas o presione CTRL+ALT+X.
Características de la vista Diseño
La vista 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 Diseño.
.png)
Control Zoom
Use el control Zoom para controlar el tamaño de la superficie de diseño. Puede hacer zoom desde 10% hasta 20x.
Ajustar a la vista
Use el botón Ajustar a la vista para ajustar el tamaño de la superficie de diseño a la pantalla disponible en la vista Diseño. Esto resulta útil si ha hecho zoom para acercarse o alejarse mucho.
Raíles de la cuadrícula
Use los raíles de la cuadrícula para administrar 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
Use las líneas de la cuadrícula 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. 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. Haga clic y arrastre un asa de ajuste de tamaño para cambiar el tamaño de la selección. 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 su margen se establece en 0. Haga clic en el código auxiliar de margen para establecer una distancia del margen respecto del 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
Use las líneas de ajuste para alinear los controles entre sí. Si están habilitadas, al arrastrar un control en relación con otros controles, las líneas de ajuste 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.
Características de la vista XAML
El Lenguaje de marcado de aplicaciones extensible (XAML) proporciona un vocabulario declarativo, basado en XML, para especificar la interfaz de usuario de una aplicación. WPF Designer proporciona una vista dividida única, que proporciona una vista XAML y una vista Diseño sincronizada del marcado XAML representado de la aplicación. En la siguiente ilustración se muestran algunas de las características de XAML.
.png)
Para obtener más información, vea Vista dividida: Ver la superficie de diseño de WPF y XAML al mismo tiempo.
Barra de vista dividida
Use la barra de vista dividida para controlar los tamaños relativos de la vista Diseño y la vista XAML. Puede controlar si la vista dividida es horizontal o vertical y puede contraer cualquiera de ellas. Para obtener más información, vea Vista dividida: Ver la superficie de diseño de WPF y XAML al mismo tiempo.
Explorador de etiquetas
Puede moverse a cualquier etiqueta primaria de la etiqueta actualmente seleccionada en la vista XAML mediante el explorador de etiquetas. Al desplazar el puntero sobre una etiqueta en el explorador de etiquetas, se muestra una vista previa en miniatura de ese elemento. Tutorial: Editar XAML en WPF Designer.
Generar interfaces de usuario completas e interactivas
En WPF, las clases Window y Page son superficies visuales en las que se muestra información al usuario. Normalmente, para generar 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 opción 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 Designer, puede crear aplicaciones WPF con facilidad. Simplemente seleccione los controles con el puntero y agréguelos en el lugar de la ventana que desee. El diseñador proporciona herramientas, como las líneas de ajuste 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.
Descripción |
Tema de Ayuda |
|---|---|
Crear una nueva aplicación WPF con Visual Studio. |
|
Usar los controles en una ventana. |
Cómo: Seleccionar y mover elementos en la superficie de diseño |
Crear controladores de eventos para controles. |
|
Administrar los eventos desde una ventana y los controles de la ventana. |
|
Navegar por un diseño de WPF. |
|
Crear diseños dinámicos. |
|
Crear controles personalizados. |
Cómo: Crear un proyecto de biblioteca de controles de usuario de WPF |
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. Windows Presentation Foundation (WPF) Designer for Visual Studio se ha optimizado para los programadores 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.
Implementar aplicaciones en los equipos cliente
Una vez escrita la aplicación, debe enviarla a sus usuarios para que puedan instalarla y ejecutarla en sus equipos clientes. Si usa la tecnología ClickOnce, puede implementar aplicaciones desde Visual Studio con unos pocos clics y proporcionar a los usuarios una dirección URL que apunte a la aplicación en el web o en el recurso compartido de archivos. ClickOnce administra todos los elementos y dependencias en la aplicación y asegura que la aplicación se instale correctamente en el equipo cliente.
Las aplicaciones ClickOnce se pueden configurar para ejecutarse únicamente cuando el usuario se conecta a la red o ejecutarse con o sin conexión. Cuando se especifica que una aplicación debe admitir el funcionamiento sin conexión, ClickOnce agrega un vínculo a la aplicación en el menú Inicio del usuario. A continuación, el usuario puede abrir la aplicación sin utilizar la dirección URL.
Cuando se actualiza la aplicación, se publica un nuevo manifiesto de implementación y una nueva copia de la aplicación en el servidor web o en el recurso compartido de archivos. ClickOnce detectará que hay una actualización disponible y actualizará la instalación del usuario. No se necesita ninguna programación personalizada para actualizar los ensamblados antiguos. Para obtener más información, vea Implementación de aplicaciones de WPF
Implementar las aplicaciones ClickOnce
Para obtener una introducción completa a ClickOnce, vea Información general sobre la implementación de ClickOnce. Para obtener información paso a paso sobre cómo usar estas características, vea los siguientes temas de Ayuda,
Descripción |
Tema de Ayuda |
|---|---|
Implementar una aplicación mediante ClickOnce. |
|
Actualizar una implementación ClickOnce. |
|
Administrar la seguridad con ClickOnce. |
Cómo: Habilitar la configuración de seguridad para aplicaciones ClickOnce |
Vea también
Conceptos
WPF Designer para desarrolladores de formularios Windows Forms
Información general sobre la implementación de ClickOnce
Introducción a la configuración de la aplicación
Colaboración con Expression Blend