Visão Geral sobre Máscaras de Opacidade

Máscaras de opacidade permitem que você torne partes de um elemento ou visual transparente ou parcialmente transparente. Para criar uma máscara de opacidade, você aplica um Brush a propriedade OpacityMask de um elemento ou Visual. O pincel é mapeado no elemento ou visual, e o valor da opacidade de cada pixel do pincel é usado para determinar a opacidade resultante de cada pixel correspondente do elemento ou visual.

Este tópico contém as seguintes seções.

• Pré-requisitos

• Criando efeitos visuais com máscaras de opacidade

• Criar uma máscara de opacidade

• Usar um gradiente como uma máscara de opacidade

• Especificar paradas de gradiente para uma máscara de opacidade

• Usar uma imagem como uma máscara de opacidade

• Criar uma máscara de opacidade a partir de um Drawing

• Tópicos relacionados

Pré-requisitos

Esta visão geral assume que você está familiarizados com objetos Brush. Para obter uma introdução ao uso de pincéis, consulte Painting with Solid Colors and Gradients Overview. Para obter mais informações sobre ImageBrush e DrawingBrush, consulte Pintura com Imagens, Desenhos e Visuais.

Criando efeitos visuais com máscaras de opacidade

Uma máscara de opacidade funciona pelo mapeamento de seu conteúdo no elemento ou visual. O canal alfa de cada um dos pixels do pincel, em seguida, é usado para determinar a opacidade resultante dos pixels correspondentes do elemento ou visual; a cor real do pincel será ignorada. Se uma determinada parte do pincel é transparente, a parte correspondente do elemento ou visual se tornará transparente. Se uma determinada parte do pincel for opaca, a opacidade da parte correspondente do elemento ou visual permanece inalterada. A opacidade especificada pela máscara de opacidade é combinada com qualquer configuração de opacidade presente no elemento ou visual. Por exemplo, se um elemento é 25 por cento opaco e uma máscara de opacidade é aplicada que faz a transição do completamente opaco para totalmente transparente, o resultado é um elemento que faz a transição de 25 por cento de opacidade para totalmente transparente.

Observação:
Embora os exemplos nesta visão geral demonstram o uso de máscaras de opacidade em elementos de imagem, uma máscara de opacidade pode ser aplicada a qualquer elemento ou Visual, incluindo os painéis e os controles.

Máscaras de opacidade são usadas para criar efeitos visuais interessantes, como para criar imagens ou botões que somem esmaecendo, para adicionar texturas a elementos ou para combinar gradientes para produzir superfícies tipo vidro. A ilustração a seguir demonstra o uso de uma máscara de opacidade. Um plano de fundo quadriculado é usado para mostrar as partes transparentes da máscara.

Exemplo de mascaramento por opacidade

Criar uma máscara de opacidade

Para criar uma máscara de opacidade, você cria um Brush e aplicá-lo a propriedade OpacityMask de um elemento ou visual. Você pode usar qualquer tipo de Brush como uma máscara de opacidade.

• LinearGradientBrush, RadialGradientBrush: usados para esmaecer um elemento ou visual.

  A imagem a seguir mostra um LinearGradientBrush usado como uma máscara de opacidade.

  Exemplo de máscara de opacidade usando LinearGradientBrush

  

• ImageBrush: Usado para criar textura e efeitos de borda suave ou rasgada.

  A imagem a seguir mostra um ImageBrush usado como uma máscara de opacidade.

  Exemplo de máscara de opacidade usando LinearGradientBrush

  

• DrawingBrush: Usado para criar máscaras de opacidade complexas de padrões de formas, imagens e gradientes.

  A imagem a seguir mostra um DrawingBrush usado como uma máscara de opacidade.

  Exemplo de mascaramento por opacidade com DrawingBrush

  

Os pincéis de gradiente (LinearGradientBrush e RadialGradientBrush) são especialmente adequados para uso como uma máscara de opacidade. Como um SolidColorBrush preenche uma área com uma cor uniforme, eles são máscaras de opacidade ruins; usar um SolidColorBrush equivale à configurar a propriedade OpacityMask do elemento ou visual.

