Impostazione di colori, pennelli e maschere
Modificare l'aspetto visivo di un oggetto è un'operazione fondamentale in Microsoft Expression Blend. Utilizzando le proprietà disponibili nelle categorie Aspetto e Pennelli del pannello Proprietà, è possibile modificare i colori del tratto e del riempimento, oltre all'opacità e alla visibilità di un oggetto selezionato. In base al tipo di oggetto selezionato nel progetto di Expression Blend, le proprietà disponibili nelle categorie Aspetto e Pennelli cambiano dinamicamente in base al contenuto dell'oggetto, per mostrare gli attributi visivi appropriati.
Proprietà comuni relative all'aspetto
La maggior parte delle operazioni di modifica dell'aspetto di un oggetto richiede l'applicazione di pennelli a proprietà specifiche. Nella tabella seguente vengono descritte tali proprietà.
Proprietà | Descrizione |
---|---|
Fill |
Imposta il pennello applicato all'interno di una forma o un tracciato. |
Stroke |
Imposta il pennello applicato al contorno o bordo di una forma o un tracciato. |
Background |
Imposta il pennello applicato allo sfondo di un oggetto. Questa proprietà viene in genere applicata allo sfondo dei controlli che visualizzano testo, quali i controlli Button o TextBlock. |
Foreground |
Imposta il pennello applicato al primo piano di un oggetto. Questa proprietà viene in genere applicata al testo visualizzato in controlli quali Button o TextBlock. |
BorderBrush |
Imposta il pennello applicato al bordo in determinati controlli. |
Opacity |
Imposta l'opacità dell'intero oggetto. |
Visibility |
Determina se un oggetto è visibile o nascosto in fase di esecuzione. La visibilità dell'elemento padre può anche influire sugli oggetti figlio. |
OpacityMask |
Imposta un pennello il cui colore viene ignorato e la cui opacità viene trasferita all'oggetto mascherato. L'oggetto mascherato risulta opaco in corrispondenza di tutte le aree in cui la maschera di opacità è opaca e trasparente in corrispondenza di tutte le aree in cui la maschera di opacità è trasparente. |
Pennelli
I pennelli sono utilizzati per impostare l'aspetto visivo di un oggetto sulla tavola da disegno. È ad esempio possibile utilizzare un pennello blu a tinta unita per il riempimento di un rettangolo (come nella prima delle immagini seguenti). Sono disponibili vari tipi di pennelli, da semplici pennelli a tinta unita o sfumatura a pennelli affiancati più complessi. I pennelli disponibili in Expression Blend sono descritti nella tabella seguente. È inoltre possibile utilizzare la scheda Nessun pennello per rimuovere completamente il colore dalla proprietà selezionata. Per creare ad esempio il contorno di un rettangolo, è possibile impostare la proprietà Fill del rettangolo su Nessun pennello e la proprietà Stroke su un Pennello tinta unita.
Pennello | Aspetto | Descrizione | ||
---|---|---|---|---|
Pennello tinta unita |
![]() |
Composto da un singolo colore. |
||
Pennello sfumatura lineare |
![]() |
![]() |
Composto da una gradazione di colore lineare. |
|
Pennello sfumatura radiale |
![]() |
![]() |
Composto da una gradazione di colore radiale. |
|
Pennello immagine |
![]() |
![]() |
![]() |
Creato da un'immagine. Da sinistra verso destra: pennello immagine iniziale, pennello immagine affiancato e pennello immagine capovolto. |
Pennello da disegno |
![]() |
![]() |
![]() |
Creato da un disegno vettoriale. Da sinistra verso destra: pennello da disegno iniziale, pennello da disegno affiancato e pennello da disegno capovolto. |
Pennello visivo |
![]() |
![]() |
Creato da un controllo, ad esempio un pulsante. Da sinistra verso destra: pulsante iniziale e pennello con l'opzione Modalità affiancata impostata su Tile. Si noti che i pennelli visivi possono determinare una riduzione delle prestazioni dell'applicazione in esecuzione a causa della complessità del controllo utilizzato per creare il pennello visivo. |
Risorse pennello
Dopo aver creato un pennello su un oggetto, è possibile convertire il pennello in una risorsa applicabile ad altri oggetti.
Le risorse pennello non includono solo le proprietà relative al pennello o al colore. Per creare una risorsa pennello è possibile utilizzare vari oggetti disponibili sulla tavola da disegno. È addirittura possibile creare un pennello, detto VisualBrush, il cui aspetto viene aggiornato durante l'esecuzione se gli oggetti da cui è stato creato vengono modificati durante l'esecuzione.
È possibile creare dizionari risorse per i pennelli in modo da poterli riutilizzare in un intero progetto o in altri progetti.
Per ulteriori informazioni, vedere Creare una risorsa pennello o una risorsa colore e Convertire oggetti in una risorsa DrawingBrush riutilizzabile.
Per ulteriori informazioni sulle risorse, vedere Creazione di risorse riutilizzabili.
Colore e spazi colore
In Expression Blend, nella categoria Pennelli del pannello Proprietà, è disponibile un editor dei colori, che viene visualizzato anche quando si modifica una risorsa pennello nel pannello Risorse. L'editor dei colori offre i quattro spazi colore seguenti e una modalità esadecimale (#AARRGGBB):
RGB Red (0-255), Green (0-255), Blue (0-255).
HLS Hue (selettore colori a 360 gradi), Lightness (da 0% a 100%), Saturation (da 0% a 100%).
HSB Hue (selettore colori a 360 gradi), Saturation (da 0% a 100%), Brightness (da 0% a 100%).
CMYK Cyan (da 0% a 100%), Magenta (da 0% a 100%), Yellow (da 0% a 100%), Black (da 0% a 100%).
Per passare da uno spazio colore all'altro, fare clic su una delle lettere sottolineate nello spazio colore corrente in modo da visualizzare un menu a comparsa degli spazi colore alternativi.
Strumenti Contagocce e Secchiello
In Expression Blend sono disponibili due strumenti espressamente progettati per consentire all'utente di copiare e applicare attributi tra i vari oggetti. Le proprietà seguenti vengono copiate o applicate durante le azioni eseguite con gli strumenti Contagocce e Secchiello:
Pennelli Foreground, Background, Border Brush, Fill, Stroke e Opacity Mask
Aspetto Opacity, Stroke Thickness, Stroke Miter Limit, Stroke Start Line Cap, Stroke End Line Cap, Stroke Line Join e Stroke Dash Cap
Testo Font Family, Font Size, Font Weight, Font Style, Text Decorations, Line Height, Text Indent e Text Alignment
![]() |
Contagocce, strumento |
Copia l'aspetto di un altro oggetto e lo applica all'oggetto o agli oggetti attualmente selezionati. |
![]() |
Secchiello, strumento |
Copia l'aspetto dell'oggetto o degli oggetti attualmente selezionati e lo applica a un altro oggetto. |
Per ulteriori informazioni sugli strumenti Contagocce e Secchiello, vedereCopiare o applicare attributi a un oggetto.
Viene inoltre visualizzato un Contagocce colore nell'angolo in basso a destra dell'Editor colore quando si modifica un Pennello tinta unita
o un cursore sfumatura su un Pennello sfumatura
. Con questo contagocce selezionato, è possibile selezionare un colore campione da qualsiasi posizione del desktop e applicarlo al pennello selezionato. È possibile premere il tasto ESC in qualsiasi momento per annullare il contagocce.
Sfumature
Le sfumature consentono di applicare una fusione di colori sfumata a un oggetto per creare una gradazione di colore omogenea e aumentare la profondità dell'oggetto. Un oggetto di questo tipo può ad esempio essere utilizzato come sfondo, con una tinta unita nella parte sinistra che crea un effetto progressivo di dissolvenza verso il bianco nella parte destra. In questo modo è possibile creare due aree distinte all'interno di un oggetto che sarebbe altrimenti uniforme.
Fare clic su Pennello sfumatura in Pennelli nel pannello Proprietà per creare una sfumatura. Fare clic su Pennello sfumatura lineare
e Sfumatura radiale
nell'editor dei colori per passare da un tipo di pannello sfumatura all'altro. È possibile utilizzare i due tipi di pennelli sfumatura per creare riempimenti sfumati, tratti sfumati, testo con una sfumatura per la proprietà Foreground o sfondi sfumati per qualsiasi oggetto con una proprietà Background.
Quando si seleziona Pennello sfumatura, lo strumento Contagocce colore nell'editor dei colori viene sostituito da Contagocce sfumatura . Quando si posiziona il puntatore su un colore all'interno di Expression Blend oppure sul desktop mentre è selezionato lo strumento Contagocce sfumatura, viene visualizzata un'anteprima del colore nel cursore colori selezionato. Quando si fa clic su un colore utilizzando lo strumento Contagocce sfumatura, il colore viene applicato al cursore sfumatura selezionato. È inoltre possibile trascinare lo strumento Contagocce sfumatura su una sfumatura esistente, all'interno di Expression Blend o sul desktop, per applicare la sfumatura all'oggetto esistente.
Trascinando lo strumento Contagocce sfumatura su una sfumatura esistente, la sfumatura viene duplicata in Expression Blend
Quando si applica una sfumatura a un oggetto, vengono visualizzate le icone dei cursori sfumatura . È possibile modificare il colore di ogni cursore sfumatura e aggiungere tutti i cursori desiderati al dispositivo di scorrimento della sfumatura semplicemente facendo clic su tale dispositivo. Per rimuovere i cursori non più necessari, invece, è sufficiente trascinarli oltre il lato inferiore del dispositivo di scorrimento della sfumatura. Se si esegue il trascinamento oltre il lato destro, sinistro o superiore del dispositivo di scorrimento, i cursori non verranno rimossi. È inoltre possibile modificare il valore di scostamento di un cursore sfumatura selezionato trascinando il cursore lungo la linea della sfumatura oppure modificando il valore nel campo Scostamento cursore sfumatura selezionato.
Per invertire una sfumatura, fare clic su Cursori sfumatura inversa . È possibile passare ai cursori sfumatura precedenti e successivi utilizzando le frecce Seleziona il cursore sfumatura precedente e Seleziona il cursore sfumatura successivo
.
Per applicare una sfumatura a più oggetti, selezionare tutti gli oggetti desiderati, quindi applicare la sfumatura.
Fare clic su Mostra proprietà avanzate per visualizzare proprietà aggiuntive che è possibile modificare direttamente nel pannello Proprietà.
Per il pennello sfumatura lineare, nel pannello Proprietà è possibile modificare le proprietà seguenti:
StartPoint Specifica le coordinate del punto iniziale della sfumatura lineare.
EndPoint Specifica le coordinate del punto finale della sfumatura lineare.
MappingMode Specifica se il pennello sfumatura ha una posizione assoluta o relativa rispetto al rettangolo di selezione.
SpreadMethod Specifica come disegnare una sfumatura che inizia o finisce all'interno del rettangolo di selezione. Pad estende i colori dei cursori sfumatura più esterni ai bordi dell'oggetto. Reflect riflette il riempimento sfumato. Repeat ripete il riempimento sfumato.
Opacity Specifica l'opacità del pennello sfumatura.
Per il pennello sfumatura radiale, nel pannello Proprietà è possibile modificare le proprietà seguenti:
GradientOrigin Specifica le coordinate per l'inizio di una sfumatura.
Center Specifica la sfumatura radiale più esterna.
RadiusX Specifica il raggio orizzontale del cerchio più esterno della sfumatura radiale.
RadiusY Specifica il raggio verticale del cerchio più esterno della sfumatura radiale.
MappingMode Specifica se il pennello sfumatura ha una posizione assoluta o relativa rispetto al rettangolo di selezione.
SpreadMethod Specifica come disegnare una sfumatura che inizia o finisce all'interno del rettangolo di selezione. Pad estende i colori dei cursori sfumatura più esterni ai bordi dell'oggetto. Reflect riflette il riempimento sfumato. Repeat ripete il riempimento sfumato.
Opacity Specifica l'opacità del pennello sfumatura.
Per entrambi i tipi di pennelli sfumatura, è inoltre possibile modificare la proprietà RelativeTransform nel pannello Proprietà facendo clic sulle schede seguenti nella casella RelativeTransform e modificando i valori associati:
Traslazione
Ruota
Proporzioni
Inclinazione
Capovolgi
È inoltre possibile modificare entrambi i pennelli sfumatura lineare e radiale sulla tavola da disegno utilizzando lo strumento Sfumatura oppure lo strumento Trasforma tratto
. Per ulteriori informazioni, vedere le sezioni "Strumento Sfumatura" e "Strumento Trasforma tratto" che seguono.
Strumento Sfumatura
Per modificare il riempimento, il tratto o la maschera di opacità di un pennello sfumatura applicato a un oggetto direttamente sulla tavola da disegno, selezionare la proprietà del pennello nel pannello Proprietà, quindi selezionare lo strumento Sfumatura nel pannello Strumenti.
![]() |
---|
Con l'oggetto selezionato sulla tavola da disegno, premere G per selezionare lo strumento Sfumatura. |
Sulla tavola da disegno verrà visualizzata una freccia che è possibile utilizzare per modificare la sfumatura. Il punto iniziale e il punto finale della freccia corrispondono ai cursori sfumatura alle estremità della barra dei colori. I cursori sfumatura sono indicati da cerchi con bordi blu e riempimenti corrispondenti alla sfumatura.
Freccia della sfumatura lineare
Freccia della sfumatura radiale
Quando si fa clic su un cursore sfumatura, il cursore sfumatura viene selezionato. La selezione è indicata da un bordo blu in grassetto. Quando si fa doppio clic su un cursore sfumatura, viene visualizzata la selezione colori, in cui è possibile modificare il colore del cursore sfumatura selezionato.
È possibile aggiungere un cursore sfumatura facendo clic in un punto qualsiasi sulla freccia. È possibile rimuovere un cursore sfumatura facendo clic sul cerchio che lo indica e trascinandolo all'esterno della freccia.
È inoltre possibile modificare le proprietà delle sfumature nei modi seguenti:
Tenere premuto MAIUSC mentre si trascina il punto iniziale o finale per vincolare lo spostamento lungo la linea retta che collega i due punti.
Tenere premuto MAIUSC mentre si trascina l'intera freccia per vincolare lo spostamento al piano X o Y.
Tenere premuto MAIUSC mentre si ruota un punto iniziale o finale per eseguire la rotazione per incrementi di 15 gradi.
Tenere premuto ALT mentre si trascina un punto iniziale o finale per spostare entrambi i punti finali contemporaneamente, senza modificare la posizione del punto centrale.
Strumento Trasforma tratto
Lo strumento Trasforma tratto consente di modificare la proprietà RelativeTransform di una risorsa pennello, anche per le sfumature lineari e radiali. Lo strumento Trasforma tratto consente di modificare il pennello selezionato nel pannello Pennelli e applicato all'oggetto selezionato sulla tavola da disegno.
Per modificare la trasformazione di un pennello applicato a un oggetto direttamente sulla tavola da disegno, selezionare la proprietà del pennello nel pannello Proprietà, quindi selezionare lo strumento Trasforma tratto nel pannello Strumenti.
![]() |
---|
Con l'oggetto selezionato sulla tavola da disegno, premere B per selezionare lo strumento Trasforma tratto. |
Attorno all'oggetto verrà visualizzato un adorner, ovvero un bordo blu. L'oggetto selezionato con lo strumento Trasforma tratto può ora essere modificato nei modi seguenti:
Per spostare un pennello, trascinarlo in un punto qualsiasi all'interno dell'oggetto. Questa operazione corrisponde alla scheda Trasformazione nella casella RelativeTransform del pannello Proprietà.
Per ruotare un pennello, posizionare il puntatore all'esterno di uno degli angoli del rettangolo di selezione dell'oggetto e trascinarlo quando assume la forma di un punto di controllo di rotazione
. Questa operazione corrisponde alla scheda Ruota nella casella RelativeTransform del pannello Proprietà.
Per modificare la scala di un pennello tessera o un pennello sfumatura radiale, posizionare il puntatore su uno dei punti di controllo laterali o d'angolo dell'oggetto e trascinarlo. Questa operazione corrisponde alla scheda Modifica scala nella casella RelativeTransform del pannello Proprietà.
Per inclinare un pennello, posizionare il puntatore all'esterno di un punto di controllo laterale e trascinarlo quando assume la forma di un punto di controllo di inclinazione
. Questa operazione corrisponde alla scheda Inclina nella casella RelativeTransform del pannello Proprietà.
È inoltre possibile capovolgere una trasformazione. Nella categoria Pennelli del pannello Proprietà fare clic su Mostra opzioni avanzate . Nella casella RelativeTransform fare clic sulla scheda Capovolgi, quindi su Capovolgi asse X o Capovolgi asse Y.
Ritaglio
Quando si trasforma un pennello è possibile che alcune parti dell'oggetto vengano ritagliate, ovvero che escano dal rettangolo di selezione. È possibile risolvere i problemi di ritaglio nei modi seguenti:
Deselezionare la casella di controllo per la proprietà ClipToBounds nella categoria Aspetto del pannello Proprietà.
Utilizzare le proprietà disponibili nella categoria LayoutTransform anziché quelle disponibili nella categoria RenderTransform, nell'area Trasformazione del pannello Proprietà. Questo metodo è utile soprattutto per la trasformazione di un pennello visivo.
Tratti
I tratti sono i bordi degli oggetti. È possibile modificare il pennello applicato (tinta unita, sfumatura o tessera), l'opacità, lo spessore e il limite smussatura del tratto di un oggetto, oltre agli stili della giunzione ad angolo e delle estremità. Il tratto di un oggetto viene sempre applicato al di sopra di un riempimento, anche se non è stato impostato alcun riempimento per l'oggetto. Per apportare modifiche al tratto di un oggetto, è necessario selezionare Stroke nell'elenco in Pennelli nel pannello Proprietà.
**Spessore del tratto **Lo spessore del tratto di un oggetto viene misurato in pixel (o unità indipendenti dalla periferica, ciascuna delle quali corrisponde approssimativamente a 1/96 di pollice) e può avere un valore compreso tra 0 e la metà della larghezza o dell'altezza della forma. In generale, quando lo spessore del tratto raggiunge la metà della larghezza o dell'altezza della forma, il tratto copre interamente il riempimento. È possibile impostare il valore dello spessore del tratto utilizzando la proprietà StrokeThickness in Aspetto nel pannello Proprietà.
**Giunzioni ad angolo ** Per gli oggetti con angoli retti, ad esempio i rettangoli, è possibile modificare l'aspetto del tratto in corrispondenza di ogni punto angolo applicando uno dei tre stili di giunzione ad angolo disponibili, ovvero Miter
, Round
e Bevel
. È possibile impostare lo stile della giunzione ad angolo utilizzando la proprietà StrokeLineJoin in Aspetto nel pannello Proprietà.
**Limite smussatura ** Il limite smussatura stabilisce la distanza massima tra gomito interno ed esterno di una giunzione ad angolo acuto prima che questa venga automaticamente convertita in una giunzione con angoli smussati. È possibile impostare il limite smussatura utilizzando la proprietà StrokeMiterLimit in Aspetto nel pannello Proprietà. Nell'immagine seguente sono illustrati tre angoli per cui StrokeThickness ha valore 40 e StrokeMiterLimit ha, rispettivamente, valore 1
, 2,2
e 4
. L'effetto visivo del limite smussatura è determinato dalle dimensioni dell'angolo e dallo spessore del tratto.
**Estremità ** Per i tracciati con estremità non connesse, ad esempio le linee, è possibile modificare l'aspetto del tratto a ogni estremità applicando uno dei quattro stili di estremità disponibili, ovvero Flat
, Round
, Square
e Triangle
. È possibile impostare lo stile di un'estremità utilizzando la proprietà StrokeEndLineCap o StrokeStartLineCap in Aspetto nel pannello Proprietà.
StrokeDashArray StrokeDashArray è un tratto con una sequenza di trattini e spazi vuoti. StrokeDashCap e StrokeDashOffset sono proprietà specifiche di StrokeDashArray.
Nell'immagine riportata di seguito è visualizzato un singolo rettangolo con il valore 5 4 (il primo valore specifica la lunghezza del trattino e il secondo valore specifica la lunghezza dello spazio vuoto) per StrokeDashArray, il valore Round per StrokeDashCap e il valore 2 per StrokeDashOffset (la distanza a cui inizia un trattino all'interno della sequenza di tratteggio).
Opacità e visibilità
Quando si diminuisce l'opacità di un oggetto se ne aumenta la trasparenza, in modo da poter visualizzare gli oggetti sottostanti. L'opacità è controllata tramite un canale alfa nel quale vengono archiviate tutte le informazioni sulla trasparenza per un oggetto, una sfumatura o una maschera di opacità. Nella tabella seguente vengono descritti i tre metodi tra cui è possibile scegliere per modificare l'opacità di un oggetto.
Metodo | Risultati |
---|---|
Opacity Consente di modificare la trasparenza di un intero oggetto, inclusi tutti gli attributi visivi dell'oggetto. Nell'immagine sulla destra il valore dell'opacità è impostato sul 60%. |
![]() |
Transparency Consente di rendere leggermente trasparente il valore alfa (A) di un singolo attributo del pennello per un oggetto, ad esempio il riempimento o il tratto, senza che sia necessario modificare tutti gli attributi di un singolo oggetto. Nell'immagine sulla destra solo il riempimento dell'ellisse è più trasparente perché il valore alfa di questo attributo è impostato sul 50%. Il tratto dell'ellisse rimane impostato sul 100%. |
![]() |
Visibility Consente di nascondere o visualizzare un oggetto in momenti diversi e risulta particolarmente efficace nelle animazioni, quando non si desidera rimuovere completamente un oggetto dalla tavola da disegno. L'oggetto a sinistra con riempimento blu e tratto nero spesso, utilizzato nelle due immagini precedenti di questa tabella, nell'immagine a destra è impostato come Hidden. |
![]() |
Vedere anche
Concetti
Copyright © 2011 Microsoft Corporation. Tutti i diritti riservati.