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.