Anleitung: Einen UIElement transparent oder Semi-Transparent machen

In diesem Beispiel wird gezeigt, wie ein UIElement transparent oder halbtransparent gemacht werden kann. Um ein Element transparent oder semitransparent zu machen, legen Sie dessen Opacity-Eigenschaft fest. Ein Wert von 0.0 macht das Element vollständig transparent, während ein Wert von 1.0 das Element vollständig undurchsichtig macht. Ein Wert von 0.5 macht das Element 50% undurchsichtig usw. Die Opacity eines Elements ist standardmäßig auf 1.0 festgelegt.

Beispiel

Im folgenden Beispiel wird die Opacity einer Schaltfläche auf 0.25festgelegt, wodurch sie und derEn Inhalt (in diesem Fall der Text der Schaltfläche) 25% undurchsichtig ist.

<!-- 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 dem enthaltenen Element Opacitymultipliziert.

Im folgenden Beispiel wird die Opacity einer Schaltfläche auf 0.25und die Opacity eines in der Schaltfläche enthaltenen Image Steuerelements auf 0.5festgelegt. Daher wird das Bild 12,5% undurchsichtig angezeigt: 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 weitere Möglichkeit zum Steuern der Deckkraft eines Elements besteht darin, die Deckkraft der Brush festzulegen, die das Element zeichnet. Dieser Ansatz ermöglicht es Ihnen, die Deckkraft von Teilen eines Elements selektiv zu ändern und bietet im Vergleich zur Verwendung der Opacity-Eigenschaft des Elements Leistungsverbesserungen. Im folgenden Beispiel wird die Opacity eines SolidColorBrush, das dazu verwendet wird, die Background des Buttons zu malen, auf 0.25gesetzt. Daher ist der Hintergrund des Pinsels zu 25 % undurchsichtig (%), während der Inhalt (der Text der Schaltfläche) zu 100 % undurchsichtig (%) bleibt.

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

Sie können auch die Deckkraft einzelner Farben innerhalb eines Pinsels steuern. Weitere Informationen zu Farben und Pinsel finden Sie unter Painting with Solid Colors and Gradients Overview. Ein Beispiel zum Animieren der Deckkraft eines Elements finden Sie unter Animieren der Deckkraft eines Elements oder Pinsels.