Andy De George
da363692ff
* Reset branch for WPF changes * Convert BMP to PNG; fix link-out-of-scope err * Add snippets for WPF... 6794 files!!!! * Add missing snippets * update file updated between migration * Fix paths to include * update breadcrumb and toc * fix index links * fix index links * fix index links * fix markdown
2.3 KiB
title, ms.date, helpviewer_keywords, ms.assetid
| title | ms.date | helpviewer_keywords | ms.assetid | ||
|---|---|---|---|---|---|
| How to: Animate the Opacity of an Element or Brush | 03/30/2017 |
|
572af23b-39dd-48d1-9db5-4bca56a4b3d3 |
How to: Animate the Opacity of an Element or Brush
To make a framework element fade in and out of view, you can animate its xref:System.Windows.UIElement.Opacity%2A property or you can animate the xref:System.Windows.Media.Brush.Opacity%2A property of the xref:System.Windows.Media.Brush (or brushes) used to paint it. Animating the element's opacity makes it and its children fade in and out of view, but animating the brush used to paint the element enables you to be more selective about which portion of the element fades. For example, you could animate the opacity of a brush used to paint a button's background. This would cause the button's background to fade in and out of view, while leaving its text fully opaque.
Note
Animating the xref:System.Windows.Media.Brush.Opacity%2A of a xref:System.Windows.Media.Brush provides performance benefits over animating the xref:System.Windows.UIElement.Opacity%2A property of an element.
In the following example, two buttons are animated so that they fade in and out of view. The Opacity of the first xref:System.Windows.Controls.Button is animated from 1.0 to 0.0 over a xref:System.Windows.Media.Animation.Timeline.Duration%2A of five seconds. The second button is also animated, but the Opacity of the SolidColorBrush used to paint its xref:System.Windows.Controls.Control.Background%2A is animated rather than the opacity of the entire button. When the example is run, the first button completely fades in and out of view, while only the background of the second button fades in and out of view. Its text and border remain fully opaque.
Example
[!code-xamltimingbehaviors_snip#10]
Code has been omitted from this example. The full sample also shows how to animate the opacity of a xref:System.Windows.Media.Color within a xref:System.Windows.Media.LinearGradientBrush. For the full sample, see the Animating the Opacity of an Element Sample.