Arquitectura de los adornos

Artículo
10/07/2008

Actualización: noviembre 2007

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 el modelo de extensibilidad de adornos de WPF Designer facilita la creación de adornos propios para personalizar la experiencia de diseño por 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. Puede agregar adornos a un control usando MetadataStore.

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 ofrece métodos que permiten cambiar el tamaño de los adornos y colocarlos con respecto al tamaño especificados por el estilo del adorno, al tamaño del control adornado o al tamaño absoluto en píxeles. Estos métodos son acumulativos, lo que significa que puede crear un adorno que se desplaza con respecto a un tamaño o posición relativos. Este tipo de desplazamiento se puede establecer en píxeles lógicos que se ajusten a la escala o que no se ajusten a la escala cuando la configuración del zoom se cambia para la superficie del diseñador. El tipo AdornerPlacementCollection proporciona los métodos para especificar estas relaciones.

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

AdornerPanel.SetHorizontalStretch(opacitySlider, AdornerStretch.Stretch)
AdornerPanel.SetVerticalStretch(opacitySlider, AdornerStretch.None)

Dim placement As New AdornerPlacementCollection()

' The adorner's width is relative to the content.
' The slider extends the full width of the control it adorns.
placement.SizeRelativeToContentWidth(1.0, 0)

' The adorner's height is the same as the slider's.
placement.SizeRelativeToAdornerDesiredHeight(1.0, 0)

' Position the adorner above the control it adorns.
placement.PositionRelativeToAdornerHeight(-1.0, 0)

' Position the adorner up 5 pixels. This demonstrates 
' that these placement calls are additive. These two calls
' are equivalent to the following single call:
' PositionRelativeToAdornerHeight(-1.0, -5).
placement.PositionRelativeToAdornerHeight(0, -5)

AdornerPanel.SetPlacements(opacitySlider, placement)

// Setup the adorner panel.
// All adorners are placed in an AdornerPanel
// for sizing and layout support.
AdornerPanel myPanel = this.Panel;

AdornerPanel.SetHorizontalStretch(opacitySlider, AdornerStretch.Stretch);
AdornerPanel.SetVerticalStretch(opacitySlider, AdornerStretch.None);

AdornerPlacementCollection placement = new AdornerPlacementCollection();

// The adorner's width is relative to the content.
// The slider extends the full width of the control it adorns.
placement.SizeRelativeToContentWidth(1.0, 0);

// The adorner's height is the same as the slider's.
placement.SizeRelativeToAdornerDesiredHeight(1.0, 0);

// Position the adorner above the control it adorns.
placement.PositionRelativeToAdornerHeight(-1.0, 0);

// Position the adorner up 5 pixels. This demonstrates 
// that these placement calls are additive. These two calls
// are equivalent to the following single call:
// PositionRelativeToAdornerHeight(-1.0, -5).
placement.PositionRelativeToAdornerHeight(0, -5);

AdornerPanel.SetPlacements(opacitySlider, placement);

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.

Espacio de diseño y espacio de representación

Puede colocar controles en la superficie de diseño con relación a dos marcos de referencia distintos en WPF Designer: el espacio del diseño y el espacio de representación.

El espacio de diseño define cuánto espacio ocupa el control cuando el sistema de diseño de WPF efectúa los cálculos de diseño. El espacio de representación define cuánto espacio ocupa un control una vez calculado el diseño y aplicadas todas las transformaciones de representación. Para obtener más información, vea Espacio de diseño y espacio de representación.

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.

La clase DesignerView tiene un constructor vacío para usarlo en XAML.

Vea también

Compartir a través de