Översikt över ogenomskinlighetsmasker

Med ogenomskinliga masker kan du göra delar av ett element eller visuellt objekt antingen transparenta eller delvis transparenta. För att skapa en opacitetsmask, applicerar du en Brush på egenskapen OpacityMask för ett element eller Visual. Penseln mappas till elementet eller det visuella objektet, och opacitetsvärdet för varje penselpixel används för att fastställa den resulterande opaciteten för varje motsvarande pixel i elementet eller det visuella objektet.

Förutsättningar

Den här översikten förutsätter att du är bekant med Brush objekt. En introduktion till hur du använder penslar finns i Översikt över målning med fasta färger och toningar. Information om ImageBrush och DrawingBrushfinns i Måla med bilder, ritningar och visuella objekt.

Skapa visuella effekter med ogenomskinliga masker

En opacitetsmask fungerar genom att dess innehåll mappas till elementet eller det visuella objektet. Alfakanalen för var och en av penselns bildpunkter används sedan för att fastställa den resulterande opaciteten för elementets eller det visuella objektets motsvarande bildpunkter. penselns faktiska färg ignoreras. Om en viss del av penseln är transparent blir motsvarande del av elementet eller det visuella objektet transparent. Om en viss del av penseln är ogenomskinlig förblir opaciteten för motsvarande del av elementet eller det visuella oförändrad. Den opacitet som anges av opacitetsmasken kombineras med eventuella opacitetsinställningar som finns i elementet eller det visuella objektet. Om ett element till exempel är 25 procent ogenomskinligt och en ogenomskinlig mask används som övergår från helt ogenomskinlig till helt transparent, är resultatet ett element som övergår från 25 procents ogenomskinlighet till helt transparent.

Ogenomskinliga masker används för att skapa intressanta visuella effekter, till exempel för att skapa bilder eller knappar som tonas ut från vyn, för att lägga till texturer i element eller för att kombinera toningar för att producera glasliknande ytor. Följande bild visar användningen av en ogenomskinlig mask. En rutig bakgrund används som visar de transparenta delarna av masken.

Exempel på ogenomskinlighetsmaskering

Skapa en ogenomskinlig mask

Om du vill skapa en opacitetsmask skapar du en Brush och tillämpar den på OpacityMask egenskapen för ett element eller ett visuellt objekt. Du kan använda valfri typ av Brush som en ogenomskinlig mask.

• LinearGradientBrush, RadialGradientBrush: Används för att göra ett element eller ett visuellt objekt tonas bort från vyn.

  Följande bild visar en LinearGradientBrush mask som används som en ogenomskinlig mask.

  
  Exempel på linearGradientBrush-opacitetsmaskering

• ImageBrush: Används för att skapa textur och mjuka eller slitna kanteffekter.

  Följande bild visar en ImageBrush mask som används som en ogenomskinlig mask.

  
  Exempel på linearGradientBrush-opacitetsmaskering

• DrawingBrush: Används för att skapa komplexa opacitetsmasker från mönster av former, bilder och toningar.

  Följande bild visar en DrawingBrush mask som används som en ogenomskinlig mask.

  
  Exempel på opacitetsmaskning med DrawingBrush

Toningspenslar (LinearGradientBrush och RadialGradientBrush) är särskilt väl lämpade för användning som en ogenomskinlig mask. Eftersom ett SolidColorBrush fyller ett område med en enhetlig färg, gör de dåliga ogenomskinliga masker. Användning av en SolidColorBrush motsvarar att ange elementets eller det visuella objektets Opacity egenskap.

Använda en övertoning som en opacitetsmask

Om du vill skapa en toningsfyllning anger du två eller flera toningsstopp. Varje toningsstopp beskriver en färg och en position (se Översikt över målning med solida färger och toningar för mer information om hur du skapar och använder toningar). Processen är densamma när du använder en toningsmask, förutom att, i stället för att blanda färger, blandar toningsmasken värdena i alfakanalen. Så den faktiska färgen på toningens innehåll spelar ingen roll; endast alfakanalen, eller ogenomskinligheten, för varje färg spelar roll. Följande är ett exempel.

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

Ange toningsstopp för en ogenomskinlig mask

I föregående exempel används den systemdefinierade färgen Black som startfärg för toningen. Eftersom alla färger i Colors klassen, förutom Transparent, är helt ogenomskinliga, kan de användas för att helt enkelt definiera en startfärg för en toningsopacitetsmask.

Om du vill ha ytterligare kontroll över alfavärden när du definierar en opacitetsmask kan du ange alfakanalen med färger med argb hexadecimal notation i markering eller med hjälp av Color.FromScRgb metoden.

Ange färgopacitet i "XAML"

I XAML (Extensible Application Markup Language) använder du ARGB hexadecimal notation för att ange ogenomskinlighet för enskilda färger. ARGB hexadecimal notation använder följande syntax:

# aarrggbb

aa på föregående rad representerar ett tvåsiffrigt hexadecimalt värde som används för att ange färgens opacitet. rr, ggoch bb representerar var och en ett tvåsiffrigt hexadecimalt värde som används för att ange mängden rött, grönt och blått i färgen. Varje hexadecimal siffra kan ha ett värde från 0–9 eller A-F. 0 är det minsta värdet och F är störst. Ett alfavärde på 00 anger en färg som är helt transparent, medan ett alfavärde för FF skapar en färg som är helt ogenomskinlig. I följande exempel används hexadecimal ARGB-notation för att ange två färger. Den första är helt ogenomskinlig, medan den andra är helt transparent.

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

Använda en bild som en ogenomskinlig mask

Bilder kan också användas som en ogenomskinlig mask. Följande bild visar ett exempel. En rutig bakgrund används som visar de transparenta delarna av masken.

Exempel på ogenomskinlighetsmaskering

Om du vill använda en bild som en ogenomskinlig mask använder du en ImageBrush för att innehålla bilden. När du skapar en bild som ska användas som en ogenomskinlig mask sparar du bilden i ett format som stöder flera nivåer av transparens, till exempel Portable Network Graphics (PNG). I följande exempel visas den kod som används för att skapa föregående bild.

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

Använda en tilesatt bild som en opacitetsmask

I följande exempel används samma bild med en annan ImageBrush, där används penselns plattsättningsfunktioner för att skapa plattor av bilden som är 50 bildpunkter stora.

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

Skapa en ogenomskinlig mask från en ritning

Ritningar kan användas som en ogenomskinlig mask. Formerna i ritningen kan själva fyllas med toningar, solida färger, bilder eller till och med andra ritningar. Följande bild visar ett exempel på en ritning som används som en ogenomskinlig mask. En rutig bakgrund används som visar de transparenta delarna av masken.

Exempel på opacitetsmaskning med DrawingBrush

Om du vill använda en ritning som en ogenomskinlig mask använder du en DrawingBrush för att innehålla ritningen. I följande exempel visas den kod som används för att skapa föregående bild:

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

Använda en kaklad ritning som en opacitetsmask

Liksom ImageBrush kan DrawingBrush göras för att mönstra sin ritning. I följande exempel används en målarborste för att skapa en mönstrad opacitetsmask.

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

Se även

• målning med bilder, ritningar och visuella objekt
• Målning med enkla färger och övertoningar Översikt