Información general sobre máscaras de opacidad

2025-05-07

Las máscaras de opacidad permiten crear partes de un elemento o un objeto visual transparentes o parcialmente transparentes. Para crear una máscara de opacidad, se aplica una Brush a la propiedad OpacityMask de un elemento o Visual. El pincel se asigna al elemento o objeto visual, y el valor de opacidad de cada píxel del pincel se usa para determinar la opacidad resultante de cada píxel correspondiente del elemento o objeto visual.

Prerrequisitos

En este resumen se da por supuesto que está familiarizado con los objetos Brush. Para obtener una introducción al uso de pinceles, vea Información general sobre pintura con colores sólidos y degradados. Para obtener información sobre ImageBrush y DrawingBrush, vea Pintar con imágenes, dibujos y objetos visuales.

Creación de efectos visuales con máscaras de opacidad

Una máscara de opacidad funciona asignando su contenido al elemento o objeto visual. A continuación, se usa el canal alfa de cada uno de los píxeles del pincel para determinar la opacidad resultante del elemento o los píxeles correspondientes del objeto visual; se omite el color real del pincel. Si una parte determinada del pincel es transparente, la parte correspondiente del elemento o objeto visual se convierte en transparente. Si una parte determinada del pincel es opaca, la opacidad de la parte correspondiente del elemento o objeto visual no cambia. La opacidad especificada por la máscara de opacidad se combina con cualquier configuración de opacidad presente en el elemento o objeto visual. Por ejemplo, si un elemento es un 25 % opaco y se aplica una máscara de opacidad que pasa de totalmente opaco a totalmente transparente, el resultado es un elemento que pasa de la opacidad del 25 por ciento a totalmente transparente.

Nota:

Aunque en los ejemplos de esta introducción se muestra el uso de máscaras de opacidad en elementos de imagen, se puede aplicar una máscara de opacidad a cualquier elemento o Visual, incluidos paneles y controles.

Las máscaras de opacidad se usan para crear efectos visuales interesantes, como crear imágenes o botones que se desvanezcan desde la vista, agregar texturas a elementos o combinar degradados para producir superficies similares a vidrio. En la ilustración siguiente se muestra el uso de una máscara de opacidad. Se usa un fondo a cuadros para mostrar las partes transparentes de la máscara.

Objeto con una máscara de opacidad de LinearGradientBrush
Ejemplo de enmascaramiento de opacidad

Creación de una máscara de opacidad

Para crear una máscara de opacidad, cree una Brush y aplíquela a la propiedad OpacityMask de un elemento o objeto visual. Puede usar cualquier tipo de Brush como máscara de opacidad.

LinearGradientBrush, RadialGradientBrush: se usa para hacer que un elemento o un objeto visual se desvanezcan desde la vista.

En la imagen siguiente se muestra un LinearGradientBrush elemento que se usa como máscara de opacidad.

Ejemplo de enmascaramiento de opacidad con LinearGradientBrush
ImageBrush: se usa para crear efectos de textura y borde suave o rasgado.

En la imagen siguiente se muestra un ImageBrush elemento usado como máscara de opacidad.

Ejemplo de enmascaramiento de opacidad con pincel de gradiente lineal
DrawingBrush: se usa para crear máscaras de opacidad complejas a partir de patrones de formas, imágenes y degradados.

En la imagen siguiente se muestra un DrawingBrush elemento que se usa como máscara de opacidad.

Ejemplo de enmascaramiento de opacidad de DrawingBrush

Los pinceles degradados (LinearGradientBrush y RadialGradientBrush) son especialmente adecuados para su uso como máscara de opacidad. Dado que un SolidColorBrush rellena un área con un color uniforme, hacen máscaras de opacidad deficientes; el uso de SolidColorBrush es equivalente a establecer la propiedad del elemento o del objeto visual Opacity.

Usar un degradado como máscara de opacidad

