Condividi tramite


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.

Cc294765.7e183f1f-37d8-4dcb-980c-19a5d61ca087(it-it,Expression.10).gifTorna 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 pennelloCc294765.706bbd5c-c0e0-43a1-9604-297f019d0275(it-it,Expression.10).png 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

Cc294765.b83764e5-b1f6-4a94-b75b-7513bef1a430(it-it,Expression.10).png

Composto da un singolo colore.

Pennello sfumatura lineare

Cc294765.50efa3cf-d265-4ea4-af0f-bdcaed4d15fa(it-it,Expression.10).png Cc294765.4f1dddeb-7c03-449d-8199-0fa82122f4b2(it-it,Expression.10).png

Composto da una gradazione di colore lineare.

Pennello sfumatura radiale

Cc294765.c02b5484-1814-40d7-9bd8-1fa88f76fab8(it-it,Expression.10).png Cc294765.c66dd0d9-ce5a-4c6c-9621-7b3cc16a9429(it-it,Expression.10).png

Composto da una gradazione di colore radiale.

Pennello immagine

(solo WPF e Silverlight 2)

Cc294765.81f84f56-906d-456b-8288-d77da1e01e31(it-it,Expression.10).png Cc294765.d3782ca8-64da-47a4-a095-c6cdd0fa47a2(it-it,Expression.10).png Cc294765.38ae3691-f3f1-4a1e-82ca-c7fa164bf56e(it-it,Expression.10).png

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)

Cc294765.197666ac-ef57-4c5c-9779-669e991a00a5(it-it,Expression.10).png Cc294765.ba09cda3-4cee-40ba-b3d4-edc032158bdc(it-it,Expression.10).png Cc294765.15bf6021-620c-4490-9eae-086153d3f14f(it-it,Expression.10).png

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)

Cc294765.fb6c90e0-153c-48fe-b563-e601beac6227(it-it,Expression.10).png Cc294765.e261b99f-7d8f-4d91-bc84-19c7beccc255(it-it,Expression.10).png

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.

Cc294765.7e183f1f-37d8-4dcb-980c-19a5d61ca087(it-it,Expression.10).gifTorna 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.

Cc294765.7e183f1f-37d8-4dcb-980c-19a5d61ca087(it-it,Expression.10).gifTorna 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.

Cc294765.7e183f1f-37d8-4dcb-980c-19a5d61ca087(it-it,Expression.10).gifTorna 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

Cc294765.199cf53a-f100-43f6-9a06-7c9f1a453f39(it-it,Expression.10).png

Strumento Contagocce

Copia l'aspetto di un altro oggetto e lo applica all'oggetto o agli oggetti attualmente selezionati.

Cc294765.39a62108-d8d1-4c6b-8d89-8678a055ff36(it-it,Expression.10).png

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 Cc294765.2ab2d2fb-3478-4b33-87fb-3cdeb9df4d52(it-it,Expression.10).png quando si modifica un Pennello tinta unita Cc294765.3a66ec96-47bb-47fc-8876-6b9456feec3a(it-it,Expression.10).png o un cursore sfumatura su un Pennello sfumatura Cc294765.91fb0c61-7b3b-4ae7-8a59-760e625e3bd7(it-it,Expression.10).png. 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.

Cc294765.7e183f1f-37d8-4dcb-980c-19a5d61ca087(it-it,Expression.10).gifTorna 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 lineareCc294765.209508b1-adaa-4293-8d02-23cade0c599e(it-it,Expression.10).png o su Sfumatura radialeCc294765.2b3b2e7c-204f-4f66-9c1c-540698186242(it-it,Expression.10).png 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 Cc294765.d45e017e-3123-4fc1-9d99-e87b4e3e2202(it-it,Expression.10).png, 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 trattoCc294765.8dc54a0d-02cc-44cd-b802-5a78309f4503(it-it,Expression.10).png 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.

Cc294765.7e183f1f-37d8-4dcb-980c-19a5d61ca087(it-it,Expression.10).gifTorna 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 Cc294765.8dc54a0d-02cc-44cd-b802-5a78309f4503(it-it,Expression.10).png 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.

Cc294765.ddadfdb4-f9f5-4239-8e56-d04014592af4(it-it,Expression.10).png

Trasformazioni applicate al pennello sfumatura lineare di un rettangolo

