Cómo: Hacer que un elemento UIElement sea transparente o semitransparente

En este ejemplo se muestra cómo hacer que un elemento UIElement sea transparente o semitransparente. Para hacer que un elemento sea transparente o semitransparente, se establece su propiedad Opacity. Un valor de 0.0 hace que el elemento sea completamente transparente, mientras que un valor de 1.0 lo deja completamente opaco. Un valor de 0.5 aplica al elemento una opacidad del 50%, y así sucesivamente. La propiedad Opacity de un elemento se establece en 1.0 de manera predeterminada.

Ejemplo

En el ejemplo siguiente se establece la propiedad Opacity de un botón en 0.25, de modo que se aplica a él y a su contenido (en este caso, el texto del botón) una opacidad del 25%.

<!-- Both the button and its text are made 25% opaque. -->
<Button Opacity="0.25">A Button</Button>

            '
            ' Both the button and its text are made 25% opaque.
            '
            Dim myTwentyFivePercentOpaqueButton As New Button()
            myTwentyFivePercentOpaqueButton.Opacity = New Double()
            myTwentyFivePercentOpaqueButton.Opacity = 0.25
            myTwentyFivePercentOpaqueButton.Content = "A Button"

//
// Both the button and its text are made 25% opaque.
//
Button myTwentyFivePercentOpaqueButton = new Button();
myTwentyFivePercentOpaqueButton.Opacity = new Double();
myTwentyFivePercentOpaqueButton.Opacity = 0.25;
myTwentyFivePercentOpaqueButton.Content = "A Button";

Si el contenido de un elemento tiene sus propios valores de Opacity, éstos se multiplican por el valor de la propiedad Opacity del elemento contenedor.

En el ejemplo siguiente se establece la propiedad Opacity de un botón en 0.25 la propiedad Opacity de un control Image contenido en el botón en 0.5. Como resultado, la opacidad resultante de la imagen es del 12,5%: 0,25 * 0,5 = 0,125.

<!-- The image contained within this button has an effective
     opacity of 0.125 (0.25 * 0.5 = 0.125). -->
<Button Opacity="0.25">
  <StackPanel Orientation="Horizontal">
    <TextBlock VerticalAlignment="Center" Margin="10">A Button</TextBlock>
    <Image Source="sampleImages\berries.jpg" Width="50" Height="50"
      Opacity="0.5"/>
  </StackPanel>
</Button>

            '
            ' The image contained within this button has an 
            ' effective opacity of 0.125 (0.25*0.5 = 0.125)
            '
            Dim myImageButton As New Button()
            myImageButton.Opacity = New Double()
            myImageButton.Opacity = 0.25

            Dim myImageStackPanel As New StackPanel()
            myImageStackPanel.Orientation = Orientation.Horizontal


            Dim myTextBlock As New TextBlock()
            myTextBlock.VerticalAlignment = VerticalAlignment.Center
            myTextBlock.Margin = New Thickness(10)
            myTextBlock.Text = "A Button"
            myImageStackPanel.Children.Add(myTextBlock)

            Dim myImage As New Image()
            Dim myBitmapImage As New BitmapImage()
            myBitmapImage.BeginInit()
            myBitmapImage.UriSource = New Uri("sampleImages/berries.jpg",UriKind.Relative)
            myBitmapImage.EndInit()
            myImage.Source = myBitmapImage
            Dim myImageBrush As New ImageBrush(myBitmapImage)
            myImage.Width = 50
            myImage.Height = 50
            myImage.Opacity = 0.5
            myImageStackPanel.Children.Add(myImage)
            myImageButton.Content = myImageStackPanel

//
// The image contained within this button has an 
// effective opacity of 0.125 (0.25*0.5 = 0.125);
//
Button myImageButton = new Button();
myImageButton.Opacity = new Double();
myImageButton.Opacity = 0.25;

StackPanel myImageStackPanel = new StackPanel();
myImageStackPanel.Orientation = Orientation.Horizontal;


TextBlock myTextBlock = new TextBlock();
myTextBlock.VerticalAlignment = VerticalAlignment.Center;
myTextBlock.Margin = new Thickness(10);
myTextBlock.Text = "A Button";
myImageStackPanel.Children.Add(myTextBlock);

Image myImage = new Image();
BitmapImage myBitmapImage = new BitmapImage();
myBitmapImage.BeginInit();
myBitmapImage.UriSource = new Uri("sampleImages/berries.jpg",UriKind.Relative);
myBitmapImage.EndInit();
myImage.Source = myBitmapImage;
ImageBrush myImageBrush = new ImageBrush(myBitmapImage);
myImage.Width = 50;
myImage.Height = 50;
myImage.Opacity = 0.5;
myImageStackPanel.Children.Add(myImage);
myImageButton.Content = myImageStackPanel;       

Otra manera de controlar la opacidad de un elemento es establecer la opacidad del objeto Brush que pinta el elemento. Este enfoque permite modificar selectivamente la opacidad de algunas partes de un elemento y proporciona ventajas de rendimiento con respecto al uso de la propiedad Opacity del elemento. En el ejemplo siguiente se establece en 0.25 la propiedad Opacity de un objeto SolidColorBrush utilizado para pintar la propiedad Background del botón. Como resultado, el fondo del pincel tiene una opacidad del 25%, pero la opacidad de su contenido (el texto del botón) sigue siendo del 100%.

<!-- This button's background is made 25% opaque, but its
     text remains 100% opaque. -->
<Button>
  <Button.Background>
    <SolidColorBrush Color="Gray" Opacity="0.25" />
  </Button.Background>
  A Button
</Button>

            '
            '  This button's background is made 25% opaque, 
            ' but its text remains 100% opaque.
            '
            Dim myOpaqueTextButton As New Button()
            Dim mySolidColorBrush As New SolidColorBrush(Colors.Gray)
            mySolidColorBrush.Opacity = 0.25
            myOpaqueTextButton.Background = mySolidColorBrush
            myOpaqueTextButton.Content = "A Button"

//
//  This button's background is made 25% opaque, 
// but its text remains 100% opaque.
//
Button myOpaqueTextButton = new Button();
SolidColorBrush mySolidColorBrush = new SolidColorBrush(Colors.Gray);
mySolidColorBrush.Opacity = 0.25;
myOpaqueTextButton.Background = mySolidColorBrush;
myOpaqueTextButton.Content = "A Button";

También puede controlar la opacidad de colores individuales dentro de un pincel. Para obtener más información acerca de los colores y los pinceles, vea Información general sobre el dibujo con colores sólidos y degradados. Para obtener un ejemplo que muestra cómo animar la opacidad de un elemento, vea Cómo: Animar la opacidad de un elemento o pincel.