Cenni preliminari sulle maschere di opacità

Aggiornamento: novembre 2007

Le maschere di opacità consentono di rendere trasparenti o parzialmente trasparenti parti di un elemento o elemento visivo. Per creare una maschera di opacità, applicare un oggetto Brush alla proprietà OpacityMask di un elemento o Visual. Il pennello viene mappato all'elemento o elemento visivo e il valore di opacità di ogni pixel del pennello viene utilizzato per determinare l'opacità risultante di ogni pixel corrispondente dell'elemento o elemento visivo.

Di seguito sono elencate le diverse sezioni di questo argomento.

• Prerequisiti

• Creazione di effetti visivi con maschere di opacità

• Creazione di una maschera di opacità

• Utilizzo di una sfumatura come maschera di opacità

• Definizione di cursori sfumatura per una maschera di opacità

• Utilizzo di un'immagine come maschera di opacità

• Creazione di una maschera di opacità da un disegno

• Argomenti correlati

Prerequisiti

In questi cenni preliminari si presuppone che l'utente abbia acquisito familiarità con gli oggetti Brush. Per un'introduzione all'utilizzo dei pennelli, vedere Cenni sul disegno con colori a tinta unita e sfumature. Per informazioni su ImageBrush e DrawingBrush, vedere Disegnare con oggetti Image, Drawing e Visual.

Creazione di effetti visivi con maschere di opacità

Il funzionamento delle maschere di opacità è basato sul mapping del suo contenuto all'elemento o elemento visivo. Il canale alfa di ogni pixel del pennello viene utilizzato per determinare l'opacità risultante dei pixel corrispondenti dell'elemento o elemento visivo; il colore effettivo del pennello viene ignorato. Se una parte del pennello è trasparente, la parte corrispondente dell'elemento o elemento visivo diventa trasparente. Se una parte del pennello è opaca, l'opacità della parte corrispondente dell'elemento o elemento visivo rimane inalterata. L'opacità specificata dalla maschera di opacità viene combinata a qualsiasi impostazione di opacità dell'elemento o elemento visivo. Ad esempio, se un elemento è opaco al 25 percento e viene applicata una maschera di opacità che crea una transizione da opacità totale a trasparenza totale, il risultato è un elemento che passa dal 25 percento di opacità a una trasparenza totale.

Nota

Anche se negli esempi forniti in questi cenni preliminari viene illustrato l'utilizzo delle maschere di opacità su elementi di immagine, una maschera di opacità può essere applicata a qualsiasi elemento o Visual, inclusi i pannelli e i controlli.

Le maschere di opacità consentono di creare effetti visivi interessanti, ad esempio dissolvenze per immagini o pulsanti, aggiunta di trame agli elementi o combinazione di sfumature per ottenere il cosiddetto effetto cristallo. Di seguito viene illustrato l'utilizzo di una maschera di opacità. Per visualizzare le parti trasparenti della maschera viene utilizzato uno sfondo a scacchi.

Esempio di maschera di opacità

Creazione di una maschera di opacità

Per creare una maschera di opacità, creare un oggetto Brush e applicarlo alla proprietà OpacityMask di un elemento o elemento visivo. È possibile utilizzare qualsiasi tipo di Brush come maschera di opacità.

• LinearGradientBrush, RadialGradientBrush: consente di creare l'effetto dissolvenza per un elemento o elemento visivo.

  Di seguito viene illustrato un oggetto LinearGradientBrush utilizzato come maschera di opacità.

  Esempio di maschera di opacità LinearGradientBrush

  

• ImageBrush: consente di creare trame o effetti con bordi sfumati o frastagliati.

  Di seguito viene illustrato un oggetto ImageBrush utilizzato come maschera di opacità.

  Esempio di maschera di opacità LinearGradientBrush

  

• DrawingBrush: consente di creare maschere di opacità complesse da pattern di forme, immagini e sfumature.

  Di seguito viene illustrato un oggetto DrawingBrush utilizzato come maschera di opacità.

  Esempio di maschera di opacità DrawingBrush

  

