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

Advertisements

One thought on “Silverlight:A Simple Image ZoomIn Animation

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