Freigeben über

Übersicht über Durchlässigkeitsmasken

  • Artikel

Aktualisiert: November 2007

Mit Durchlässigkeitsmasken können Sie Teile eines Elements oder visuellen Objekts transparent bzw. teilweise transparent machen. Um eine Durchlässigkeitsmaske zu erstellen, wenden Sie einen Brush auf die OpacityMask-Eigenschaft eines Elements oder Visual an. Der Pinsel wird dem Element oder visuellen Objekt zugeordnet, und mit dem Durchlässigkeitswert jedes Pinselpixels wird die verbleibende Durchlässigkeit jedes entsprechenden Pixels des Elements oder visuellen Objekts bestimmt.

Dieses Thema enthält folgende Abschnitte.

  • Vorbereitungsmaßnahmen

  • Erstellen von visuellen Effekten mit Durchlässigkeitsmasken

  • Erstellen einer Durchlässigkeitsmaske

  • Verwenden eines Farbverlaufs als Durchlässigkeitsmaske

  • Angeben von Farbverlaufsunterbrechungspunkten für eine Durchlässigkeitsmaske

  • Verwenden eines Bilds als Durchlässigkeitsmaske

  • Erstellen einer Durchlässigkeitsmaske aus einer Zeichnung

  • Verwandte Themen

Vorbereitungsmaßnahmen

In dieser Übersicht wird davon ausgegangen, dass Sie mit Brush-Objekten vertraut sind. Eine Einführung in die Verwendung von Pinseln finden Sie unter Übersicht über das Zeichnen mit Volltonfarben und Farbverläufen. Weitere Informationen über ImageBrush und DrawingBrush finden Sie unter Zeichnen mit Bildern, Zeichnungen und visuellen Elementen.

Erstellen von visuellen Effekten mit Durchlässigkeitsmasken

Eine Durchlässigkeitsmaske funktioniert so, dass ihre Inhalte dem Element oder visuellen Objekt zugeordnet werden. Mit dem Alphakanal von jedem Pinselpixel wird dann die verbleibende Durchlässigkeit der entsprechenden Pixel des Elements oder visuellen Objekts bestimmt. Die tatsächliche Pinselfarbe wird ignoriert. Wenn ein bestimmter Teil des Pinsels transparent ist, wird der entsprechende Teil des Elements oder visuellen Objekts transparent. Wenn ein bestimmter Teil des Pinsels nicht transparent ist, bleibt die Durchlässigkeit des entsprechenden Teils des Elements oder visuellen Objekts unverändert. Die von der Durchlässigkeitsmaske angegebene Durchlässigkeit wird mit allen Durchlässigkeitseinstellungen im Element oder visuellen Objekt kombiniert. Wenn z. B ein Element zu 25 Prozent deckend ist und eine Durchlässigkeitsmaske angewendet wird, die von vollständig deckend in vollständig transparent übergeht, ist das Ergebnis ein Element, das von 25 Prozent Durchlässigkeit in vollständige Transparenz übergeht.

Tipp

Obwohl mit den Beispielen in dieser Übersicht die Verwendung von Durchlässigkeitsmasken für Bildelemente gezeigt wird, kann eine Durchlässigkeitsmaske auf jedes Element oder Visual, einschließlich Panels und Steuerelementen, angewendet werden.

Mit Durchlässigkeitsmasken lassen sich interessante visuelle Effekte erstellen. Zum Beispiel können Sie Bilder oder Schaltflächen erstellen, die ausgeblendet werden, Elementen Texturen hinzufügen oder Farbverläufe kombinieren, um glasähnliche Oberflächen zu erzeugen. In der folgenden Abbildung wird die Verwendung einer Durchlässigkeitsmaske veranschaulicht. Mit einem Hintergrund im Schachbrettmuster werden die transparenten Teile der Maske angezeigt.

Beispiel für eine Durchlässigkeitsmaske