Cc294765.06d84067-19a1-4699-af39-18d0b11679a0(it-it,Expression.10).png

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.

Cc294765.7e183f1f-37d8-4dcb-980c-19a5d61ca087(it-it,Expression.10).gifTorna 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.

Cc294765.7e183f1f-37d8-4dcb-980c-19a5d61ca087(it-it,Expression.10).gifTorna 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 MiterCc294765.25182a96-9a69-478a-9cfe-5b360e6a9bea(it-it,Expression.10).png, RoundCc294765.05fe4b1d-f584-4bd2-99b6-8bc2d735a89d(it-it,Expression.10).png e BevelCc294765.f0c1ff71-7814-42ba-806b-7ea92d616e69(it-it,Expression.10).png. È possibile impostare lo stile della giunzione ad angolo utilizzando la proprietà StrokeLineJoin in Aspetto nel pannello Proprietà.

    Cc294765.64381b5b-b70f-47a7-b298-4e4f4fe982a6(it-it,Expression.10).png

  • **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 Cc294765.25182a96-9a69-478a-9cfe-5b360e6a9bea(it-it,Expression.10).png, 2,2 Cc294765.05fe4b1d-f584-4bd2-99b6-8bc2d735a89d(it-it,Expression.10).png e 4 Cc294765.f0c1ff71-7814-42ba-806b-7ea92d616e69(it-it,Expression.10).png. L'effetto visivo del limite smussatura è determinato dalle dimensioni dell'angolo e dallo spessore del tratto.

    Cc294765.9bed7ef3-df8f-4844-9341-98d3f726f267(it-it,Expression.10).png

  • **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 FlatCc294765.25182a96-9a69-478a-9cfe-5b360e6a9bea(it-it,Expression.10).png, RoundCc294765.05fe4b1d-f584-4bd2-99b6-8bc2d735a89d(it-it,Expression.10).png, SquareCc294765.f0c1ff71-7814-42ba-806b-7ea92d616e69(it-it,Expression.10).png e TriangleCc294765.eb6fad93-f17e-4f62-a926-8c8651862891(it-it,Expression.10).png. Per impostare lo stile di un'estremità è possibile utilizzare la proprietà StrokeEndLineCap o StrokeStartLineCap, disponibile nella categoria Aspetto del pannello Proprietà.

    Cc294765.2e5bbb1b-f631-466d-b510-5a4bf824cc74(it-it,Expression.10).png

Cc294765.7e183f1f-37d8-4dcb-980c-19a5d61ca087(it-it,Expression.10).gifTorna 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%.

Cc294765.a5f77efb-94c4-4746-9b51-3fcb35d530a1(it-it,Expression.10).png

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%.

Cc294765.87ccf3e4-01f4-4b47-b77f-d2099e400983(it-it,Expression.10).png

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.

Cc294765.7c2aa173-830c-4444-b588-f725ea563077(it-it,Expression.10).png

Cc294765.7e183f1f-37d8-4dcb-980c-19a5d61ca087(it-it,Expression.10).gifTorna 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

Cc294765.a33ed89c-afbe-4f5a-a2c0-2fa197d3c726(it-it,Expression.10).png

Pulsante senza un effetto bitmap applicato.

Sfocatura

Cc294765.339caaa0-22b9-44f9-8bbf-77fe92fda69e(it-it,Expression.10).png

Simula l'effetto che si ottiene osservando un oggetto attraverso una lente non a fuoco.

Alone esterno

Cc294765.0004f578-fae6-44e7-9f16-55117f798412(it-it,Expression.10).png

Crea un alone di colore attorno al perimetro di un oggetto.

Ombreggiatura

Cc294765.86ca6ea3-14c9-4b94-9441-bd2186bd4f4d(it-it,Expression.10).png

Crea un'ombreggiatura dietro a un oggetto.

Bordo smussato

Cc294765.b0a45c04-5a8a-407c-8bb8-1f4fb22a889e(it-it,Expression.10).png

Crea una smussatura che solleva la superficie di un'immagine in base a una curva specificata.

Rilievo

Cc294765.bd142911-d002-4940-a53b-e00aadba8f49(it-it,Expression.10).png

Crea un bump mapping di un elemento visivo per dare l'impressione di profondità e trama da una sorgente di luce artificiale.

Cc294765.7e183f1f-37d8-4dcb-980c-19a5d61ca087(it-it,Expression.10).gifTorna all'inizio