I pennelli a sfumatura (LinearGradientBrush e RadialGradientBrush) sono particolarmente appropriati per essere utilizzati come maschera di opacità. Poiché un oggetto SolidColorBrush riempie un'area con un colore uniforme, esso costituisce una maschera di opacità scarsamente efficace; l'utilizzo di un oggetto SolidColorBrush equivale all'impostazione della proprietà OpacityMask dell'elemento o elemento visivo.

Utilizzo di una sfumatura come maschera di opacità

Per creare un riempimento sfumato, specificare due o più cursori sfumatura. Ogni cursore sfumatura descrive un colore e una posizione. Per ulteriori informazioni sulla creazione e l'utilizzo di sfumature, vedere Cenni sul disegno con colori a tinta unita e sfumature. Il processo equivale a quello relativo all'utilizzo di una sfumatura come maschera di opacità, ma, anziché miscelare i colori, la maschera di opacità miscela i valori del canale alfa. Pertanto, ciò che è importante non è il colore effettivo del contenuto della sfumatura, bensì il canale alfa, o opacità, di ogni colore. Di seguito è riportato un esempio.

<!--With the opacity mask:--> 
<Image
  Width="200" Height="150"
  Source="sampleImages\Waterlilies.jpg"
  Margin="10"
  HorizontalAlignment="Left"
  Grid.Column="2" Grid.Row="3">
  <Image.OpacityMask>
    <LinearGradientBrush StartPoint="0.1,0.1" EndPoint="0.75,0.75">
      <LinearGradientBrush.GradientStops>
        <GradientStop Offset="0" Color="Black"/>
        <GradientStop Offset="1" Color="Transparent"/>
      </LinearGradientBrush.GradientStops>
    </LinearGradientBrush>
  </Image.OpacityMask>
</Image>

Definizione di cursori sfumatura per una maschera di opacità

Nell'esempio precedente, il colore definito dal sistema Black viene utilizzato come colore iniziale della sfumatura. Poiché tutti i colori nella classe Colors, ad eccezione di Transparent, sono completamente opachi, possono essere utilizzati per definire semplicemente un colore iniziale per una maschera di opacità con sfumatura.

Per un controllo maggiore su valori alfa quando si definisce una maschera di opacità, è possibile specificare il canale alfa dei colori utilizzando la notazione esadecimale ARGB nel markup oppure il metodo Color.FromScRgb.

Definizione dell'opacità di colore in "XAML"

