Gewusst wie: Formatieren von "UIElement" als transparent oder halbtransparent

Aktualisiert: November 2007

Dieses Beispiel zeigt, wie Sie ein UIElement transparent oder halbtransparent formatieren. Um dies für ein Element durchzuführen, legen Sie seine Opacity-Eigenschaft fest. Bei einem Wert von 0.0 ist das Element vollständig transparent, und bei einem Wert von 1.0 ist das Element vollständig undurchsichtig. Ein Wert von 0.5 bewirkt, dass das Element halbtransparent ist (usw.). Die Opacity eines Elements ist standardmäßig auf 1.0 gesetzt.

Beispiel

Im folgenden Beispiel wird die Opacity einer Schaltfläche auf 0.25 gesetzt, so dass die Schaltfläche und ihr Inhalt (in diesem Fall der Text der Schaltfläche) mit 25 % Deckung angezeigt wird.

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

Wenn der Inhalt eines Elements über eigene Opacity-Einstellungen verfügt, werden diese Werte mit den Opacity-Werten des enthaltenden Elements multipliziert.

Im folgenden Beispiel wird die Opacity einer Schaltfläche auf 0.25 gesetzt, und die Opacity eines Image-Steuerelements, das Teil der Schaltfläche ist, wird auf 0.5 gesetzt. Dies führt zu dem Ergebnis, dass das Bild 12,5 % gedeckt angezeigt wird: 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;       

Eine andere Möglichkeit, den Durchlässigkeitsgrad eines Elements festzulegen, besteht darin, die Durchlässigkeit des Brush festzulegen, mit dem das Element gezeichnet wird. Bei diesem Ansatz können Sie die Durchlässigkeit von Teilen eines Elements selektiv anpassen, und der Ansatz bietet außerdem Leistungsvorteile im Gegensatz zur Verwendung der Opacity-Eigenschaft eines Elements. Im folgenden Beispiel wird die Opacity eines SolidColorBrush, der zum Zeichnen des Background-Elements der Schaltfläche verwendet wird, auf 0.25 gesetzt. Der Hintergrund des Pinsels ist dann zu 25 % deckend, aber der Inhalt (der Text der Schaltfläche) ist zu 100 % deckend.

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

Außerdem können Sie die Durchlässigkeit einzelner Farben innerhalb eines Pinsels steuern. Weitere Informationen zu Farben und Pinseln finden Sie unter Übersicht über das Zeichnen mit Volltonfarben und Farbverläufen. Ein Beispiel dafür, wie Sie die Durchlässigkeit eines Elements animieren, finden Sie unter Gewusst wie: Animieren der Durchlässigkeit eines Elements oder eines Pinsels.