Objekt mit einer LinearGradientBrush-Deckkraftmaske

Erstellen einer Durchlässigkeitsmaske

Um eine Durchlässigkeitsmaske zu erstellen, erstellen Sie einen Brush und wenden ihn auf die OpacityMask-Eigenschaft eines Elements oder visuellen Elements an. Sie können jeden Typ von Brush als Durchlässigkeitsmaske verwenden.

  • LinearGradientBrush, RadialGradientBrush: Werden verwendet, um ein Element oder visuelles Element auszublenden.

    Im folgenden Bild wird ein als Durchlässigkeitsmaske verwendeter LinearGradientBrush gezeigt.

    Beispiel für eine Durchlässigkeitsmaske mit LinearGradientBrush

    Ein Objekt mit einer LinearGradiantBrush-Deckkraftmaske

  • ImageBrush: Wird verwendet, um Textureffekte und weiche oder ausgefranste Randeffekte zu erstellen.

    Im folgenden Bild wird ein als Durchlässigkeitsmaske verwendeter ImageBrush gezeigt.

    Beispiel für eine Durchlässigkeitsmaske mit LinearGradientBrush

    Ein Objekt mit einer ImageBrush-Deckkraftmaske

  • DrawingBrush: Wird verwendet, um komplexe Durchlässigkeitsmasken aus Mustern von Formen, Bildern und Farbverläufen zu erstellen.

    Im folgenden Bild wird ein als Durchlässigkeitsmaske verwendeter DrawingBrush gezeigt.

    Beispiel für eine Durchlässigkeitsmaske mit DrawingBrush

    Ein Objekt mit einer DrawingBrush-Deckkraftmaske

Die Farbverlaufspinsel (LinearGradientBrush und RadialGradientBrush) sind für die Verwendung als Durchlässigkeitsmaske besonders gut geeignet. Da ein SolidColorBrush einen Bereich mit einer einheitlichen Farbe füllt, werden damit keine optimalen Durchlässigkeitsmasken erzeugt. Wenn ein SolidColorBrush verwendet wird, entspricht dies dem Festlegen der OpacityMask-Eigenschaft des Elements oder visuellen Elements.

Verwenden eines Farbverlaufs als Durchlässigkeitsmaske

Um eine graduelle Füllung zu erstellen, werden zwei oder mehr Farbverlaufsunterbrechungspunkte angegeben. Jeder Farbverlaufsunterbrechungspunkt beschreibt eine Farbe und eine Position (weitere Informationen über das Erstellen und Verwenden von Farbverläufen finden Sie unter Übersicht über das Zeichnen mit Volltonfarben und Farbverläufen). Es handelt sich um den gleichen Vorgang wie bei der Verwendung eines Farbverlaufs als Durchlässigkeitsmaske. Nur werden durch den Farbverlauf der Durchlässigkeitsmaske nicht Farben gemischt, sondern Alphakanalwerte. Daher spielt die tatsächliche Farbe der Farbverlaufsinhalte keine Rolle. Nur der Alphakanal bzw. die Durchlässigkeit jeder Farbe ist relevant. Im Folgenden finden Sie ein Beispiel.

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

Angeben von Farbverlaufsunterbrechungspunkten für eine Durchlässigkeitsmaske

Im vorhergehenden Beispiel wird die systemdefinierte Farbe Black als Startfarbe des Farbverlaufs verwendet. Da alle Farben in der Colors-Klasse, mit Ausnahme von Transparent, vollständig deckend sind, kann mit ihnen einfach eine Startfarbe für eine Durchlässigkeitsmaske mit einem Farbverlauf definiert werden.

Zur zusätzlichen Kontrolle über Alphawerte beim Definieren einer Durchlässigkeitsmaske können Sie den Alphakanal von Farben mit der ARGB-Hexadezimalschreibweise in Markup oder mit der Color.FromScRgb-Methode angeben.

Angeben der Deckkraft einer Farbe in "XAML"