In Extensible Application Markup Language (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ù piccolo, 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 è completamente opaco, mentre il secondo è completamente trasparente.

<Canvas.OpacityMask>
  <RadialGradientBrush>
    <RadialGradientBrush.GradientStops>
      <GradientStop Offset="0" Color="#FF000000"/>
      <GradientStop Offset="1" Color="#00000000"/>
  </RadialGradientBrush.GradientStops>
</RadialGradientBrush>
</Canvas.OpacityMask>

Utilizzo di un'immagine come maschera di opacità

È anche possibile utilizzare le immagini come maschere di opacità. Di seguito è riportato un esempio. Per visualizzare le parti trasparenti della maschera viene utilizzato uno sfondo a scacchi.

Esempio di maschera di opacità

Per utilizzare un'immagine come maschera di opacità, utilizzare un oggetto ImageBrush che contenga l'immagine. Quando si crea un'immagine da utilizzare come maschera di opacità, salvarla in un formato che supporti più livelli di trasparenza, ad esempio Portable Network Graphics (PNG). Nell'esempio riportato di seguito viene illustrato il codice utilizzato per creare la precedente illustrazione.

<!-- With the Opacity Mask-->
<Image
  Height="150"
  Width="200"
  Source="sampleImages/Waterlilies.jpg"
  HorizontalAlignment="Left"
  Margin="10"
  Grid.Column="2" Grid.Row="1">
  <Image.OpacityMask>
    <ImageBrush ImageSource="sampleImages/tornedges.png"/>
  </Image.OpacityMask>
</Image>

Utilizzo di un'immagine affiancata come maschera di opacità

Nell'esempio riportato di seguito, viene utilizzata la stessa immagine con un altro oggetto ImageBrush, ma le funzionalità di visualizzazione affiancata consentono di produrre tessere dell'immagine di 50 x 50 pixel.

<!-- With the Opacity Mask -->
<Image
  Height="150"
  Width="200"
  Source="sampleImages/Waterlilies.jpg"
  HorizontalAlignment="Left"
  Margin="10"
  Grid.Column="2" Grid.Row="2">

  <Image.OpacityMask>
    <ImageBrush
      Viewport="0,0,50,50"
      ViewportUnits="Absolute"
      TileMode="Tile" 
      ImageSource="sampleImages/tornedges.png"/>
  </Image.OpacityMask>
</Image>

Creazione di una maschera di opacità da un disegno

È possibile utilizzare i disegni per creare maschere di opacità. Le forme contenute nel disegno possono essere riempite con sfumature, tinte unite, immagini o anche gli altri disegni. Di seguito viene illustrato un esempio di disegno utilizzato come maschera di opacità. Per visualizzare le parti trasparenti della maschera viene utilizzato uno sfondo a scacchi.

Esempio di maschera di opacità DrawingBrush

Per utilizzare un disegno come maschera di opacità, utilizzare un oggetto DrawingBrush che contenga il disegno. Nell'esempio riportato di seguito viene illustrato il codice utilizzato per creare la precedente illustrazione:

<!-- With the Opacity Mask-->
<Image 
      Grid.Row="4" Grid.Column="5"
      Height="150"
      Width="200"
      Source="sampleImages/Waterlilies.jpg">
  <Image.OpacityMask>
    <DrawingBrush>
      <DrawingBrush.Drawing>
        <GeometryDrawing>
          <GeometryDrawing.Brush>
            <RadialGradientBrush>
              <RadialGradientBrush.GradientStops>
                <GradientStop Offset="0" Color="Black" />
                <GradientStop Offset="1" Color="Transparent" />
              </RadialGradientBrush.GradientStops>
            </RadialGradientBrush>
          </GeometryDrawing.Brush>
          <GeometryDrawing.Geometry>
            <RectangleGeometry Rect="0.05,0.05 0.9,0.9" />
          </GeometryDrawing.Geometry>
          <GeometryDrawing.Pen>
            <Pen Thickness="0.1" Brush="Black" />
          </GeometryDrawing.Pen>
        </GeometryDrawing>
      </DrawingBrush.Drawing>
    </DrawingBrush>
  </Image.OpacityMask>
</Image>

Utilizzo di un disegno affiancato come maschera di opacità

Analogamente all'oggetto ImageBrush, è possibile utilizzare DrawingBrush per affiancare il relativo disegno. Nell'esempio riportato di seguito viene utilizzato un pennello da disegno per creare una maschera di opacità affiancata.

<!-- With the Opacity Mask-->
<Button
   Grid.Row="8" Grid.Column="5"
  Height="100"
  Width="200"
  FontFamily="MS Gothic"
  FontSize="16">
  A Button
  <Button.OpacityMask>
    <DrawingBrush Viewport="0,0,0.25,0.25" TileMode="Tile">
      <DrawingBrush.Drawing>
        <GeometryDrawing>
          <GeometryDrawing.Brush>
            <RadialGradientBrush>
              <RadialGradientBrush.GradientStops>
                <GradientStop Offset="0" Color="Black" />
                <GradientStop Offset="1" Color="Transparent" />
              </RadialGradientBrush.GradientStops>
            </RadialGradientBrush>
          </GeometryDrawing.Brush>
          <GeometryDrawing.Geometry>
            <RectangleGeometry Rect="0.05,0.05 0.9,0.9" />
          </GeometryDrawing.Geometry>
          <GeometryDrawing.Pen>
            <Pen Thickness="0.1" Brush="Black" />
          </GeometryDrawing.Pen>
        </GeometryDrawing>
      </DrawingBrush.Drawing>
    </DrawingBrush>
  </Button.OpacityMask>
</Button>

Vedere anche

Concetti

Disegnare con oggetti Image, Drawing e Visual

Cenni sul disegno con colori a tinta unita e sfumature