Cenni preliminari sull'aspetto
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. Le proprietà disponibili nelle categorie Aspetto e Pennelli cambiano dinamicamente in base al contenuto dell'oggetto selezionato nel progetto di Expression Blend, 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, ad esempio 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. |
Torna all'inizio
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 elemento della scheda 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 (solo WPF e Silverlight 2) |
Creato da un'immagine. Da sinistra verso destra: pennello immagine iniziale, pennello immagine affiancato e pennello immagine capovolto. |
|||
Pennello da disegno (solo WPF e Silverlight 2) |
Creato da un disegno vettoriale. Da sinistra verso destra: pennello da disegno iniziale, pennello da disegno affiancato e pennello da disegno capovolto. |
|||
Pennello visivo (solo WPF e Silverlight 2) |
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. |
Torna all'inizio
Risorse pennello
Dopo aver creato un pennello su un oggetto, è possibile convertire il pennello in una risorsa applicabile ad altri oggetti.
[!NOTA]
Le risorse non sono supportate in Microsoft Silverlight 1.0.
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 colore e Creare o modificare una risorsa pennello da disegno. Per ulteriori informazioni sulle risorse, vedere Cenni preliminari sulle risorse.
Torna all'inizio
Colore e spazi colore
Nella categoria Pennelli del pannello Proprietà di Expression Blend è 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.
Torna all'inizio
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
Strumento Contagocce |
Copia l'aspetto di un altro oggetto e lo applica all'oggetto o agli oggetti attualmente selezionati. |
|
Strumento Secchiello |
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, vedere Copiare o applicare attributi a un oggetto.
Nell'angolo inferiore destro dell'editordei colori è inoltre disponibile lo strumento Contagocce colore quando si modifica un Pennello tinta unita o un cursore sfumatura su un Pennello sfumatura . Quando questo Contagocce è selezionato, è possibile afferrare un campione di colore da un punto qualsiasi del desktop e applicarlo al pennello selezionato. È possibile premere ESC in qualsiasi momento per annullare il Contagocce.
Torna all'inizio
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 Sfumatura lineare o su Sfumatura radiale nella categoria Pennelli del pannello Proprietà per passare da un tipo di pennello sfumatura all'altro.
È possibile utilizzare i due tipi di pennelli sfumatura per creare riempimenti sfumati, tratti sfumati, testo con una sfumatura per la relativa proprietà Foreground o sfondi sfumati per qualsiasi elemento dotato di proprietà Background. Quando si applica una sfumatura a una proprietà relativa all'aspetto, sul dispositivo di scorrimento della sfumatura vengono visualizzate alcune piccole icone , denominate cursori. È 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.
Quando si utilizza un pennello sfumatura è possibile impostare anche alcune opzioni. Fare clic sul pulsante Opzioni nella parte inferiore dell'editor dei colori per impostare la modalità della sfumatura su Pad, Reflect (riflette il riempimento sfumato) o Repeat (ripete il riempimento sfumato). Se si utilizza lo strumento Trasforma tratto per modificare il pennello, sarà possibile applicare queste opzioni sia ai pennelli sfumatura lineari che a quelli radiali. Per ulteriori informazioni, vedere la sezione Brush transform tool seguente.
Torna all'inizio
Strumento Trasforma tratto
Per trasformare il riempimento, il tratto, la maschera di opacità o un'altra proprietà del pennello applicato a un oggetto, selezionare la proprietà del pennello nel pannello Proprietà e quindi selezionare lo strumento Trasforma tratto nella casella degli strumenti. Sulla tavola da disegno viene visualizzata una freccia di trasformazione del tratto, che è possibile modificare con il puntatore del mouse. Se si utilizza un pennello sfumatura, i punti finali della freccia di trasformazione corrisponderanno ai cursori sfumatura alle due estremità della barra dei colori. È possibile modificare il comportamento dello strumento Trasforma tratto nei modi seguenti:
Tenere premuto MAIUSC mentre si trascina un punto di fine per vincolare lo spostamento lungo la linea retta che collega i punti di fine.
Tenere premuto MAIUSC mentre si trascina l'intera freccia per vincolare lo spostamento al piano X-Y.
Tenere premuto MAIUSC mentre si ruota un punto di fine per eseguire la rotazione per incrementi di 15 gradi.
Tenere premuto ALT mentre si trascina un punto di fine per spostare entrambi i punti di fine contemporaneamente, senza modificare la posizione del punto centrale.
Le immagini seguenti mostrano l'aspetto di un oggetto rettangolare dopo l'applicazione di varie trasformazioni al pennello sfumatura della proprietà Fill.
Trasformazioni applicate al pennello sfumatura lineare di un rettangolo
Trasformazioni applicate al pennello sfumatura radiale di un rettangolo
Facoltativamente è possibile impostare le proprietà che vengono visualizzate quando si fa clic sul pulsante Opzioni nella categoria Pennelli del pannello Proprietà. Nell'immagine precedente è selezionata l'opzione Pad. Se si seleziona l'opzione Reflect o Repeat e quindi si modifica la freccia di trasformazione in modo che risulti più corta dell'oggetto, si ottiene un effetto di corrugamento.
È possibile trasformare anche tipi di pennello diversi dai pennelli sfumatura. Per ulteriori informazioni sulle trasformazioni del tratto, vedere Trasformare un pennello sfumatura o un pennello tessera.
Torna all'inizio
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.
Torna all'inizio
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. Per impostare lo stile di un'estremità è possibile utilizzare la proprietà StrokeEndLineCap o StrokeStartLineCap, disponibile nella categoria Aspetto del pannello Proprietà.
Torna all'inizio
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 Modifica 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 Rende leggermente trasparente il valore alfa (A) di un singolo attributo del pennello per un oggetto, ad esempio il riempimento o il tratto, senza richiedere di 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. |
Torna all'inizio
Effetti bitmap
Gli effetti bitmap sono semplici operazioni di elaborazione dei pixel.
[!NOTA]
Gli effetti bitmap non sono supportati in Silverlight 1.0 o Silverlight 2.
[!NOTA]
Nelle applicazioni WPF (Windows Presentation Foundation), ad esempio quelle create con Expression Blend, il termine pixel indica pixel indipendenti dalla periferica o unità indipendenti dalla periferica, che equivalgono alla dimensione di un pixel su un monitor con risoluzione di 96 dpi. Ogni unità corrisponde approssimativamente a 1/96 di pollice, indipendentemente dalle dimensioni del monitor o dalla risoluzione dello schermo.
Nella tabella seguente sono descritti tutti gli effetti bitmap disponibili in Expression Blend. Gli effetti bitmap sono disponibili nella categoria Aspetto del pannello Proprietà quando è selezionato un oggetto quale un rettangolo o un pulsante. Ogni effetto bitmap espone alcune sottoproprietà. L'effetto bitmap Sfocatura, ad esempio, espone la sottoproprietà Radius. Le operazioni di elaborazione dei pixel necessarie per eseguire il rendering degli effetti bitmap (e degli oggetti a cui tali effetti sono applicati) vengono effettuate in fase di esecuzione. Per tale motivo, non applicare effetti bitmap a elementi visivi o animazioni di grandi dimensioni, perché l'applicazione potrebbe subire un calo di prestazioni. Per informazioni sull'impostazione degli effetti bitmap, vedere Aggiungere un effetto bitmap a un oggetto.
Effetto |
Aspetto |
Descrizione |
---|---|---|
Nessuno |
Pulsante senza un effetto bitmap applicato. |
|
Sfocatura |
Simula l'effetto che si ottiene osservando un oggetto attraverso una lente non a fuoco. |
|
Alone esterno |
Crea un alone di colore attorno al perimetro di un oggetto. |
|
Ombreggiatura |
Crea un'ombreggiatura dietro a un oggetto. |
|
Bordo smussato |
Crea una smussatura che solleva la superficie di un'immagine in base a una curva specificata. |
|
Rilievo |
Crea un bump mapping di un elemento visivo per dare l'impressione di profondità e trama da una sorgente di luce artificiale. |
Torna all'inizio