如何：使 UIElement 呈现为透明或半透明

  • 项目

更新：2007 年 11 月

此示例演示如何使 UIElement 呈现为透明或半透明。若要使元素呈现为透明或半透明，请设置它的 Opacity 属性。值 0.0 会使元素呈现为完全透明，而值 1.0 则使元素呈现为完全不透明。值 0.5 使元素呈现为 50% 不透明。其他值可以依次类推。默认情况下将元素的 Opacity 设置为 1.0。

示例

下面的示例将按钮的 Opacity 设置为 0.25，从而使该按钮及按钮内容（这里指按钮的文本）呈现为 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.
//
Button myTwentyFivePercentOpaqueButton = new Button();
myTwentyFivePercentOpaqueButton.Opacity = new Double();
myTwentyFivePercentOpaqueButton.Opacity = 0.25;
myTwentyFivePercentOpaqueButton.Content = "A Button";

如果元素内容拥有自己的 Opacity 设置，则针对包含元素 Opacity 将这些值相乘。

下面的示例将按钮的 Opacity 设置为 0.25，并将该按钮中包含的 Image 控件的 Opacity 设置为 0.5。因此，图像会显示为 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);
//
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;

控制元素的不透明度的另一种方法是设置用于绘制该元素的 Brush 的不透明度。使用这种方法，您可以有选择性地改变元素某些部分的不透明度。与使用元素的 Opacity 属性相比，这更具有性能优势。下面的示例将用于绘制按钮 Background 的 SolidColorBrush 的 Opacity 设置为 0.25。因此，画笔的背景为 25% 不透明，但其内容（按钮的文本）仍保留为 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";

您还可以使用画笔来控制单个颜色的不透明度。有关颜色和画笔的更多信息，请参见使用纯色和渐变进行绘制概述。有关演示如何对元素的不透明度进行动画处理的示例，请参见如何：对元素或画笔的不透明度进行动画处理。