Cara: Membuat UIElement Transparan atau Semi-Transparent

Contoh ini menunjukkan cara membuat UIElement transparan atau semi transparan. Untuk membuat elemen transparan atau semi transparan, Anda mengatur properti Opacity. Nilai 0.0 membuat elemen benar-benar transparan, sementara nilai 1.0 membuat elemen benar-benar buram. Nilai 0.5 membuat elemen 50% buram, dan sebagainya. Elemen Opacity diatur ke 1.0 secara default.

Contoh

Contoh berikut mengatur Opacity tombol ke 0.25, menjadikannya dan isinya (dalam hal ini, teks tombol) 25% transparan.

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

Jika konten elemen memiliki pengaturan Opacity sendiri, nilai tersebut dikalikan dengan elemen yang berisi Opacity.

Contoh berikut mengatur Opacity tombol ke 0.25, dan Opacity kontrol Image yang terdapat di dalam tombol menjadi 0.5. Akibatnya, gambar muncul 12,5% buram: 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;

Cara lain untuk mengontrol keburaman elemen adalah dengan mengatur keburaman Brush yang melukis elemen. Pendekatan ini memungkinkan Anda mengubah opasitas bagian elemen secara selektif, dan memberikan manfaat performa daripada menggunakan properti Opacity elemen. Contoh berikut mengatur Opacity dari SolidColorBrush yang digunakan untuk melukis Background tombol menjadi diatur ke 0.25. Akibatnya, latar belakang kuas adalah 25% buram, tetapi isinya (teks tombol) tetap 100% buram.

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

Anda juga dapat mengontrol keburaman warna individu dalam kuas. Untuk informasi selengkapnya tentang warna dan kuas, lihat Melukis dengan Warna Penuh dan Ikhtisar Gradien. Untuk contoh yang menunjukkan cara menganimasikan opasitas elemen, lihat Menganimasikan Opasitas Elemen atau Kuas.