In Extensible Application Markup Language (XAML) wird die ARGB-Hexadezimalschreibweise verwendet, um die Deckkraft einzelner Farben anzugeben. Bei der ARGB-Hexadezimalschreibweise wird die folgende Syntax verwendet:

#aarrggbb

In der vorangehenden Zeile steht aa für einen zweistelligen Hexadezimalwert, der verwendet wird, um die Deckkraft der Farbe anzugeben. rr, gg und bb stehen jeweils für einen zweistelligen Hexadezimalwert, mit dem die Anteile von Rot, Grün und Blau in einer Farbe angegeben werden. Jede Hexadezimalziffer kann einen Wert von 0-9 oder A-F haben. 0 (null) ist der kleinste Wert, und F ist der größte. Der Alphawert 00 gibt eine Farbe an, die vollständig transparent ist, während ein Alphawert  FF eine vollständig deckende Farbe erzeugt. Im folgenden Beispiel wird die ARGB-Hexadezimalschreibweise verwendet, um zwei Farben anzugeben. Die erste Farbe ist vollständig deckend, während die zweite vollkommen transparent ist.

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

Verwenden eines Bilds als Durchlässigkeitsmaske

Auch Bilder können als Durchlässigkeitsmaske verwendet werden. Im folgenden Bild wird ein Beispiel dargestellt. Mit einem Hintergrund im Schachbrettmuster werden die transparenten Teile der Maske angezeigt.

Beispiel für eine Durchlässigkeitsmaske

Ein Objekt mit einer ImageBrush-Deckkraftmaske

Um ein Bild als Durchlässigkeitsmaske zu verwenden, verwenden Sie einen ImageBrush, der das Bild enthalten soll. Wenn Sie ein Bild erstellen, das als Durchlässigkeitsmaske dienen soll, speichern Sie das Bild in einem Format, das mehrere Transparenzgrade unterstützt, z. B. Portable Network Graphics (PNG). Das folgende Beispiel enthält den Code, mit dem die vorherige Abbildung erstellt wurde.

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

Verwenden eines gekachelten Bilds als Durchlässigkeitsmaske

Im folgenden Beispiel wird dasselbe Bild mit einem anderen ImageBrush verwendet, aber mit den Unterteilungsfeatures des Pinsels werden Bildkacheln als Quadrat mit 500 Pixeln Größe erzeugt.

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

Erstellen einer Durchlässigkeitsmaske aus einer Zeichnung

Zeichnungen können als Durchlässigkeitsmaske verwendet werden. Die Formen innerhalb der Zeichnung können selbst mit Farbverläufen, Volltonfarben, Bildern und sogar anderen Zeichnungen gefüllt werden. Im folgenden Bild wird ein Beispiel einer Zeichnung gezeigt, die als Durchlässigkeitsmaske verwendet wird. Mit einem Hintergrund im Schachbrettmuster werden die transparenten Teile der Maske angezeigt.

Beispiel für eine Durchlässigkeitsmaske mit DrawingBrush

Ein Objekt mit einer DrawingBrush-Deckkraftmaske

Um eine Zeichnung als Durchlässigkeitsmaske zu verwenden, verwenden Sie einen DrawingBrush, der die Zeichnung enthalten soll. Das folgende Beispiel enthält den Code, mit dem die vorherige Abbildung erstellt wurde:

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

Verwenden einer gekachelten Zeichnung als Durchlässigkeitsmaske

Wie der ImageBrush kann auch der DrawingBrush so eingesetzt werden, dass die Zeichnung gekachelt angezeigt wird. Im folgenden Beispiel wird mit einem Zeichenpinsel eine gekachelte Durchlässigkeitsmaske erstellt.

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

Siehe auch

Konzepte

Zeichnen mit Bildern, Zeichnungen und visuellen Elementen

Übersicht über das Zeichnen mit Volltonfarben und Farbverläufen