Let’s create a simple animation shown below. We will create a rectangle object whose height will increase in an animated manner. You can see from the below figure how the animation will look like. We will execute this animation using ‘DoubleAnimation’ object
Figure :- Rectangle height animation
So the first step is to define the rectangle object. Below is the XAML code snippet for which defines the rectangle object with height and width equal to 100 and chocolate background.
<Grid x:Name="LayoutRoot" Background="White">
<Rectangle x:Name="RectAnimated" Fill="Chocolate" Stroke="Black"
Width="100" Height="100">
</Rectangle>
</Grid>
As a second step we need to define when the animation will be trigger. You can see from the below code snippet we have defined that the story board will be invoked when the rectangle object is loaded.
<Grid x:Name="LayoutRoot" Background="White">
<Rectangle x:Name="RectAnimated" Fill="Chocolate" Stroke="Black"
Width="100" Height="100">
<Rectangle.Triggers>
<EventTrigger RoutedEvent="Rectangle.Loaded">
<BeginStoryboard>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Rectangle.Triggers>
</Rectangle>
</Grid>
Finally we have put in the ‘DoubleAnimation’ object which uses the ‘Height’ as the target property which will be animated ‘100’ value to ‘300’ value in 5 seconds. Also note that target name is the rectangle object ‘RectAnimated’. We have also define ‘AutoReverse’ as ‘true’ which means once it reaches ‘300’ it will restart from ‘100’.
<Grid x:Name="LayoutRoot" Background="White">
<Rectangle x:Name="RectAnimated" Fill="Chocolate" Stroke="Black"
Width="100" Height="100">
<Rectangle.Triggers>
<EventTrigger RoutedEvent="Rectangle.Loaded">
<BeginStoryboard>
<Storyboard x:Name="myStoryboard">
<DoubleAnimation
Storyboard.TargetName="RectAnimated"
Storyboard.TargetProperty="Height"
From="100" By="300" Duration="0:0:5"
AutoReverse="True"
RepeatBehavior="Forever" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Rectangle.Triggers>
</Rectangle>
</Grid>
Asked In: Many Interviews |
Alert Moderator