Cenni sul disegno con colori a tinta unita e sfumature

  • Articolo

Aggiornamento: novembre 2007

In questo argomento viene illustrata la modalità di utilizzo degli oggetti SolidColorBrush, LinearGradientBrush e RadialGradientBrush per disegnare con colori a tinta unita, sfumature lineari e sfumature radiali.

Nel presente argomento sono contenute le seguenti sezioni.

  • Disegno di un'area con tinte unite
  • Disegno di un'area mediante sfumature
  • Sfumature lineari
  • Sfumature radiali
  • Specifica dei cursori sfumatura trasparenti o parzialmente trasparenti
  • Disegno con oggetti Images, Drawings, Visuals e Patterns
  • Argomenti correlati

Disegno di un'area con tinte unite

Una delle operazioni più frequenti in una piattaforma è disegnare un'area con un oggetto Color a tinta unita. Per effettuare questa operazione, in Windows Presentation Foundation (WPF) viene fornita la classe SolidColorBrush. Nelle sezioni seguenti vengono descritte le diverse modalità di disegno utilizzando una classe SolidColorBrush.

Utilizzo di una classe SolidColorBrush in "XAML"

Per disegnare un'area con tinte unite in XAML, utilizzare una delle seguenti opzioni.

  • Selezionare un pennello a tinta unita predefinito in base al nome. Ad esempio, è possibile impostare un oggetto Background del pulsante su "Red" o "MediumBlue". Per un elenco di altri pennelli a tinta unita predefiniti, vedere le proprietà statiche della classe Brushes. Di seguito è riportato un esempio.

    <!-- This button's background is painted with a red SolidColorBrush,
     described using a named color. -->
<Button Background="Red">A Button</Button>

  • Scegliere un colore dalla tavolozza dei colori a 32 bit specificando la quantità di rosso, verde e blu per combinare un'unica tinta unita. Il formato per specificare un colore dalla tavolozza a 32 bit è "#rrggbb", dove rr è un numero esadecimale a due cifre che indica la relativa quantità di rosso, gg indica la quantità di verde mentre bb indica la quantità di blu. Inoltre, il colore può essere specificato come "#aarrggbb" dove aa indica il valore alfa, o trasparenza, del colore. In questo modo è possibile creare colori parzialmente trasparenti. Nell'esempio riportato di seguito, l'oggetto Background di Button è impostato su un rosso completamente opaco mediante notazione esadecimale.

    <!-- This button's background is painted with a red SolidColorBrush,
     described using hexadecimal notation. -->
<Button Background="#FFFF0000">A Button</Button>

  • Utilizzare la sintassi del tag della proprietà per descrivere una classe SolidColorBrush. Questa sintassi è più dettagliata ma consente di specificare altre impostazioni, ad esempio, l'opacità del pennello. Nell'esempio riportato di seguito, le proprietà Background di due elementi Button sono impostate su un rosso completamente opaco. Il colore del primo pennello è descritto mediante un nome di colore predefinito. Il colore del secondo pennello è descritto mediante una notazione esadecimale.

    <!-- Both of these buttons' backgrounds are painted with red 
     SolidColorBrush objects, described using object element
     syntax. -->
<Button>A Button

  <Button.Background>
    <SolidColorBrush Color="Red" />
  </Button.Background>
</Button>

<Button>A Button

  <Button.Background>
    <SolidColorBrush Color="#FFFF0000" />
  </Button.Background>
</Button>

Disegno mediante una classe SolidColorBrush nel codice

Per disegnare un'area con tinte unite nel codice, utilizzare una delle seguenti opzioni.

  • Utilizzare uno dei pennelli predefiniti forniti dalla classe Brushes. Nell'esempio riportato di seguito, l'oggetto Background di Button è impostato su Red.

    Button myButton = new Button();
myButton.Content = "A Button";
myButton.Background = Brushes.Red;

  • Creare una classe SolidColorBrush e impostare la relativa proprietà Color mediante una struttura Color. È possibile utilizzare un colore predefinito dalla classe Colors oppure creare un oggetto Color mediante il metodo statico FromArgb.

    Nell'esempio riportato di seguito viene illustrata la modalità per impostare la proprietà Color di SolidColorBrush mediante un colore predefinito.

    Button myButton = new Button();
myButton.Content = "A Button";

SolidColorBrush mySolidColorBrush = new SolidColorBrush();
mySolidColorBrush.Color = Colors.Red;
myButton.Background = mySolidColorBrush;

