Posted by: Zeeshan Amjad | February 5, 2010

Apply animation with Property Trigger


We have already saw an example of Property Trigger and animation using XAML. Now we are going to use these two concepts together and apply animation with property trigger.

In this example we are going to apply animation on list box. When we select any item in the list box then its font size increase from 12 to 18 in two seconds. In addition when we leave the same list box item then font size decrease 18 to 12 again in two seconds. We are using EnterAction and ExitAction property of trigger. These properties are TriggerActionCollection type. Here is a class diagram of this.

 

TriggerActionCollection

Here is a piece of code to define exit action and enter action.

  1: <Trigger Property="IsSelected" Value="True">
  2: 	<Trigger.EnterActions>
  3: 		<BeginStoryboard>
  4: 			<Storyboard>
  5: 				<DoubleAnimation Storyboard.TargetProperty="FontSize"
  6: 								From="10" To="18" Duration="0:0:2"/>
  7: 			</Storyboard>
  8: 		</BeginStoryboard>
  9: 	</Trigger.EnterActions>
 10: 	<Trigger.ExitActions>
 11: 		<BeginStoryboard>
 12: 			<Storyboard>
 13: 				<DoubleAnimation Storyboard.TargetProperty="FontSize"
 14: 								 From=" 18" To="10" Duration="0:0:2"/>
 15: 			</Storyboard>
 16: 		</BeginStoryboard>
 17: 	</Trigger.ExitActions>
 18: 	<Setter Property="FontWeight" Value="Bold"/>
 19: </Trigger>
 20: 

It is not necessary to define both exit action and enter action. We can define any one of it. Here is a complete XAML code of the program.

 

  1: <Window x:Class="WpfListBoxTrigger.Window1"
  2:     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  3:     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  4:     Title="List Box" Height="300" Width="300">
  5:     <Window.Resources>
  6:         <Style TargetType="ListBoxItem">
  7:             <Style.Triggers>
  8:                 <Trigger Property="IsSelected" Value="True">
  9:                     <Trigger.EnterActions>
 10:                         <BeginStoryboard>
 11:                             <Storyboard>
 12:                                 <DoubleAnimation Storyboard.TargetProperty="FontSize"
 13:                                                 From="10" To="18" Duration="0:0:2"/>
 14:                             </Storyboard>
 15:                         </BeginStoryboard>
 16:                     </Trigger.EnterActions>
 17:                     <Trigger.ExitActions>
 18:                         <BeginStoryboard>
 19:                             <Storyboard>
 20:                                 <DoubleAnimation Storyboard.TargetProperty="FontSize"
 21:                                                  From=" 18" To="10" Duration="0:0:2"/>
 22:                             </Storyboard>
 23:                         </BeginStoryboard>
 24:                     </Trigger.ExitActions>
 25:                     <Setter Property="FontWeight" Value="Bold"/>
 26:                 </Trigger>
 27:             </Style.Triggers>    
 28:         </Style>
 29:     </Window.Resources>
 30:     <Grid>
 31:         <ListBox Name="list" Margin="5" HorizontalContentAlignment="Stretch">
 32:             <ListBox.ItemTemplate>
 33:                 <DataTemplate>
 34:                     <Border Margin="3" BorderThickness="1" BorderBrush="Black" CornerRadius="5">
 35:                         <TextBlock Margin="3" Text="{Binding}"/>
 36:                     </Border>
 37:                 </DataTemplate>
 38:             </ListBox.ItemTemplate>
 39:         </ListBox>
 40:     </Grid>
 41: </Window>
 42: 

Here is complete C# code of the program.

  1: using System;
  2: using System.Collections.Generic;
  3: using System.Linq;
  4: using System.Text;
  5: using System.Windows;
  6: using System.Windows.Controls;
  7: using System.Windows.Data;
  8: using System.Windows.Documents;
  9: using System.Windows.Input;
 10: using System.Windows.Media;
 11: using System.Windows.Media.Imaging;
 12: using System.Windows.Navigation;
 13: using System.Windows.Shapes;
 14: 
 15: namespace WpfListBoxTrigger
 16: {
 17:     /// <summary>
 18:     /// Interaction logic for Window1.xaml
 19:     /// </summary>
 20:     public partial class Window1 : Window
 21:     {
 22:         public Window1()
 23:         {
 24:             List<String> states = new List<string>();
 25: 
 26:             states.Add("Maryland");
 27:             states.Add("California");
 28:             states.Add("Arizona");
 29:             states.Add("Washington");
 30:             states.Add("Virginia");
 31:             states.Add("Taxes");
 32: 
 33:             InitializeComponent();
 34: 
 35:             list.ItemsSource = states;
 36:         }
 37:     }
 38: }
 39: 

This is output of a program when we select any item from the list box.

ListBoxPropertyTriggerAnimation

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Categories

%d bloggers like this: