Comment : rendre un UIElement transparent ou semi-transparent

  • Article

Mise à jour : novembre 2007

Cet exemple montre comment rendre un UIElement transparent ou semi-transparent. Pour rendre un élément transparent ou semi-transparent, vous devez définir sa propriété Opacity. Une valeur de 0.0 rend l'élément complètement transparent, tandis que la valeur 1.0 le rend complètement opaque. Une valeur de 0.5 rend l'élément à moitié opaque, etc. Par défaut, l'Opacity d'un élément est définie à la valeur 1.0.

Exemple

L'exemple suivant affecte la valeur 0.25 à l'Opacity d'un bouton, de sorte que celui-ci et son contenu (dans ce cas, le texte du bouton) sont opaques à 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";

Si le contenu d'un élément a ses propres paramètres Opacity, ces valeurs sont multipliées en fonction de l'Opacity des éléments contenants.

L'exemple suivant affecte la valeur 0.25 à l'Opacity d'un bouton et la valeur 0.5 à l'Opacity d'un contrôle Image contenu dans le bouton. L'image ainsi obtenue est opaque à 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;

Une autre manière 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é de certaines parties d'un élément et présente des avantages en termes de performances par rapport à l'utilisation de la propriété Opacity de l'élément. L'exemple suivant affecte la valeur 0.25 à l'Opacity d'un SolidColorBrush utilisé pour peindre l'Background du bouton. L'arrière-plan du pinceau est opaque à 25 %, tandis que son contenu (le texte du bouton) reste opaque à 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";

Vous pouvez contrôler également l'opacité de couleurs individuelles d'un pinceau. Pour plus d'informations sur les couleurs et les pinceaux, consultez Vue d'ensemble de la peinture avec des couleurs unies ou des dégradés. Pour un exemple d'animation de l'opacité d'un élément, consultez Comment : animer l'opacité d'un élément ou d'un pinceau.