Como: Tornar um UIElement Transparente ou Semitransparente

Este exemplo mostra como tornar um UIElement transparentes ou semitransparente. Para tornar um elemento transparente ou semitransparente, você modifica sua propriedade Opacity. Um valor de 0.0 torna o elemento completamente transparente, enquanto um valor de 1.0 torna o elemento completamente opaco. Um valor de 0.5 torna o elemento 50% opaco, e assim por diante. A Opacity de um elemento é definida como 1.0 por padrão.

Exemplo

O exemplo a seguir define a Opacity de um botão para 0.25, fazendo com que ele e seu conteúdo (neste caso, o texto do botão) sejam 25% opacos.

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

Se o conteúdo de um elemento tiver suas próprias configurações de Opacity, esses valores são multiplicados pela Opacity dos elementos que ele contêm .

O exemplo a seguir define a Opacity de um botão como 0.25 e a Opacity de um controle Image contido no botão para 0.5. sistema autônomo resultado, a imagem aparece 12.5 % opaco: 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;       

Outra maneira de controlar a opacidade de um elemento é definir a opacidade do Brush que pinta o elemento. Essa abordagem permite que você altere seletivamente a opacidade de partes de um elemento, e oferece vantagens de desempenho com relação ao uso da propriedade Opacity do elemento. O exemplo a seguir define a Opacity de um SolidColorBrush usado para pintar o Background de um botão como 0.25. Consequentemente, o pincel do plano de fundo é 25% opaco, mas seu conteúdo (texto do botão) 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";

Você também pode controlar a opacidade de cores individuais em um pincel. Para obter mais informações sobre cores e pincéis, consulte Painting with Solid Colors and Gradients Overview. Para ver um exemplo mostrando como animar a opacidade de um elemento, consulte Como: Animate the Opacity of an Element or Brush.