Vue d’ensemble des masques d’opacité

Les masques d’opacité vous permettent de faire des parties d’un élément ou d’un visuel transparent ou partiellement transparent. Pour créer un masque d’opacité, vous appliquez une Brush à la OpacityMask propriété d’un élément ou Visual. Le pinceau est mappé à l’élément ou au 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 du visuel.

Conditions préalables

Cette vue d’ensemble suppose que vous êtes familiarisé avec Brush les objets. Pour une présentation de l’utilisation des pinceaux, consultez Vue d’ensemble de la peinture avec des couleurs solides et des dégradés. Pour des informations sur ImageBrush et DrawingBrush, consultez Peinture avec des images, des dessins et des visuels.

Création d’effets visuels avec des masques d’opacité

Un masque d’opacité fonctionne en mappant son contenu à l’élément ou au visuel. Le canal alpha de chacun des pixels du pinceau est ensuite utilisé pour déterminer l’opacité résultante des pixels correspondants de l’élément ou 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 du visuel devient transparente. Si une partie donnée du pinceau est opaque, l’opacité de la partie correspondante de l’élément ou du visuel n’est pas modifiée. L’opacité spécifiée par le masque d’opacité est combinée à tous les paramètres d’opacité présents dans l’élément ou le visuel. Par exemple, si un élément est opaque de 25 % et qu’un masque d’opacité est appliqué qui passe de l’opacité totale à la transparence totale, le résultat est un élément qui passe de 25 % d’opacité à une transparence totale.

Remarque

Bien que les exemples de cette vue d’ensemble illustrent l’utilisation de masques d’opacité sur les éléments d’image, un masque d’opacité peut être appliqué à n’importe quel élément ou Visual, y compris les panneaux et les contrôles.

Les masques d’opacité sont utilisés pour créer des effets visuels intéressants, tels que pour créer des images ou des boutons qui s’évanouissent de la vue, pour ajouter des textures à des éléments ou pour combiner des dégradés pour produire des surfaces de type verre. L’illustration suivante illustre l’utilisation d’un masque d’opacité. Un arrière-plan en damier est utilisé pour afficher les parties transparentes du masque.

Exemple de masquage d’opacité

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 d’un visuel. Vous pouvez utiliser n’importe quel type de Brush masque d’opacité.

• LinearGradientBrush, RadialGradientBrush : Utilisé pour faire disparaître progressivement un élément ou un visuel.

  L’image suivante montre un LinearGradientBrush masque d’opacité utilisé.

  
  Exemple de Masquage d'Opacité avec LinearGradientBrush

• ImageBrush: utilisé pour créer des effets de texture et de bords doux ou déchirés.

  L’image suivante montre un ImageBrush masque d’opacité utilisé.

  
  Exemple de masquage d’opacité avec pinceau de dégradé linéaire

• DrawingBrush: permet de créer des masques d’opacité complexes à partir de modèles de formes, d’images et de dégradés.

  L’image suivante montre un DrawingBrush masque d’opacité utilisé.

  
  Exemple de masquage d’opacité avec DrawingBrush

Les pinceaux dégradés (LinearGradientBrush et RadialGradientBrush) sont particulièrement adaptés à une utilisation comme masque d’opacité. Étant donné qu'un SolidColorBrush remplit une zone avec une couleur uniforme, ils ne sont pas idéaux pour les masques d'opacité ; utiliser un SolidColorBrush équivaut à définir la propriété Opacity de l'élément ou du visuel.

Utilisation d’un dégradé comme masque d’opacité

Pour créer un remplissage dégradé, vous spécifiez deux ou plusieurs arrêts de dégradé. Chaque point de dégradé contient et décrit une couleur et une position (voir Peindre avec des couleurs unies et Aperçu des dégradés pour plus d'informations sur la création et l'utilisation de dégradés). Le processus est le même lors de l’utilisation d’un dégradé comme masque d’opacité, sauf que, au lieu de fusionner des couleurs, le dégradé de masque d’opacité fusionne les valeurs de canal alpha. Ainsi, la couleur réelle du contenu du dégradé n’a pas d’importance ; seul le canal alpha, ou l’opacité, de chaque couleur importe. 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>

Définition des points de gradient 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 de départ du dégradé. Étant donné que toutes les couleurs de la Colors classe, sauf Transparent, sont entièrement opaques, elles peuvent être utilisées pour définir simplement une couleur de départ pour un masque d’opacité dégradé.

Pour un contrôle supplémentaire sur les valeurs alpha lors de la définition d’un masque d’opacité, vous pouvez spécifier le canal alpha des couleurs à l’aide de la notation hexadécimale ARGB dans le balisage ou à l’aide de la Color.FromScRgb méthode.

Spécification de l’opacité des couleurs dans « XAML »

Dans XAML (Extensible Application Markup Language), vous utilisez la notation hexadécimale ARGB pour spécifier l’opacité des couleurs individuelles. La notation hexadécimale ARGB utilise la syntaxe suivante :

# aarrggbb

L’aa de la ligne précédente représente une valeur hexadécimale à deux chiffres utilisée pour spécifier l’opacité de la couleur. Les valeurs rr, gg et bb représentent chacune une valeur hexadécimale à deux chiffres utilisée pour spécifier la quantité de rouge, de vert et de bleu dans la couleur. Chaque chiffre hexadécimal peut avoir une valeur comprise entre 0 et 9 ou A-F. 0 est la plus petite valeur, et F est le plus grand. Une valeur alpha de 00 spécifie une couleur entièrement transparente, tandis qu’une valeur alpha de FF crée une couleur entièrement opaque. Dans l’exemple suivant, la notation ARVB hexadécimale est utilisée pour spécifier deux couleurs. La première est entièrement opaque, tandis que la seconde est complètement 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 masque d’opacité

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

Exemple de masquage d’opacité

Pour utiliser une image comme masque d’opacité, utilisez un ImageBrush pour contenir l’image. Lors de la création d’une image à utiliser comme masque d’opacité, enregistrez l’image dans un format prenant en charge plusieurs niveaux de transparence, tels que Portable Network Graphics (PNG). L’exemple suivant montre 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 masque d’opacité

Dans l’exemple suivant, la même image est utilisée avec un autre ImageBrush, mais les caractéristiques de mosaïque du pinceau sont utilisées pour produire des carreaux de l'image mesurant 50 pixels de côté.

<!-- 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 elles-mêmes être remplies de dégradés, de couleurs unie, d’images ou même d’autres dessins. L’image suivante montre un exemple de dessin utilisé comme masque d’opacité. Un arrière-plan en damier est utilisé pour afficher les parties transparentes du masque.

Exemple de masquage d’opacité avec DrawingBrush

Pour utiliser un dessin comme masque d’opacité, utilisez un DrawingBrush pour contenir le dessin. L’exemple suivant montre 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 masque d’opacité

Comme le ImageBrush, le DrawingBrush peut être configuré pour mosaïquer son motif. 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

• peinture avec des images, des dessins et des visuels
• Vue d’ensemble de la peinture avec des couleurs unies ou des dégradés