HOW TO：將 UIElement 設為透明或半透明

本範例示範如何將 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.
            '
            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";

如果項目的內容有自己的 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)
            '
            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;       

控制項目透明度的另一種方法是設定用來繪製項目的 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.
            '
            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";

您也可以控制筆刷內個別色彩的不透明度。 如需色彩和筆刷的詳細資訊，請參閱使用純色和漸層繪製的概觀。 如需如何建立項目不透明度動畫的範例，請參閱 HOW TO：建立項目或筆刷不透明效果的動畫。