Il metodo statico FromArgb consente di specificare i valori alfa, rosso, verde e blu del colore. L'intervallo tipico di ciascuno di questi valori è compreso tra 0 e 255. Ad esempio, un valore alfa equivalente a 0 indica un colore completamente trasparente mentre un valore 255 indica un colore completamente opaco. Analogamente, un valore 0 relativo al colore rosso indica la totale assenza di rosso nel colore mentre un valore 255 indica la quantità di rosso massima contenuta. Nell'esempio riportato di seguito, il colore di un pennello viene descritto specificando i valori alfa, rosso, verde e blu.

Per conoscere ulteriori modi per specificare un colore, vedere l'argomento di riferimento Color.

Disegno di un'area mediante sfumature

Un pennello sfumato consente di disegnare un'area con più colori che si fondono tra loro lungo un asse. È possibile utilizzarlo per generare luci e ombre fornendo un effetto tridimensionale. Inoltre può essere utilizzato per simulare l'effetto cristallo, colori, acqua corrente e altre superfici smussate. WPF fornisce due tipi di pennelli sfumati: LinearGradientBrush e RadialGradientBrush.

Sfumature lineari

Un oggetto LinearGradientBrush consente di disegnare un'area con una sfumatura definita lungo una linea, l'asse delle sfumature. Specificare i colori delle sfumature e le relative posizioni lungo l'asse delle sfumature mediante gli oggetti GradientStop. Inoltre è possibile modificare l'asse delle sfumature che consente di creare sfumature orizzontali e verticali e di invertire la direzione della sfumatura. Tale asse viene descritto in dettaglio nella sezione seguente. Per impostazione predefinita, viene creata una sfumatura diagonale.

Nell'esempio riportato di seguito viene illustrato il codice che crea una sfumatura lineare con quattro colori.

<!-- This rectangle is painted with a diagonal linear gradient. -->
<Rectangle Width="200" Height="100">
  <Rectangle.Fill>
    <LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
      <GradientStop Color="Yellow" Offset="0.0" />
      <GradientStop Color="Red" Offset="0.25" />
      <GradientStop Color="Blue" Offset="0.75" />
      <GradientStop Color="LimeGreen" Offset="1.0" />
    </LinearGradientBrush>
  </Rectangle.Fill>
</Rectangle>

Rectangle diagonalFillRectangle = new Rectangle();
diagonalFillRectangle.Width = 200;
diagonalFillRectangle.Height = 100;

// Create a diagonal linear gradient with four stops.   
LinearGradientBrush myLinearGradientBrush =
    new LinearGradientBrush();
myLinearGradientBrush.StartPoint = new Point(0,0);
myLinearGradientBrush.EndPoint = new Point(1,1);
myLinearGradientBrush.GradientStops.Add(
    new GradientStop(Colors.Yellow, 0.0));
myLinearGradientBrush.GradientStops.Add(
    new GradientStop(Colors.Red, 0.25));                
myLinearGradientBrush.GradientStops.Add(
    new GradientStop(Colors.Blue, 0.75));        
myLinearGradientBrush.GradientStops.Add(
    new GradientStop(Colors.LimeGreen, 1.0));

// Use the brush to paint the rectangle.
diagonalFillRectangle.Fill = myLinearGradientBrush;

La sfumatura del codice è la seguente:

Sfumatura lineare diagonale

Nota: negli esempi di sfumature contenuti in questo argomento viene utilizzato il sistema di coordinate predefinito per impostare i punti iniziali e quelli finali. Il sistema di coordinate predefinito è relativo a un riquadro delimitatore del testo. 0 e 1 indicano rispettivamente lo 0 e il 100% del riquadro delimitatore del testo. Tale sistema di coordinate può essere modificato impostando la proprietà MappingMode sul valore Absolute. Un sistema di coordinate assoluto non è relativo a un riquadro delimitatore del testo. I valori vengono interpretati direttamente nello spazio locale.

L'oggetto GradientStop è il blocco predefinito di base di un pennello sfumato. Un cursore sfumatura consente di specificare un oggetto Color in Offset lungo l'asse delle sfumature.

  • La proprietà Color del cursore sfumatura consente di specificare il colore di tale cursore. È possibile impostare il colore utilizzando un colore predefinito (fornito dalla classe Colors) o specificando i valori ScRGB o ARGB. In XAML, è possibile utilizzare anche una notazione esedecimale per descrivere un colore. Per ulteriori informazioni, vedere la struttura Color.

  • La proprietà Offset del cursore sfumatura consente di specificare il colore del cursore sfumatura sull'asse delle sfumature. L'offset è un oggetto Double il cui intervallo varia tra 0 e 1. Più il valore offset del cursore sfumatura si avvicina allo 0, più il colore è vicino all'inizio delle sfumatura. Più il valore offset del cursore sfumatura si avvicina a 1, più il colore è vicino alla fine delle sfumatura.

