방법: 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";

브러시 내의 개별 색의 불투명도도 제어할 수 있습니다. 색 및 브러시에 대한 자세한 내용은 단색 및 그라데이션을 사용한 그리기 개요를 참조하십시오. 요소의 불투명도에 애니메이션 효과를 적용하는 방법을 보여 주는 예제를 보려면 방법: 요소 또는 브러시의 불투명도에 애니메이션 효과 적용을 참조하십시오.