Architettura degli strumenti decorativi visuali

Articolo
09/12/2008

Aggiornamento: novembre 2007

L'esperienza della progettazione visiva richiede l'utilizzo di strumenti decorativi visuali, ovvero di speciali glifi posti nell'area di progettazione. Gli strumenti decorativi visuali sono in genere allegati a un controllo di destinazione e forniscono all'utente un mezzo grafico per regolare le proprietà del controllo. Ad esempio, quando si progetta un controllo e si fa clic su un angolo per ridimensionarlo, il glifo del ridimensionamento sul quale si è fatto clic è uno strumento decorativo visuale.

La possibilità di abbozzare, rifinire e ridefinire gli stili degli strumenti decorativi visuali in modo semplice e veloce è importante per l'architettura di WPF Designer. In questi cenni preliminari viene spiegato come il modello di estensibilità degli strumenti decorativi visuali di WPF Designer semplifichi la creazione di strumenti decorativi visuali personali per personalizzare la progettazione di controlli.

WPF Designer offre un meccanismo flessibile per la visualizzazione di strumenti decorativi visuali. Questo meccanismo è accoppiato con un sistema di comandi flessibili che consente agli strumenti decorativi visuali di rispondere a input dell'utente. È possibile aggiungere strumenti decorativi visuali a un controllo utilizzando MetadataStore.

Tipi di strumenti decorativi

Gli strumenti decorativi visuali possono modellare quasi qualsiasi presentazione visiva di progettazione, ma alcuni tipi di strumenti decorativi appaiono ripetutamente. Nella tabella seguente vengono descritti gli strumenti decorativi visuali di uso più frequente.

Strumento decorativo	Descrizione
Punto di controllo	Consente di spostare e dimensionare un controllo ma non di ridimensionarlo in scala.
Sbarra	Aggiunge un indicatore o righello lungo un lato di un controllo; ma non consente il ridimensionamento in scala lungo un solo asse.
Frame	Rappresenta i limiti di un controllo; consente il ridimensionamento lungo entrambi assi.
Sovrapposizione	Acquisisce interazioni con il mouse nell'area del controllo; consente il ridimensionamento lungo entrambi assi. Equivale circa all'icona del corpo nel framework della finestra di progettazione System.ComponentModel.

Caratteristiche degli strumenti decorativi visuali

Il framework di WPF Designer attiva gli strumenti decorativi visuali che dispongono delle caratteristiche seguenti.

Consentire agli strumenti decorativi visuali di essere derivati da qualsiasi classe UIElement e supportare gli stili di Windows Presentation Foundation.
Consentire che tutte le dimensioni, la posizione e il ridimensionamento in scala siano specificate indipendentemente per le dimensioni orizzontali e verticali.
Eliminare la necessità di una classe base per lo strumento decorativo visuale. I tipi di strumenti decorativi visuali possono essere derivati da qualsiasi tipo UIElement che soddisfa le esigenze dello sviluppatore.

Creazione di strumenti decorativi personalizzati

Gli strumenti decorativi visuali sono forniti dal provider di funzionalità AdornerProvider. È possibile aggiungere una funzionalità di AdornerProvider a una classe, che automaticamente aggiunge strumenti decorativi visuali all'area di progettazione. Nelle procedure dettagliate seguenti viene mostrato come creare degli strumenti decorativi visuali personalizzati.

Estensibilità degli strumenti decorativi visuali

Gli strumenti decorativi vengono aggiunti in base ai criteri del provider di strumenti decorativi. È possibile aggiungere un criterio a un AdornerProvider aggiungendo l'oggetto UsesItemPolicyAttribute alla definizione della classe.

Quando il controllo di IsInPolicy ha esito positivo, lo strumento decorativo visuale appare nell'area di progettazione.

È possibile aggiungere provider di strumenti decorativi visuali a un controllo che offre strumenti decorativi visuali per un criterio specificato. Quando gli elementi nel criterio cambiano, il connettore di funzionalità per gli strumenti decorativi esegue una query su nuovi provider di strumenti decorativi su nuovi controlli e visualizza un insieme aggiornato di strumenti decorativi.

WPF Designer implementa PrimarySelectionAdornerProvider, che offre un insieme di strumenti decorativi visualizzati per la selezione primaria. La maggior parte dei provider di strumenti decorativi visuali personalizzati deriva da questa classe.

