ZoomIn ZoomOut using Silver Light

Hi There,

There is a very good option of doing animation in the silver light. We just need to explore them while doing some task i get an article where i have seen such feature so here in this post i m describing you that how can we create the ZoomIn & ZoomOut feature using the silver light. There is a object called "Double Animation" i have used the same for creating this feature. A story board is used to handle the object and inside the double animation we have simply set the height and width and the duration for sliding effect.

please use the following XAML code for the same. you can simply copy and paste the below code in the XAML file of the application.

UserControl x:Class="ZooInOut.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
d:DesignHeight="507" d:DesignWidth="564">
UserControl.Resources>
x:Name="storyboard" Storyboard.TargetName="image1">
DoubleAnimation Storyboard.TargetProperty="Width" To="600" Duration="0:0:2">
>
DoubleAnimation Storyboard.TargetProperty="Height" To="600" Duration="0:0:5">>
>
>

Grid x:Name="LayoutRoot" Width="610" Height="610">
Image Height="40" HorizontalAlignment="Left" Name="image1" VerticalAlignment="Top" Width="50" Margin="0,42,0,0" />
Button Content="Zoom In" Height="35" HorizontalAlignment="Left" Name="btnZoomIn" VerticalAlignment="Top" Width="94" Margin="0,472,0,0" Click="btnZoomIn_Click" />
Button Content="Zoom Out" Height="35" HorizontalAlignment="Left" Name="btnZoomOut" VerticalAlignment="Top" Width="94" Margin="114,472,0,0" Click="btnZoomOut_Click" />
Button Content=" Load Image" HorizontalAlignment="Right" Width="94" Name="btnLoad" Margin="0,472,288,103" Click="btnLoad_Click" />
>

>

(Due to browser problem the starting "<" symbol is clipped, please add them before building the applciation.)

Here we have a taken 3 buttons for ZoomIn, ZoomOut and Load. In the code we simply set the story board as start and stop. Please check the following code for the rest.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using System.IO;
using System.Windows.Media.Imaging;

namespace ZooInOut
{
public partial class MainPage : UserControl
{
public MainPage()
{
InitializeComponent();
}


private void btnLoad_Click(object sender, RoutedEventArgs e)
{
OpenFileDialog fd1 = new OpenFileDialog();
// fd1.Filter = "Image File (*.JPEG)|*.JPEG"; // You can apply filter for various image format.
if (fd1.ShowDialog() == true)
{
BitmapImage imageSource = new BitmapImage();
imageSource.SetSource(fd1.File.OpenRead());
image1.Source = imageSource;
}
}

private void btnZoomIn_Click(object sender, RoutedEventArgs e)
{

storyboard.Begin();
}

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

Isn't it Easy?? Yeah this is simple we can explore more option using the animation. In this post i have simply describe the zoom in feature will come up with more option soon. Please fell free to post the comment, i am waiting for the comments.

Thanks
Anil Kumar Pandey
Micorsoft MVP (C#)
Navi Mumbai,
Maharashtra