Vue d'ensemble des masques d'opacité

Article
08/22/2008

Mise à jour : novembre 2007

Les masques d'opacité vous permettent de rendre transparentes ou partiellement transparentes des parties d'un élément ou d'un visuel. Pour créer un masque d'opacité, vous appliquez un Brush à la propriété OpacityMask d'un élément ou Visual. Le pinceau est mappé à l'élément ou visuel, et la valeur d'opacité de chaque pixel de pinceau est utilisée pour déterminer l'opacité résultante de chaque pixel correspondant de l'élément ou visuel.

Cette rubrique contient les sections suivantes.

Composants requis
Création d'effets visuels avec les masques d'opacité
Création d'un masque d'opacité
Utilisation d'un gradient comme un masque d'opacité
Spécification de points de dégradé pour un masque d'opacité
Utilisation d'une image comme un masque d'opacité
Création d'un masque d'opacité à partir d'un dessin
Rubriques connexes

Composants requis

Cette vue d'ensemble suppose que vous êtes familiarisé avec les objets Brush. Pour une introduction à l'utilisation de pinceaux, consultez Vue d'ensemble de la peinture avec des couleurs unies ou des dégradés. Pour plus d'informations sur ImageBrush et DrawingBrush, consultez Peinture avec des objets d'image, de dessin et visuels.

Création d'effets visuels avec les masques d'opacité

Un masque d'opacité consiste à mapper son contenu à l'élément ou visuel. Le canal alpha de chacun des pixels du pinceau est ensuite utilisé pour déterminer l'opacité résultante de l'élément ou des pixels correspondants du visuel ; la couleur réelle du pinceau est ignorée. Si une partie donnée du pinceau est transparente, la partie correspondante de l'élément ou visuel devient transparente. Si une partie donnée du pinceau est opaque, l'opacité de la partie correspondante de l'élément ou visuel reste inchangée. L'opacité spécifiée par le masque d'opacité est combinée avec tout paramètre d'opacité présent dans l'élément ou visuel. Par exemple, si un élément est 25 pour cent opaque et qu'un masque d'opacité est appliqué et passe de complètement opaque à complètement transparent, le résultat est un élément qui passe de 25 pour cent d'opacité à complètement transparent.

Remarque :
Bien que les exemples dans cette vue d'ensemble montrent l'utilisation de masques d'opacité sur les éléments d'image, un masque d'opacité peut être appliqué à tout élément ou Visual, y compris les volets et contrôles.

Les masques d'opacité sont utilisés pour créer des effets visuels intéressants, comme créer des images ou boutons qui s'effacent à l'affichage, ajouter des textures aux éléments, ou combiner des gradients pour produire des surfaces semblables au verre. L'illustration suivante montre l'utilisation d'un masque d'opacité. Un arrière-plan à carreaux est utilisé pour afficher les parties transparentes du masque.

Exemple de masque d'opacité

Objet avec un masque d'opacité LinearGradientBrush

Création d'un masque d'opacité

Pour créer un masque d'opacité, vous créez un Brush et l'appliquez à la propriété OpacityMask d'un élément ou visuel. Vous pouvez utiliser tout type de Brush comme un masque d'opacité.

LinearGradientBrush, RadialGradientBrush: utilisé pour qu'un élément ou visuel disparaisse de l'affichage.

L'image suivante affiche un LinearGradientBrush utilisé comme un masque d'opacité.

Exemple de masque d'opacité LinearGradientBrush
ImageBrush: utilisé pour créer des effets de texture ou de bord doux ou déchiré.

L'image suivante affiche un ImageBrush utilisé comme un masque d'opacité.

Exemple de masque d'opacité LinearGradientBrush
DrawingBrush: utilisé pour créer des masques d'opacité complexes à partir de modèles des formes, d'images et de gradients.

L'image suivante affiche un DrawingBrush utilisé comme un masque d'opacité.

Exemple de masque d'opacité DrawingBrush

Les pinceaux dégradés (LinearGradientBrush et RadialGradientBrush) sont particulièrement bien assortis pour une utilisation comme masque d'opacité. Du fait qu'un SolidColorBrush remplit une zone d'une couleur uniforme, cela en fait un masque d'opacité médiocre ; l'utilisation d'un SolidColorBrush est équivalent à la définition de la propriété OpacityMask de l'élément ou visuel.

Utilisation d'un gradient comme un masque d'opacité