Il colore di ciascun punto tra i cursori sfumatura è linearmente interpolato come combinazione del colore specificato dai due cursori sfumatura di delimitazione. Nell'immagine riportata di seguito vengono evidenziati i cursori sfumatura dell'esempio precedente. I cerchi indicano la posizione dei cursori sfumatura mentre la linea tratteggiata indica l'asse delle sfumature.

Cursori sfumatura in una sfumatura lineare

Il primo cursore sfumatura specifica il colore giallo in un offset pari a 0.0. Il secondo cursore sfumatura specifica il colore rosso in un offset pari a 0.25. I punti tra questi due cursori cambiano gradualmente da giallo a rosso quando ci si sposta da sinistra verso destra lungo l'asse delle sfumature. Il terzo cursore sfumatura specifica il colore blu in un offset pari a 0.75. I punti tra il secondo e il terzo cursore sfumature cambiano gradualmente da rosso a blu. Il quarto cursore sfumatura specifica il colore giallo-verde in un offset pari a 1.0. I punti tra il terzo e il quarto cursore sfumature cambiano gradualmente da blu a giallo-verde.

Asse delle sfumature

Come accennato in precedenza, i cursori sfumatura del pennello sfumato lineare sono posizionati lungo una riga definita asse delle sfumature. È possibile modificare l'orientamento e la dimensione della riga mediante le proprietà StartPoint e EndPoint del pennello. Modificando le proprietà StartPoint e EndPoint del pennello, è possibile creare sfumature orizzontali e verticali, invertire la direzione della sfumatura, ridurre la distribuzione della sfumatura e altro ancora.

Per impostazione predefinita, le proprietà StartPoint e EndPoint del pennello sfumato lineare sono relative all'area da disegnare. I punti (0,0) e (1,1) rappresentano rispettivamente l'angolo superiore sinistro e l'angolo inferiore destro dell'area da disegnare. La proprietà StartPoint predefinita di un oggetto LinearGradientBrush è (0,0) e la proprietà EndPoint predefinita corrispondente è (1,1), che consente di creare una sfumatura diagonale partendo dall'angolo superiore sinistro fino all'angolo inferiore destro dell'area da disegnare. Nell'immagine riportata di seguito viene mostrato l'asse delle sfumature di un pennello sfumato lineare con le proprietà predefinite StartPoint e EndPoint.

Asse delle sfumature per sfumatura lineare diagonale

Nell'esempio riportato di seguito viene illustrato come creare una sfumatura orizzontale specificando le proprietà StartPoint e EndPoint del pennello. Si noti che i cursori sfumatura sono gli stessi degli esempi precedenti. Modificando semplicemente le proprietà StartPoint e EndPoint, la sfumatura è cambiata da diagonale in orizzontale.

<!-- This rectangle is painted with a horizontal linear gradient. -->
<Rectangle Width="200" Height="100">
  <Rectangle.Fill>
    <LinearGradientBrush StartPoint="0,0.5" EndPoint="1,0.5">
      <GradientStop Color="Yellow" Offset="0.0" />
      <GradientStop Color="Red" Offset="0.25" />
      <GradientStop Color="Blue" Offset="0.75" />
      <GradientStop Color="LimeGreen" Offset="1.0" />
    </LinearGradientBrush>
  </Rectangle.Fill>
</Rectangle>

Rectangle horizontalFillRectangle = new Rectangle();
horizontalFillRectangle.Width = 200;
horizontalFillRectangle.Height = 100;

// Create a horizontal linear gradient with four stops.   
LinearGradientBrush myHorizontalGradient =
    new LinearGradientBrush();
myHorizontalGradient.StartPoint = new Point(0,0.5);
myHorizontalGradient.EndPoint = new Point(1,0.5);
myHorizontalGradient.GradientStops.Add(
    new GradientStop(Colors.Yellow, 0.0));
myHorizontalGradient.GradientStops.Add(
    new GradientStop(Colors.Red, 0.25));                
myHorizontalGradient.GradientStops.Add(
    new GradientStop(Colors.Blue, 0.75));        
myHorizontalGradient.GradientStops.Add(
    new GradientStop(Colors.LimeGreen, 1.0));

// Use the brush to paint the rectangle.
horizontalFillRectangle.Fill = myHorizontalGradient;

Nell'immagine riportata di seguito viene illustrata la sfumatura creata. L'asse delle sfumature è contrassegnato da una linea tratteggiata mentre i cursori sfumatura da cerchi.

