方法 : 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 の不透明度を設定することによって制御することもできます。この方法を使用すると、1 つの要素の各部分の不透明度を選択して変更でき、要素の 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";

また、ブラシ内の個々の色の不透明度を制御することもできます。色とブラシの詳細については、「純色およびグラデーションによる塗りつぶしの概要」を参照してください。要素の不透明度をアニメーション化する方法の例については、「方法 : 要素またはブラシの不透明度をアニメーション化する」を参照してください。