Para crear un relleno degradado, especifique dos o más puntos del gradiente. Cada parada de degradado contiene un color y una posición (vea Pintura con colores sólidos e información general sobre degradados para obtener más información sobre cómo crear y usar degradados). El proceso es el mismo cuando se usa un degradado como máscara de opacidad, excepto que, en lugar de combinar colores, el degradado de máscara de opacidad combina valores de canal alfa. Por lo tanto, el color real del contenido del degradado no importa; solo el canal alfa, o opacidad, de cada color importa. A continuación se muestra un ejemplo.

<!--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 las paradas de degradado para una máscara de opacidad

En el ejemplo anterior, el color Black definido por el sistema se usa como color inicial del degradado. Dado que todos los colores de la Colors clase, excepto Transparent, son totalmente opacos, se pueden usar para definir simplemente un color inicial para una máscara de opacidad degradada.

Para un control adicional sobre los valores alfa al definir una máscara de opacidad, puede especificar el canal alfa de colores mediante notación hexadecimal ARGB en el marcado o utilizando el método Color.FromScRgb.

Especificar opacidad de color en "XAML"

En Lenguaje de marcado extensible de aplicaciones (XAML), usa la notación hexadecimal ARGB para especificar la opacidad de los colores individuales. La notación hexadecimal ARGB usa la sintaxis siguiente:

# aarrggbb

El aa de la línea anterior representa un valor hexadecimal de dos dígitos que se usa para especificar la opacidad del color. El rr, gg y bb representan cada uno un valor hexadecimal de dos dígitos que se usa para especificar la cantidad de rojo, verde y azul en el color. Cada dígito hexadecimal puede tener un valor comprendido entre 0 y 9 o A-F. 0 es el valor más pequeño y F es el mayor. Un valor alfa de 00 especifica un color completamente transparente, mientras que un valor alfa de FF crea un color totalmente opaco. En el ejemplo siguiente, se usa la notación ARGB hexadecimal para especificar dos colores. La primera es totalmente opaca, mientras que la segunda es completamente transparente.

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

Usar una imagen como máscara de opacidad

Las imágenes también se pueden usar como máscara de opacidad. La imagen siguiente muestra un ejemplo. Se usa un fondo a cuadros para mostrar las partes transparentes de la máscara.

Un objeto con una máscara de opacidad ImageBrush
Ejemplo de enmascaramiento de opacidad

Para usar una imagen como máscara de opacidad, use un ImageBrush para contener la imagen. Al crear una imagen que se va a usar como máscara de opacidad, guarde la imagen en un formato que admita varios niveles de transparencia, como gráficos de red portátiles (PNG). En el ejemplo siguiente se muestra el código usado para crear la ilustración 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 una imagen en mosaico como máscara de opacidad

En el ejemplo siguiente, se usa la misma imagen con otra ImageBrush, pero las características de mosaico del pincel se usan para generar iconos de la imagen de 50 píxeles cuadrados.

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

Crear una máscara de opacidad a partir de un dibujo

Los dibujos se pueden usar como una máscara de opacidad. Las formas contenidas en el dibujo se pueden rellenar con degradados, colores sólidos, imágenes o incluso otros dibujos. En la imagen siguiente se muestra un ejemplo de un dibujo usado como máscara de opacidad. Se usa un fondo a cuadros para mostrar las partes transparentes de la máscara.

Un objeto con una máscara de opacidad de DrawingBrush
Ejemplo de enmascaramiento de opacidad de DrawingBrush

Para usar un dibujo como máscara de opacidad, use un DrawingBrush para contener el dibujo. En el ejemplo siguiente se muestra el código usado para crear la ilustración 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 un dibujo en mosaico como máscara de opacidad

Al igual que ImageBrush, se puede hacer que DrawingBrush repita su dibujo en mosaico. En el ejemplo siguiente, se usa un pincel de dibujo para crear una máscara de opacidad con efecto de 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>