Asse delle sfumature per sfumatura lineare orizzontale

Nell'esempio riportato di seguito viene illustrato come creare una sfumatura verticale.

<!-- This rectangle is painted with a vertical gradient. -->
<Rectangle Width="200" Height="100">
  <Rectangle.Fill>
    <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
      <GradientStop Color="Yellow" Offset="0.0" />
      <GradientStop Color="Red" Offset="0.25" />
      <GradientStop Color="Blue" Offset="0.75" />
      <GradientStop Color="LimeGreen" Offset="1.0" />
    </LinearGradientBrush>
  </Rectangle.Fill>
</Rectangle>

Rectangle verticalFillRectangle = new Rectangle();
verticalFillRectangle.Width = 200;
verticalFillRectangle.Height = 100;

// Create a vertical linear gradient with four stops.   
LinearGradientBrush myVerticalGradient =
    new LinearGradientBrush();
myVerticalGradient.StartPoint = new Point(0.5,0);
myVerticalGradient.EndPoint = new Point(0.5,1);
myVerticalGradient.GradientStops.Add(
    new GradientStop(Colors.Yellow, 0.0));
myVerticalGradient.GradientStops.Add(
    new GradientStop(Colors.Red, 0.25));                
myVerticalGradient.GradientStops.Add(
    new GradientStop(Colors.Blue, 0.75));        
myVerticalGradient.GradientStops.Add(
    new GradientStop(Colors.LimeGreen, 1.0));

// Use the brush to paint the rectangle.
verticalFillRectangle.Fill = myVerticalGradient;

Nell'immagine riportata di seguito viene illustrata la sfumatura creata. L'asse delle sfumature è contrassegnato da una linea tratteggiata mentre i cursori sfumatura da cerchi.

Asse delle sfumature per sfumatura verticale

Sfumature radiali

Analogamente all'oggetto LinearGradientBrush, un oggetto RadialGradientBrush consente di disegnare un'area con colori che si fondono lungo un asse. Negli esempi precedenti è stato illustrato come l'asse del pennello sfumato lineare sia una linea retta. Un asse del pennello sfumato radiale è definito da un cerchio; i colori corrispondenti di irradiano verso l'esterno partendo dall'origine.

Nell'esempio riportato di seguito, un pennello sfumato radiale viene utilizzato per disegnare la parte interna di un rettangolo.

<!-- This rectangle is painted with a diagonal linear gradient. -->
<Rectangle Width="200" Height="100">
  <Rectangle.Fill>
    <RadialGradientBrush 
      GradientOrigin="0.5,0.5" Center="0.5,0.5" 
      RadiusX="0.5" RadiusY="0.5">
      <GradientStop Color="Yellow" Offset="0" />
      <GradientStop Color="Red" Offset="0.25" />
      <GradientStop Color="Blue" Offset="0.75" />
      <GradientStop Color="LimeGreen" Offset="1" />
    </RadialGradientBrush>
  </Rectangle.Fill>
</Rectangle>


RadialGradientBrush myRadialGradientBrush = new RadialGradientBrush();
myRadialGradientBrush.GradientOrigin = new Point(0.5,0.5);
myRadialGradientBrush.Center = new Point(0.5,0.5);
myRadialGradientBrush.RadiusX = 0.5;
myRadialGradientBrush.RadiusY = 0.5;
myRadialGradientBrush.GradientStops.Add(
    new GradientStop(Colors.Yellow, 0.0));
myRadialGradientBrush.GradientStops.Add(
    new GradientStop(Colors.Red, 0.25));
myRadialGradientBrush.GradientStops.Add(
    new GradientStop(Colors.Blue, 0.75));
myRadialGradientBrush.GradientStops.Add(
    new GradientStop(Colors.LimeGreen, 1.0));

Rectangle myRectangle = new Rectangle();
myRectangle.Width = 200;
myRectangle.Height = 100;
myRectangle.Fill = myRadialGradientBrush;

Nell'immagine riportata di seguito viene illustrata la sfumatura creata nell'esempio precedente. I cursori sfumatura del pennello sono stati evidenziati. Si noti che, anche se i risultati sono differenti, i cursori sfumatura nell'esempio sono identici a quelli degli esempi con pennello sfumato lineare riportati in precedenza.

Cursori sfumatura in una sfumatura radiale

L'oggetto GradientOrigin specifica il punto iniziale dell'asse delle sfumature di un pennello sfumato radiale. L'asse delle sfumature si irradia a partire dall'origine della sfumatura fino al cerchio della sfumatura. Il cerchio della sfumatura di un pennello è definito dalle proprietà Center, RadiusX e RadiusY corrispondenti.

