Architettura degli strumenti decorativi visuali

Articolo
08/11/2011

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 questa panoramica viene spiegato come il modello di estensibilità degli strumenti decorativi visuali di WPF Designer semplifichi la creazione di strumenti decorativi visuali personali per personalizzare l'esperienza di progettazione dei 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 implementando l'interfaccia IProvideAttributeTable.

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 abilita 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 criteri 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 criteri specificati. Quando gli elementi nei criteri 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 di ridimensionare e posizionare strumenti decorativi visuali in relazione al controllo decorato. Per specificare la posizione di uno strumento decorativo visuale, utilizzare i metodi SetAdornerHorizontalAlignment, SetAdornerVerticalAlignment e SetAdornerMargin.

Nota

Quando si aggiunge un controllo come strumento decorativo visuale a un altro controllo, il controllo dello strumento decorativo visuale viene disposto in modo da far corrispondere larghezza, altezza e trasformazione del controllo che sta decorando. Ciò può comportare problemi di ridimensionamento. La soluzione più semplice a tali problemi di ridimensionamento consiste nell'aggiungere il controllo a Canvas, quindi aggiungere l'area di disegno come strumento decorativo visuale. La larghezza e l'altezza di Canvas vengono regolate, ma il controllo di Canvas non esegue il taglio o il ridimensionamento in base al contenuto, in modo che il controllo venga disposto soltanto all'interno dell'area di disegno.

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

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

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.

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 ad albero visuale.

Visualizzazione di progettazione

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

Vedere anche

Condividi tramite