Arquitectura de los adornos
La experiencia de diseño visual requiere adornos, que son glifos especiales en la superficie de diseño. Los adornos normalmente están asociadas a un control de destino y proporcionan al usuario mecanismos gráficos para ajustar las propiedades del control. Por ejemplo, si está diseñando un control y hace clic en una esquina para cambiarle el tamaño, el glifo de ajuste de tamaño en el que hace clic es un adorno.
La capacidad de esbozar, pulir y cambiar el estilo de los adornos rápidamente y con facilidad es importante para la arquitectura de WPF Designer. En esta introducción se explica cómo facilita el modelo de extensibilidad de adornos de WPF Designer la creación de adornos propios a fin de personalizar la experiencia de diseño para los controles.
WPF Designer proporciona un mecanismo flexible para mostrar los adornos. Este mecanismo se acopla con un sistema de comandos flexible que permite a los adornos responder a los datos proporcionados por el usuario. Se agregan adornos a un control mediante la implementación de la interfaz IProvideAttributeTable.
Tipos de adornos
Los adornos pueden modelar casi cualquier presentación visual en tiempo de diseño, pero algunos tipos de adornos aparecen repetidamente. En la siguiente tabla se describen los adornos que se usan habitualmente.
Adorno |
Descripción |
|---|---|
Controlador de arrastre |
Permite mover y cambiar el tamaño de un control; no presenta ajuste de escala. |
Raíl |
Agrega un marcador o una regla a lo largo de un lado de un control; no presenta ajuste de escala a lo largo de un eje único. |
Marco |
Representa los límites de un control; ajusta su escala a lo largo de ambos ejes. |
Superposición |
Captura las interacciones con el mouse en la región del control; ajusta su escala a lo largo de ambos ejes. En líneas generales, equivalente al glifo del cuerpo en el marco de trabajo del diseñador de System.ComponentModel. |
Características de los adornos
El marco de trabajo de WPF Designer habilita adornos que tienen las siguientes características.
Permite que los adornos deriven de cualquier clase UIElement y admitan los estilos de Windows Presentation Foundation.
Permite que el tamaño, la posición y el ajuste de escala se especifiquen de forma independiente para las dimensiones horizontal y vertical.
Elimine la necesidad de una clase base de adorno. Los tipos de adornos se pueden derivar de cualquier tipo UIElement que se ajuste a sus necesidades.
Crear adornos personalizados
El proveedor de características AdornerProvider proporciona los adornos. Puede agregar una característica AdornerProvider a una clase, que automáticamente agrega adornos a la superficie de diseño. En los tutoriales siguientes se muestra cómo crear adornos personalizados.
Extensibilidad del adorno
Los adornos se agregan según una directiva de proveedor de adornos. Puede agregar una directiva a AdornerProvider agregando UsesItemPolicyAttribute a la definición de clase.
Cuando se ha comprobado IsInPolicy, el adorno aparece en la superficie de diseño.
Puede agregar proveedores de adornos a un control que ofrece adornos para una directiva determinada. Cuando los elementos de la directiva cambian, el conector de características del adorno realiza consultas sobre nuevos proveedores de adornos en nuevos controles y muestra un conjunto actualizado de adornos.
WPF Designer implementa PrimarySelectionAdornerProvider, que proporciona un conjunto de adornos que se muestran para la selección primaria. La mayoría de los proveedores de adornos personalizados derivan de esta clase.
Adornos y diseño
El problema más importante de los adornos es el diseño. Los adornos requieren una gran variedad de opciones de diseño. El comportamiento de estiramiento o de ajuste de escala de un adorno debe tenerse en cuenta cuando se cambian los valores del zoom de la superficie del diseñador. Es necesario que se pueda cambiar el tamaño de los adornos y que se puedan colocar según los esquemas siguientes.
Con respecto al estilo aplicado.
Con respecto al tamaño y a la posición del control adornado.
Con respecto a los desplazamientos en valores absolutos de píxel.
Con respecto a los valores de zoom actuales.
En WPF, el mecanismo típico para controlar el diseño es el panel. El marco de trabajo de WPF Designer controla el diseño utilizando la clase AdornerPanel para los adornos primarios de un control determinado en una superficie de diseño.
La clase AdornerPanel proporciona métodos que permiten dimensionar los adornos y colocarlos con respecto al control adornado. Para especificar la posición de los adornos, use los métodos SetAdornerHorizontalAlignment, SetAdornerVerticalAlignment y SetAdornerMargin.
Nota
Al agregar un control como un adorno a otro control, el control de adorno está organizado de manera que coincide con el ancho, el alto y la transformación del control que está adornando. Esto puede producir problemas de recorte. La solución más fácil a estos problemas de recorte es agregar el control a Canvas y, a continuación, agregar el lienzo como adorno. Se ajustarán el ancho y alto de Canvas, pero el control Canvas no recortará ni adaptará su tamaño al contenido, para que el control esté organizado solo dentro del lienzo.
En el ejemplo de código siguiente se muestra cómo colocar un adorno sobre el control de destino.
' Setup the adorner panel.
' All adorners are placed in an AdornerPanel
' for sizing and layout support.
Dim myPanel = Me.Panel
' The slider extends the full width of the control it adorns.
AdornerPanel.SetAdornerHorizontalAlignment( _
opacitySlider, _
AdornerHorizontalAlignment.Stretch)
' Position the adorner above the control it adorns.
AdornerPanel.SetAdornerVerticalAlignment( _
opacitySlider, _
AdornerVerticalAlignment.OutsideTop)
' Position the adorner 5 pixels above the control.
AdornerPanel.SetAdornerMargin( _
opacitySlider, _
New Thickness(0, 0, 0, 5))
// Setup the adorner panel.
// All adorners are placed in an AdornerPanel
// for sizing and layout support.
AdornerPanel myPanel = this.Panel;
// The slider extends the full width of the control it adorns.
AdornerPanel.SetAdornerHorizontalAlignment(
opacitySlider,
AdornerHorizontalAlignment.Stretch);
// Position the adorner above the control it adorns.
AdornerPanel.SetAdornerVerticalAlignment(
opacitySlider,
AdornerVerticalAlignment.OutsideTop);
// Position the adorner 5 pixels above the control.
AdornerPanel.SetAdornerMargin(
opacitySlider,
new Thickness(0, 0, 0, 5));
Comportamiento del zoom
Cuando el valor de zoom para la vista de diseñador se cambia a 200%, el control adornado se representa con su tamaño duplicado. Todas las distancias y fuentes son mayores y las líneas son más gruesas. Muchos diseños de adornos especifican que los adornos mantengan su tamaño original incluso cuando cambia el zoom de la vista del diseñador.
DesignerView
La clase DesignerView proporciona una colección de adornos y asigna todo los datos proporcionados por el usuario a los movimientos del diseñador. La clase DesignerView se deriva de la clase Decorator. Proporciona una superficie visual para el diseñador. Asigne el elemento raíz de la interfaz de usuario del diseñador a la propiedad Child de DesignerView y establezca la propiedad del contexto de edición de la vista de diseñador de modo que señale el contexto de edición del diseñador.
DesignerView view = new DesignerView();
view.Child = documentManager.View;
view.Context = editingContext;
La clase DesignerView implementa dos aspectos de WPF Designer.
Adornos
La clase DesignerView proporciona compatibilidad para adornar los elementos de la vista con elementos gráficos visuales adicionales que se superponen a los controles que se están diseñando.
Enrutar la entrada de datos
La clase DesignerView enruta los datos proporcionados por el usuario a los comandos en adornos, herramientas y tareas.
La clase DesignerView funciona introduciendo dos elementos adicionales delante de todo el contenido: una capa de adornos y una capa de la prueba de posicionamiento. En el siguiente diagrama se muestra la relación entre las capas de la vista de diseñador y el árbol visual.
.png "Vista de diseñador")
La clase DesignerView tiene un constructor vacío para usarlo en XAML.
Vea también
Tareas
Tutorial: Crear un adorno en tiempo de diseño