Nell'immagine riportata di seguito vengono illustrate numerose sfumature radiali con impostazioni GradientOrigin, Center, RadiusX e RadiusY differenti.

Oggetto RadialGradientBrushes con impostazioni GradientOrigin, Center, RadiusX RadiusY differenti.

Impostazioni RadialGradientBrush

Specifica dei cursori sfumatura trasparenti o parzialmente trasparenti

Dal momento che i cursori sfumatura non forniscono una proprietà relativa all'opacità, è necessario specificare il canale alfa dei colori utilizzando la notazione esadecimale ARGB nel markup oppure utilizzare il metodo Color.FromScRgb per creare cursori sfumatura che siano trasparenti o parzialmente trasparenti. Nelle sezioni seguenti viene illustrato come creare cursori sfumatura parzialmente trasparenti in XAML e nel codice. Per informazioni sull'impostazione dell'opacità dell'intero pennello, vedere la sezione Specifica dell'opacità di un pennello.

Specifica dell'opacità di colore in "XAML"

In XAML, si utilizza la notazione esadecimale ARGB per specificare l'opacità di singoli colori. La notazione esadecimale ARGB utilizza la sintassi seguente:

#aarrggbb

aa nella riga precedente rappresenta un valore esadecimale a due cifre utilizzato per specificare l'opacità del colore. rr, gge bb rappresentano un valore esadecimale a due cifre che specifica rispettivamente la quantità di rosso, verde e blu nel colore. Ogni cifra esadecimale può presentare un valore compreso tra 0 e 9 o tra A e F. 0 è il valore più basso, mentre F è il più elevato. Un valore alfa pari a 00 indica un colore completamente trasparente, mentre un valore alfa pari a FF indica un colore completamente opaco. Nell'esempio riportato di seguito, la notazione esadecimale ARGB consente di specificare due colori. Il primo è parzialmente trasparente (con valore alfa pari a x20) mentre il secondo è completamente opaco.

<Rectangle Width="100" Height="100">
  <Rectangle.Fill>
    <LinearGradientBrush StartPoint="0,0">

      <!-- This gradient stop is partially transparent. -->
      <GradientStop Color="#200000FF" Offset="0.0" />

      <!-- This gradient stop is fully opaque. -->
      <GradientStop Color="#FF0000FF" Offset="1.0" />
    </LinearGradientBrush>
  </Rectangle.Fill>
</Rectangle>

Specifica dell'opacità di colore nel codice

Quando si utilizza il codice, il metodo FromArgb statico consente di specificare un valore alfa quando si crea un colore. Il metodo accetta quattro parametri di tipo Byte. Il primo parametro specifica il canale alfa del colore mentre gli altri tre parametri specificano i valori rosso, verde e blu del colore. Ogni valore deve essere compreso tra 0 e 255 inclusi. Un valore alfa pari a 0 indica un colore completamente trasparente, mentre un valore alfa pari a 255 indica un colore completamente opaco. Nell'esempio riportato di seguito, il metodo FromArgb viene utilizzato per produrre due colori. Il primo è parzialmente trasparente (con valore alfa pari a 32) mentre il secondo è completamente opaco.

LinearGradientBrush myLinearGradientBrush = new LinearGradientBrush();

// This gradient stop is partially transparent.
myLinearGradientBrush.GradientStops.Add(
    new GradientStop(Color.FromArgb(32, 0, 0, 255), 0.0));

// This gradient stop is fully opaque. 
myLinearGradientBrush.GradientStops.Add(
    new GradientStop(Color.FromArgb(255, 0, 0, 255), 1.0));

Rectangle myRectangle = new Rectangle();
myRectangle.Width = 100;
myRectangle.Height = 100;
myRectangle.Fill = myLinearGradientBrush;

In alternativa, è possibile utilizzare il metodo FromScRgb, che consente di utilizzare i valori ScRGB per creare un colore.

Disegno con oggetti Images, Drawings, Visuals e Patterns

Le classi ImageBrush, DrawingBrush e VisualBrush consentono di disegnare un'area con immagini, disegni ed elementi visivi. Per informazioni sul disegno con immagini, disegni e modelli, vedere Disegnare con oggetti Image, Drawing e Visual.

Vedere anche

Concetti

Disegnare con oggetti Image, Drawing e Visual

Cenni preliminari sulle proprietà di trasformazione Brush

Livelli di rendering della grafica

Riferimenti

Brush

SolidColorBrush

LinearGradientBrush

RadialGradientBrush