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.
<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>
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” />
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)
private void ZoomOut_Click(object sender, RoutedEventArgs e)
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.