Strumenti decorativi visuali e layout

Il problema più importante per gli strumenti decorativi visuali è il layout. Gli strumenti decorativi visuali richiedono un'ampia varietà di opzioni di layout. Lo specifico comportamento di allungamento o ridimensionamento in scala di uno strumento decorativo visuale deve essere considerato quando l'impostazione dello zoom viene modificata per l'area di progettazione. Gli strumenti decorativi visuali devono essere in grado di ridimensionarsi e posizionarsi secondo gli schemi seguenti.

Rispetto allo stile applicato.
Rispetto alla dimensione e alla posizione del controllo decorato.
Rispetto agli offset in pixel assoluti.
Rispetto all'impostazione corrente dello zoom.

In WPF il meccanismo tipico per il controllo del layout è il pannello. Il framework di WPF Designer controlla il layout utilizzando la classeAdornerPanel sugli strumenti decorativi visuali padre per un controllo specificato in un'area di progettazione.

La classe AdornerPanel offre metodi che consentono a strumenti decorativi visuali di essere ridimensionati e posizionati rispetto alla dimensione specificata dallo stile dello strumento decorativo visuale, la dimensione del controllo decorato o una dimensione assoluta in pixel. Questi metodi sono cumulativi, ovvero è possibile creare uno strumento decorativo che abbia un valore di scarto o offset rispetto a una dimensione o posizione relativa. Tale offset può essere impostato in pixel logici che si ridimensionano o non si ridimensionano quando l'impostazione dello zoom viene modificata per l'area di progettazione. Il tipo AdornerPlacementCollection fornisce metodi per la specifica di queste relazioni.

Nell'esempio di codice seguente viene mostrato come posizionare uno strumento decorativo visuale sopra al controllo di destinazione.

' 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);

Comportamento dello zoom

Quando il valore dello zoom per la visualizzazione Progettazione viene impostato su 200%, il controllo decorato viene reso a due volte la sua dimensione. Tutte le distanze e i tipi di carattere sono più grandi e le righe sono più spesse. Molti progetti di strumenti decorativi visuali specificano che gli strumenti decorativi conservino la dimensione originale anche quando lo zoom della visualizzazione Progettazione viene modificato.

Spazio di layout e spazio di rendering

In WPF Designer è possibile posizionare i controlli nell'area di progettazione rispetto a due frame di riferimento diversi: spazio di layout e spazio di rendering.

Lo spazio di layout definisce la quantità di spazio occupata dai controlli quando il layout della finestra di progettazione viene calcolato dal sistema di layout WPF. Lo spazio di rendering definisce la quantità di spazio occupata da un controllo dopo che viene calcolato il layout e vengono applicate tutte le trasformazioni di rendering. Per ulteriori informazioni, vedere Spazio di layout e spazio di rendering.

Visualizzazione Progettazione

La classe DesignerView fornisce un insieme di strumenti decorativi visuali ed esegue il mapping di tutti gli input dell'utente ad azioni della finestra di progettazione. La classe DesignerView deriva dalla classe Decorator. Fornisce un'area visiva per la finestra di progettazione. Assegnare l'elemento radice dell'interfaccia utente della finestra di progettazione alla proprietà Child di DesignerView e impostare la proprietà del contesto di modifica in visualizzazione Progettazione in modo che punti al contesto di modifica della finestra di progettazione.

DesignerView view = new DesignerView();
view.Child = documentManager.View;
view.Context = editingContext;

La classe DesignerView implementa due aspetti di WPF Designer.

Elementi grafici

La classe DesignerView fornisce supporto per decorare elementi nella visualizzazione con strumenti decorativi visuali che si sovrappongono ai controlli progettati.

Routing di input

La classe DesignerView indirizza l'input dell'utente a comandi relativi a strumenti decorativi, strumenti e attività.

La classe DesignerView presenta due elementi aggiuntivi di fronte ad ogni contenuto: un layer di strumento decorativo visuale e un layer di hit test. Nel diagramma seguente viene mostrata la relazione dei layer della visualizzazione Progettazione con la struttura a albero visuale.

Visualizzazione di progettazione

La classe DesignerView dispone di un costruttore vuoto da utilizzare in XAML.

Vedere anche

Condividi tramite