Silverlight:A Simple Image ZoomIn Animation

The article describes how we can create a simple Image zoom in and zoom out animation using Silverlight. The interesting thing in Silverlight is most of the animation control we can handle from markup language called XAML.  In order to achieve this we  have to use the StoryBoard & DoubleAnimation class. I am going to write a little XAML code on below.  You can download the  article source code from the bottom of the page.

Click here to view the “Live Demo”

<UserControl.Resources>
<Storyboard x:Name=”storyboard” Storyboard.TargetName=”image1″>
<DoubleAnimation Storyboard.TargetProperty=”Width” To=”600″ Duration=”0:0:2″></DoubleAnimation>
<DoubleAnimation Storyboard.TargetProperty=”Height” To=”600″ Duration=”0:0:5″></DoubleAnimation>
</Storyboard>
</UserControl.Resources>

In the Storyboard mark up you can see a attribute called Storyboard.TargetName which is the target control name. Here I am going to use the Image control because that is the target control which we are doing the animation.  The next markup is DoubleAnimation we should mention what attribute we want to animate may be width or height or opacity that depends on the Target Control attributes. Here I am going to ZoomIn  the Image so I have to use width and height properties and finally duration will control the time delay.

<Grid x:Name=”LayoutRoot” Width=”610″ Height=”610″>
<Image Height=”40″ Source=”Tulips.jpg” HorizontalAlignment=”Left”   Name=”image1″  VerticalAlignment=”Top” Width=”50″ />
<Button Content=”Zoom In” Height=”23″ HorizontalAlignment=”Left” Margin=”12,469,0,0″ Name=”btnZoomIn” VerticalAlignment=”Top” Width=”75″ Click=”ZoomIn_Click” />
<Button Content=”Zoom Out” Height=”23″ HorizontalAlignment=”Left” Margin=”97,468,0,0″ Name=”btnZoomOut” VerticalAlignment=”Top” Width=”75″ Click=”ZoomOut_Click” />
</Grid>

The above XAML has a Image cotrol which simply binds the Image name to the source attribute and two buttons for zoomIn and zoomOut functionaly.

XAML code behind

private void ZoomIn_Click(object sender, RoutedEventArgs e)
{
storyboard.Begin();
}

private void ZoomOut_Click(object sender, RoutedEventArgs e)
{
storyboard.Stop();
}

=====
The above method will have the functionality to start and stop the story board class.

That’s all we are ready to go now.. Live Demo

You can download the entire article from here or copy paste this URL

http://www.4shared.com/file/231292567/f6cf7ffe/ImageZoonInAnimations.html  in to your browser.

Hope this help and If you have any comments, please feel free to write your feedback.

Thanks
Deepu