Visão geral das máscaras de opacidade

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

Pré-requisitos

Essa visão geral pressupõe que você esteja familiarizado com Brush objetos. Para obter uma introdução ao uso de pincéis, consulte Pintura com Cores Sólidas e Visão Geral de Gradientes. Para obter 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 mapeando seu conteúdo para o elemento ou visual. O canal alfa de cada um dos pixels do pincel é então usado para determinar a opacidade resultante dos pixels correspondentes do elemento ou do visual; a cor real do pincel é ignorada. Se uma determinada parte do pincel for transparente, a parte correspondente do elemento ou do visual se tornará transparente. Se uma determinada parte do pincel for opaca, a opacidade da parte correspondente do elemento ou do visual ficará inalterada. A opacidade especificada pela máscara de opacidade é combinada com as configurações de opacidade presentes no elemento ou na imagem. Por exemplo, se um elemento for 25% opaco e uma máscara de opacidade for aplicada que faz a transição de totalmente opaca para totalmente transparente, o resultado será um elemento que passa de 25% de opacidade para totalmente transparente.

Máscaras de opacidade são usadas para criar efeitos visuais interessantes, como criar imagens ou botões que desaparecem da exibição, para adicionar texturas aos elementos ou para combinar gradientes para produzir superfícies semelhantes a 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 máscara de opacidade

Criando uma máscara de opacidade

Para criar uma máscara de opacidade, crie uma Brush e aplique-a à OpacityMask propriedade de um elemento ou visual. Você pode usar qualquer tipo de máscara de opacidade Brush.

• LinearGradientBrush, RadialGradientBrush: usado para fazer com que um elemento ou visual desapareça da tela.

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

  
  Exemplo de Máscara de Opacidade com LinearGradientBrush

• ImageBrush: usado para criar textura e efeitos de borda macios ou rasgados.

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

  
  Exemplo de mascaramento de opacidade com LinearGradientBrush

• DrawingBrush: usado para criar máscaras de opacidade complexas a partir 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 de opacidade do DrawingBrush

Os pincéis de gradiente (LinearGradientBrush e RadialGradientBrush) são particularmente adequados para uso como uma máscara de opacidade. Como um SolidColorBrush preenche uma área com uma cor uniforme, elas fazem máscaras de opacidade ruins; usar uma SolidColorBrush é equivalente a definir a propriedade Opacity do elemento ou do visual.

Usando um gradiente como uma máscara de opacidade

Para criar um preenchimento de gradiente, especifique dois ou mais pontos de gradiente. Cada parada de gradiente contém uma cor e uma posição (consulte Pintura com Cores Sólidas e Visão Geral de Gradientes para obter mais informações sobre como criar e usar gradientes). O processo é o mesmo ao usar um gradiente como uma máscara de opacidade, exceto que, em vez de misturar cores, o gradiente da máscara de opacidade combina valores de canal alfa. Portanto, a cor real do conteúdo do gradiente não importa; apenas o canal alfa, ou opacidade, de cada cor importa. Apresentamos um exemplo a seguir.

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

Especificando pontos de gradiente para uma máscara de transparência

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

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

Especificando opacidade de cor em "XAML"

Em XAML (Extensible Application Markup Language), você utiliza a notação hexadecimal ARGB para definir a transparência de cada cor individual. A notação hexadecimal ARGB usa a seguinte sintaxe:

# aarrggbb

O aa na linha anterior representa um valor hexadecimal de dois dígitos usado para especificar a opacidade da cor. O rr, gg e bb representam cada um um valor hexadecimal de dois dígitos usado para especificar a quantidade de vermelho, verde e azul na cor. Cada dígito hexadecimal pode ter um valor de 0-9 ou A-F. 0 é o menor valor, e F é o maior. Um valor alfa de 00 especifica uma cor completamente transparente, enquanto um valor alfa de FF cria uma cor totalmente opaca. No exemplo a seguir, a notação ARGB hexadecimal é usada para especificar duas cores. O primeiro é totalmente opaco, enquanto o segundo é completamente transparente.

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

Usando uma imagem como uma máscara de opacidade

As imagens também podem ser usadas como uma 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 máscara de opacidade

Para usar uma imagem como uma máscara de opacidade, use um ImageBrush para conter a imagem. Ao criar uma imagem a ser usada como uma máscara de opacidade, salve a imagem em um formato que dê suporte a vários níveis de transparência, como PNG (Portable Network Graphics). 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>

Usando uma imagem em blocos como uma máscara de opacidade

No exemplo a seguir, a mesma imagem é usada com outra ImageBrush, mas os recursos de mosaico do pincel são usados para produzir azulejos da imagem de 50 pixels quadrados.

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

Criando uma máscara de opacidade de um desenho

Os desenhos podem ser usados como uma máscara de opacidade. As formas contidas no desenho podem ser preenchidas com gradientes, cores sólidas, imagens ou até mesmo outros desenhos. A imagem a seguir 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 de opacidade do 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>

Usando um desenho em azulejos como uma máscara de opacidade

Como o ImageBrush, o DrawingBrush pode ser configurado para azulejar seu desenho. No exemplo a seguir, um pincel de desenho é usado para criar uma máscara de opacidade em mosaico.

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

• Pintura com Imagens, Desenhos e Elementos Visuais
• Visão Geral da Pintura com Cores Sólidas e Gradientes