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.

image image

 File, New Project

Visual Studio 2010

If you don’t have Visual Studio 2010 (Beta 1), read my blog:
http://blogs.msdn.com/brunoterkaly/archive/2009/07/17/fast-forward-visual-studio-2010-and-net-4-0.aspx

image

Of course we are we creating a WPF application

 image
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.

image 
 
 

The running application looks like this:

The goal of this application is to list products. The grayed out entries are “out of stock.”

 image 

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.
image

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.

image

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

   1:  <Window x:Class="DataTriggers.Window1"
   2:          xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
   3:          xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
   4:          Title="DataTriggerStoryboardExample" Height="300" Width="300">
   5:      <Window.Resources>
   6:          <XmlDataProvider x:Key="InventoryData" XPath="Inventory/Books">
   7:              <x:XData>
   8:                  <Inventory xmlns="">
   9:                      <Books>
  10:                          <Book ISBN="0-7356-0562-9" Stock="in" Number="9">
  11:                              <Title>XML in Action</Title>
  12:                              <Summary>XML Web Technology</Summary>
  13:                          </Book>
  14:                          <Book ISBN="0-7356-1370-2" Stock="in" Number="8">
  15:                              <Title>Programming Microsoft Windows With C#</Title>
  16:                              <Summary>C# Programming using the .NET Framework</Summary>
  17:                          </Book>
  18:                          <Book ISBN="0-7356-1288-9" Stock="out" Number="7">
  19:                              <Title>Inside C#</Title>
  20:                              <Summary>C# Language Programming</Summary>
  21:                          </Book>
  22:                          <Book ISBN="0-7356-1377-X" Stock="in" Number="5">
  23:                              <Title>Introducing Microsoft .NET</Title>
  24:                              <Summary>Overview of .NET Technology</Summary>
  25:                          </Book>
  26:                          <Book ISBN="0-7356-1448-2" Stock="out" Number="4">
  27:                              <Title>Microsoft C# Language Specifications</Title>
  28:                              <Summary>The C# language definition</Summary>
  29:                          </Book>
  30:                      </Books>
  31:                      <CDs>
  32:                          <CD Stock="in" Number="3">
  33:                              <Title>Classical Collection</Title>
  34:                              <Summary>Classical Music</Summary>
  35:                          </CD>
  36:                          <CD Stock="out" Number="9">
  37:                              <Title>Jazz Collection</Title>
  38:                              <Summary>Jazz Music</Summary>
  39:                          </CD>
  40:                      </CDs>
  41:                  </Inventory>
  42:              </x:XData>
  43:          </XmlDataProvider>
  44:   
  45:          <Style x:Key="AnimatedListBoxItemStyle" TargetType="{x:Type ListBoxItem}">
  46:   
  47:              <Setter Property="Margin" Value="0,2,0,2" />
  48:              <Setter Property="Padding" Value="0,2,0,2" />
  49:   
  50:              <Style.Triggers>
  51:                  <DataTrigger 
  52:                       Binding="{Binding XPath=@Stock}" 
  53:                       Value="out">
  54:                      <DataTrigger.EnterActions>
  55:                          <BeginStoryboard>
  56:                              <Storyboard>
  57:                                  <DoubleAnimation
  58:                                   Storyboard.TargetProperty="Opacity"
  59:                                   From="0.0" To="1.0" Duration="0:0:2" 
  60:                                   RepeatBehavior="Forever"
  61:                                   AutoReverse="True"/>
  62:   
  63:                              </Storyboard>
  64:                          </BeginStoryboard>
  65:                      </DataTrigger.EnterActions>
  66:                      <DataTrigger.ExitActions>
  67:                          <BeginStoryboard>
  68:                              <Storyboard FillBehavior="Stop">
  69:                                  <DoubleAnimation
  70:                                    Storyboard.TargetProperty="Opacity"
  71:                                    To="1" Duration="0:0:1" />
  72:   
  73:                              </Storyboard>
  74:                          </BeginStoryboard>
  75:                      </DataTrigger.ExitActions>
  76:   
  77:                  </DataTrigger>
  78:              </Style.Triggers>
  79:          </Style>
  80:      </Window.Resources>
  81:   
  82:      <StackPanel>
  83:          <ListBox HorizontalAlignment="Center"
  84:        ItemContainerStyle="{StaticResource AnimatedListBoxItemStyle}"
  85:        Padding="2">
  86:              <ListBox.ItemsSource>
  87:                  <Binding Source="{StaticResource InventoryData}"
  88:                   XPath="*"/>
  89:              </ListBox.ItemsSource>
  90:   
  91:              <ListBox.ItemTemplate>
  92:                  <DataTemplate>
  93:                      <TextBlock FontSize="12" Margin="0,0,10,0">
  94:              <TextBlock.Text>
  95:                <Binding XPath="Title"/>
  96:              </TextBlock.Text>
  97:                      </TextBlock>
  98:                  </DataTemplate>
  99:              </ListBox.ItemTemplate>
 100:          </ListBox>
 101:      </StackPanel>
 102:  </Window>
 103: