How to: Trigger an Animation When Data Changes
| Learning XAML: This example shows how to use a DataTrigger, a BeginStoryboard action, and a Storyboard to animate a property when bound data meets a specified condition. |
This is a fun, easy blog entry. Yes, you can use the code for VS 2008. Just create a project with VS 2008 and copy the Window1.xaml appropriately.
File, New Project
Visual Studio 2010If you don’t have Visual Studio 2010 (Beta 1), read my blog:https://blogs.msdn.com/brunoterkaly/archive/2009/07/17/fast-forward-visual-studio-2010-and-net-4-0.aspx Of course we are we creating a WPF application  Our default project has been created. At this point we are ready to copy some XAML into Window1.xaml.This example uses no code behind.
|
The running application looks like this:
The goal of this application is to list products. The grayed out entries are “out of stock.”  |
Why Grayed Out?
The reason they are grayed out is because they are “out-of-stock.” But what we want to know is how to implement that feature using XAML.
Where we control opacity
Opacity is controlled in a DataTrigger. See source code below. |
Source Code
Lines 6 to 43 is the data used to populate the list box.
Lines 57 to 61 changes the opacity of the “out of stock” items in and endless loop.
The items in the listbox are styled by “AnimatedListBoxItemStyle” and that is how the listbox items get their opacity animated.
Lines 52 and 53 illustrate what triggers the change in opacity. Lines 18, 26, and 36 are lines that indicate that books are out of stock, because the they read “Stock=’out’”. Those are the ListBoxItems that will get the opacity animation.
Window1.xaml
|