Procedura: rendere trasparente o semitrasparente un oggetto UIElement

In questo esempio viene mostrato come rendere trasparente o semitrasparente un oggetto UIElement. Per rendere trasparente o semitrasparente un elemento, è necessario impostarne la proprietà Opacity. Un valore pari a 0.0 rende completamente trasparente l'elemento, mentre un valore pari a 1.0 lo rende completamente opaco. Un valore pari a 0.5 rende opaco l'elemento al 50% e così via. La proprietà Opacity di un elemento è impostata in modo predefinito su 1.0.

Esempio

Nell'esempio seguente, l'oggetto Opacity di un pulsante viene impostato su 0.25, rendendo opaco l'oggetto e il relativo contenuto (in questo caso, il testo del pulsante) al 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";

Se il contenuto di un elemento dispone delle proprie impostazioni Opacity, quei valori vengono moltiplicati per la proprietà Opacity degli elementi contenitore.

Nell'esempio seguente, la proprietà Opacity di un pulsante viene impostata su 0.25 e la proprietà Opacity di un controllo Image contenuto all'interno del pulsante su 0.5. Di conseguenza, l'immagine appare opaca al 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;       

Un altro modo per controllare l'opacità di un elemento consiste nell'impostare l'opacità dell'oggetto Brush che disegna l'elemento. Questo approccio consente di modificare in modo selettivo l'opacità di alcune parti di un elemento e offre vantaggi in termini di prestazioni rispetto all'utilizzo della proprietà Opacity dell'elemento. Nell'esempio seguente, la proprietà Opacity di un oggetto SolidColorBrush utilizzato per disegnare l'oggetto Background del pulsante viene impostata su 0.25. Di conseguenza, lo sfondo del pennello risulta opaco al 25%, mentre il contenuto (il testo del pulsante) rimane opaco al 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";

È inoltre possibile controllare l'opacità di singoli colori all'interno di un pennello. Per ulteriori informazioni sui colori e sui pennelli, vedere Cenni sul disegno con colori a tinta unita e sfumature. Per un esempio in cui viene mostrato come aggiungere un'animazione all'opacità di un elemento, vedere Procedura: animare l'opacità di un elemento o un pennello.