Pour créer un remplissage dégradé, vous spécifiez deux points de dégradé ou plus. Chaque point de dégradé contient une couleur et une position (consultez Vue d'ensemble de la peinture avec des couleurs unies ou des dégradés pour plus d'informations sur la création et l'utilisation de gradients). Le processus est le même lors de l'utilisation d'un gradient comme un masque d'opacité, mais, au lieu de fusionner des couleurs, le gradient du masque d'opacité fusionne des valeurs de canal alpha. De ce fait, la couleur réelle du contenu du gradient n'importe pas ; seul compte le canal alpha, l'opacité, ou chaque couleur. Voici un exemple :

<!--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>

Spécification de points de dégradé pour un masque d'opacité

Dans l'exemple précédent, la couleur Black définie par le système est utilisée comme couleur initiale du gradient. Du fait que toutes les couleurs dans la classe Colors, sauf Transparent, sont totalement opaques, elles peuvent être utilisées pour définir simplement une couleur initiale pour un masque d'opacité dégradé.

Pour un contrôle supplémentaire des valeurs alpha lorsque vous définissez un masque d'opacité, vous pouvez spécifier le canal alpha des couleurs à l'aide de la ARVBnotation hexadécimale dans la balise ou de la méthode Color.FromScRgb.

Spécification de l'opacité de la couleur en « XAML »

En XAML (Extensible Application Markup Language), vous utilisez la notation hexadécimale ARVB pour spécifier l'opacité de couleurs individuelles. La notation hexadécimale ARVB utilise la syntaxe suivante :

#aarrvvbb

Dans la ligne précédente, aa représente une valeur hexadécimale à deux chiffres utilisée pour spécifier l'opacité de la couleur. rr, vv et bb représentent chacun une valeur hexadécimale à deux chiffres utilisée pour spécifier les quantités de rouge, de vert et de bleu dans la couleur. Chaque chiffre hexadécimal peut avoir une valeur de 0 à 9 ou de A à F. 0 est la plus petite valeur, et F est la plus grande. Une valeur alpha 00 spécifie une couleur qui est totalement transparente, alors qu'une valeur alpha FF crée une couleur qui est totalement opaque. Dans l'exemple suivant, la notation hexadécimale ARVB est utilisée pour spécifier deux couleurs. La première est totalement opaque, alors que la seconde est totalement transparente.

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

Utilisation d'une image comme un masque d'opacité

Les images peuvent également être utilisées comme un masque d'opacité. L'image suivante montre un exemple. Un arrière-plan à carreaux est utilisé pour afficher les parties transparentes du masque.

Exemple de masque d'opacité

Objet avec un masque d'opacité ImageBrush

Pour utiliser une image comme un masque d'opacité, utilisez un ImageBrush pour contenir l'image. Lorsque vous créez une image à utiliser comme un masque d'opacité, enregistrez l'image dans un format qui prend en charge plusieurs niveaux de transparence, tel que PNG (Portable Network Graphics). L'exemple suivant affiche le code utilisé pour créer l'illustration précédente.

<!-- 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>

Utilisation d'une image en mosaïque comme un masque d'opacité

Dans l'exemple suivant, la même image est utilisée avec un autre ImageBrush, mais les fonctionnalités de mosaïque du pinceau sont utilisées pour produire des mosaïques de l'image de 50 pixels carrés.

<!-- 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>

Création d'un masque d'opacité à partir d'un dessin

Les dessins peuvent être utilisés comme masque d'opacité. Les formes contenues dans le dessin peuvent être remplies de dégradés, de couleurs unies, d'images, ou même d'autres dessins. L'image suivante montre un exemple d'un dessin utilisé comme un masque d'opacité. Un arrière-plan à carreaux est utilisé pour afficher les parties transparentes du masque.

Exemple de masque d'opacité DrawingBrush

Objet avec un masque d'opacité DrawingBrush

Pour utiliser un dessin comme un masque d'opacité, utilisez un DrawingBrush pour contenir le dessin. L'exemple suivant affiche le code utilisé pour créer l'illustration précédente :

<!-- 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>

Utilisation d'un dessin en mosaïque comme un masque d'opacité

Comme le ImageBrush, le DrawingBrush peut être fait pour disposer en mosaïque son dessin. Dans l'exemple suivant, un pinceau de dessin est utilisé pour créer un masque d'opacité en mosaïque.

<!-- 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>

Voir aussi

Concepts

Peinture avec des objets d'image, de dessin et visuels

Vue d'ensemble de la peinture avec des couleurs unies ou des dégradés

Partager via