Posted by: Zeeshan Amjad | October 24, 2009

Using Animation with Data Binding

We saw one example of using Animation, now going to expend our study and see the animation with Data binding. In our first step we are going to do animation with a text box that is entered by the user.

In fact we have already discusses how to bind one UI element with another UI element. Now we are going to combine these two concepts.

Here is a complete XAML file for this program.

  1: <Window x:Class="LogicalResource.Window1"
  2:     xmlns=""
  3:     xmlns:x=""
  4:     Title="Animation with DataBinding" Height="300" Width="400">
  5:     <Grid Background="AliceBlue">
  6:         <Grid.RowDefinitions>
  7:             <RowDefinition/>
  8:             <RowDefinition Height="5*"/>
  9:         </Grid.RowDefinitions>
 11:         <Grid.ColumnDefinitions>
 12:             <ColumnDefinition/>
 13:             <ColumnDefinition Width="3*"/>
 14:         </Grid.ColumnDefinitions>
 15:         <TextBlock HorizontalAlignment="Center" VerticalAlignment="Center">Enter Text</TextBlock>
 16:         <TextBox Grid.Row="0" Grid.Column="1" VerticalContentAlignment="Center" Margin="5" Name="edtText"></TextBox>
 17:         <TextBlock Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="2"
 18:     TextAlignment="Center"
 19:     Foreground="Blue"
 20:     Name="txtBlock"
 21:     Text="{Binding ElementName=edtText, Path=Text}"
 22:     VerticalAlignment="Center" Margin="5"
 23:     FontSize="10">
 24:         <TextBlock.Triggers>
 25:             <EventTrigger RoutedEvent="TextBlock.Loaded">
 26:                 <BeginStoryboard>
 27:                     <Storyboard>
 28:                         <DoubleAnimation
 29:             Storyboard.TargetName="txtBlock"
 30:             Storyboard.TargetProperty="FontSize"
 31:             From="10.0" To="32.0" Duration="0:0:5" RepeatBehavior="Forever" />
 32:                     </Storyboard>
 33:                 </BeginStoryboard>
 34:             </EventTrigger>
 35:         </TextBlock.Triggers>
 36:         </TextBlock>
 37:     </Grid>
 38: </Window>

The output of the program is one edit box and whenever we type anything in it it will increase the font size of the text and keep doing it forever.

Here is the output of this program.




  1. Wonderful web site. Plenty of helpful info here. I am sending it to several pals ans also sharing in delicious. And of course, thank you to your sweat!

    • Thanks to like it.

      Best Regards
      Zeeshan Amjad

Leave a Reply

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

You are commenting using your 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


%d bloggers like this: