Практическое руководство. Как сделать UIElement прозрачным или полупрозрачным

Обновлен: Ноябрь 2007

В этом примере демонстрируется, как сделать 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, а свойство Opacity элемента Image, содержащегося в кнопке, равно 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. В следующем примере свойству Opacity кисти SolidColorBrush, которая используется для рисования фона Background кнопки, присваивается значение 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";

Можно также управлять прозрачностью отдельных цветов в кисти. Дополнительные сведения о цветах и кистях см. в разделе Общие сведения о закраске сплошным цветом и градиентом. Пример, в котором показана анимация непрозрачности элемента, см. в разделе Практическое руководство. Анимация свойства "Прозрачность" элемента или кисти.