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

Este ejemplo muestra cómo hacer que un 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 hace que el elemento sea completamente opaco. Un valor de 0.5 hace que el elemento sea 50% opaco, y así sucesivamente. El Opacity de un elemento se establece por defecto en 1.0.

Ejemplo

El siguiente ejemplo establece el Opacity de un botón en 0.25, haciendo que este y su contenido (en este caso, el texto del botón) sean opacos en un 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.
//
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 ajustes Opacity, esos valores se multiplican contra los elementos que lo contienen Opacity.

El siguiente ejemplo establece el Opacity de un botón en 0.25, y el Opacity de un control Image contenido en el botón en 0.5. Como resultado, la imagen aparece 12,5 % opaca: 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);
//
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 Brush que pinta el elemento. Este enfoque le permite alterar selectivamente la opacidad de partes de un elemento, y proporciona beneficios de rendimiento sobre el uso de la propiedad Opacity del elemento. El siguiente ejemplo establece el Opacity de un SolidColorBrush utilizado para pintar el Background del botón se establece en 0.25. Como resultado, el fondo del pincel es 25% opaco, pero su contenido (el texto del botón) permanece 100% opaco.

<!-- 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.
//
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 los colores individuales dentro de un pincel. Para obtener más información sobre los colores y los pinceles, vea Información general sobre el dibujo con colores sólidos y degradados. Para ver un ejemplo de cómo animar la opacidad de un elemento, vea Animar la opacidad de un elemento o pincel.