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="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

  3:     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

  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>

 10: 

 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>

 39: 
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. 



About these ads