Condividi tramite


Procedura: rendere trasparente o semitrasparente un oggetto UIElement

In questo esempio viene illustrato come rendere trasparente o semitrasparente un UIElement oggetto . Per rendere trasparente o semitrasparente un elemento, impostarne la Opacity proprietà. Un valore di 0.0 rende completamente trasparente l'elemento, mentre un valore di 1.0 rende completamente opaco l'elemento. Un valore di 0.5 rende opaco l'elemento al 50% e così via. Per impostazione predefinita, un Opacity elemento è impostato su 1.0 .

Esempio

Nell'esempio seguente l'oggetto Opacity di un pulsante viene impostato su 0.25, rendendolo e il relativo contenuto (in questo caso, il testo del pulsante) 25% opaco.

<!-- 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 il contenuto di un elemento ha impostazioni personalizzate Opacity , tali valori vengono moltiplicati rispetto agli elementi Opacitycontenenti .

L'esempio seguente imposta un pulsante su 0.25e l'oggetto OpacityOpacity di un Image controllo contenuto nel pulsante su 0.5. Di conseguenza, l'immagine appare 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;

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 parti di un elemento e offre vantaggi in termini di prestazioni rispetto all'uso della proprietà dell'elemento Opacity . Nell'esempio Background seguente viene impostato l'oggetto Opacity di un SolidColorBrush oggetto utilizzato per disegnare il pulsante su 0.25. Di conseguenza, lo sfondo del pennello è 25% opaco, ma il relativo 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.
//
Button myOpaqueTextButton = new Button();
SolidColorBrush mySolidColorBrush = new SolidColorBrush(Colors.Gray);
mySolidColorBrush.Opacity = 0.25;
myOpaqueTextButton.Background = mySolidColorBrush;
myOpaqueTextButton.Content = "A Button";

È anche possibile controllare l'opacità dei singoli colori all'interno di un pennello. Per altre informazioni sui colori e i pennelli, vedere Disegnare con colori a tinta unita e sfumature Panoramica. Per un esempio che mostra come animare l'opacità di un elemento, vedere Animare l'opacità di un elemento o pennello.