Aide et Astuces : rendre un UIElement transparent ou semi-transparent

Cet exemple montre comment rendre un UIElement transparent ou semi-transparent. Pour rendre un élément transparent ou semi-transparent, vous définissez sa propriété Opacity. Une valeur de 0.0 rend l’élément complètement transparent, tandis qu’une valeur de 1.0 rend l’élément complètement opaque. Une valeur de 0.5 rend l’élément 50% opaque, et ainsi de suite. Le Opacity d’un élément est défini sur 1.0 par défaut.

Exemple :

Dans l'exemple suivant, le Opacity d’un bouton est défini sur 0.25, ce qui le rend opaque à 25 %, ainsi que son contenu (dans ce cas, le texte du bouton).

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

Si le contenu d’un élément a ses propres paramètres de Opacity, ces valeurs sont multipliées par rapport aux éléments contenants Opacity.

L'exemple suivant attribue l'Opacity d’un bouton à 0.25et attribue le Opacity d’un contrôle Image contenu dans le bouton à 0.5. Par conséquent, l’image apparaît 12,5% opaque : 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;

Une autre façon de contrôler l’opacité d’un élément consiste à définir l’opacité du Brush qui peint l’élément. Cette approche vous permet de modifier de manière sélective l’opacité des parties d’un élément et offre des avantages en matière de performances par rapport à l’utilisation de la propriété Opacity de l’élément. L’exemple suivant définit la propriété Opacity d’un SolidColorBrush utilisé pour peindre le Background du bouton sur 0.25. Par conséquent, l’arrière-plan du pinceau est de 25% opaque, mais son contenu (le texte du bouton) reste 100% opaque.

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

Vous pouvez également contrôler l’opacité des couleurs individuelles au sein d’un pinceau. Pour plus d’informations sur les couleurs et les pinceaux, consultez Vue d’ensemble de la peinture avec des couleurs unies et des dégradés. Pour obtenir un exemple montrant comment animer l’opacité d’un élément, consultez Animer l’opacité d’un élément ou d’un pinceau.