Usar um gradiente como uma máscara de opacidade

Para criar um preenchimento gradual, você especifica duas ou mais paradas de gradiente. Cada parada de gradiente descreve uma cor e uma posição (consulte Painting with Solid Colors and Gradients Overview para obter mais informações sobre como criar e usar gradientes). O processo é o mesmo ao usar um dégradé/gradiente como uma máscara de opacidade, exceto que, em vez de mistura as cores, o gradiente da máscara de opacidade mistura os valores do canal alfa. Portanto, não importa a cor real do conteúdo do gradiente; apenas o canal alfa, ou opacidade, de cada cor é importante. The following is an example.

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

Especificar paradas de gradiente para uma máscara de opacidade

No exemplo anterior, a cor Black definida pelo sistema é utilizada como a cor inicial do gradiente. Como todas as cores da classe Colors, exceto Transparent, são totalmente opacas, elas podem ser usadas para definir de forma simples uma cor inicial para um máscara de opacidade com gradiente.

Para controle adicional sobre os valores do canal alfa ao definir uma máscara de opacidade, você pode especificar o canal alfa das cores usando notação hexadecimal ARGB em marcação ou o método Color.FromScRgb.

Specifying Color Opacity in "XAML"

In Extensible Application Markup Language (XAML), você usa ARGB notação hexadecimal para especificar a opacidade de cores individuais. ARGB notação hexadecimal usa a seguinte sintaxe:

#aarrggbb

The aa in the previous line represents a two-digit hexadecimal value used to specify the opacity of the color. The rr, gg, and bb each represent a two digit hexadecimal value used to specify the amount of red, green, and blue in the color. Cada dígito hexadecimal pode ter um valor de 0-9 ou a f. 0 é o menor valor e F é o maior. An alpha value of 00 specifies a color that is completely transparent, while an alpha value of FF creates a color that is fully opaque. In the following example, hexadecimal ARGB notation is used to specify two colors. A primeira é totalmente opaca, enquanto a segunda é completamente transparente.

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

Usar uma imagem como uma máscara de opacidade

Imagens também podem ser usadas como máscara de opacidade. A imagem a seguir mostra um exemplo: Um plano de fundo quadriculado é usado para mostrar as partes transparentes da máscara.

Exemplo de mascaramento por opacidade

Para usar uma imagem como uma máscara de opacidade, use um ImageBrush para conter a imagem. Ao criar uma imagem a ser usado como uma máscara de opacidade, salve a imagem em um formato que oferece suporte a vários níveis de transparência, como Portable Network Graphics (PNG). O exemplo a seguir mostra o código usado para criar a ilustração anterior.

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

Usar uma imagem lado-a-lado como uma máscara de opacidade

No exemplo a seguir, a mesma imagem é usada com outro ImageBrush, mas o recurso de posicionamento lado a lado do pincel é usado para produzir azulejos/blocos do quadrado de 50 pixels da imagem.

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

Criar uma máscara de opacidade a partir de um Drawing

Drawings podem ser usados como uma máscara de opacidade. As formas contidas dentro do desenho podem ser preenchidas com gradientes, cores sólidas, imagens ou até mesmo outros desenhos. A imagem abaixo mostra um exemplo de um desenho usado como uma máscara de opacidade. Um plano de fundo quadriculado é usado para mostrar as partes transparentes da máscara.

Exemplo de mascaramento por opacidade com DrawingBrush

Para usar um desenho como uma máscara de opacidade, use um DrawingBrush para conter o desenho. O exemplo a seguir mostra o código usado para criar a ilustração anterior.

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

Usar um desenho lado-a-lado como uma máscara de opacidade

Como o ImageBrush, o DrawingBrush pode posicionar lado a lado o seu desenho. No exemplo a seguir, um pincel de desenho é usado para criar uma máscara de opacidade lado a lado.

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

Consulte também

Conceitos

Pintura com Imagens, Desenhos e Visuais

Painting with Solid Colors and Gradients Overview