How to use Image Zoom In, Zoom Out, and Rotate in Silverlight 4

This article will demonstrate Image Zoom In, Zoom Out, Rotate functionality in Silverlight 4. First of all make a new silverlight project using visual studio 2010 and place a project name and save location in local directory.

Let's drag and drop one image control and three button on page and add an image using Add Existing Items menu click.

<UserControl x:Class="TestStoryBoard.Test"

   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">

    <Grid x:Name="mainCanvas" Height="404" Width="733" Background="Black">

        <Grid.ColumnDefinitions>

            <ColumnDefinition />

            <ColumnDefinition Width="Auto" MinWidth="95" />

        </Grid.ColumnDefinitions>

        <Grid x:Name="grid1" Height="400" Width="636" HorizontalAlignment="Center" VerticalAlignment="Center">

            <Image x:Name="image1" 

               Source="orton-nomercy07.jpg" 

               Stretch="Uniform" 

               HorizontalAlignment="Center" VerticalAlignment="Center" 

               RenderTransformOrigin="0.5, 0.5">

                <Image.RenderTransform>

                    <TransformGroup>

                        <RotateTransform x:Name="Rotator"/>

                        <ScaleTransform x:Name="Scale" />

                    </TransformGroup>

                </Image.RenderTransform>

            </Image>

        </Grid>

        <StackPanel Grid.Column="1" Margin="0,2,3,0" VerticalAlignment="Top" Height="81">

            <Button x:Name="ZoomInButton" Click="ZoomInButton_Click" Content="Zoom In" Height="25" FontWeight="Bold"FontStyle="Italic" >

              <Button.Background>

                     <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">

                           <GradientStop Color="Black" Offset="0"/>

                           <GradientStop Color="#FFE21E1E" Offset="1"/>

                     </LinearGradientBrush>

              </Button.Background>

            </Button>

            <Button x:Name="ZoomOutButton" Click="ZoomOutButton_Click" Content="Zoom Out" FontWeight="Bold"FontStyle="Italic" >

              <Button.Background>

                     <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">

                           <GradientStop Color="Black" Offset="0"/>

                           <GradientStop Color="#FFAF1F1F" Offset="1"/>

                     </LinearGradientBrush>

              </Button.Background>

            </Button>

            <Button x:Name="RotateButton" Click="RotateButton_Click" Content="Rotate" FontWeight="Bold" >

              <Button.Background>

                     <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">

                           <GradientStop Color="Black" Offset="0"/>

                           <GradientStop Color="#FFB41C1C" Offset="1"/>

                     </LinearGradientBrush>

              </Button.Background>

            </Button>

        </StackPanel>

    </Grid>

</UserControl>

Code Behind:

private double angle = 90;

private void ZoomInButton_Click(object sender, RoutedEventArgs e)

        {

            Scale.ScaleX += 0.25;

            Scale.ScaleY += 0.25;

        }

        private void ZoomOutButton_Click(object sender, RoutedEventArgs e)

        {

            if (Scale.ScaleX > 0.25)

            {

                Scale.ScaleX -= 0.25;

                Scale.ScaleY -= 0.25;

            }

        }

        private void RotateButton_Click(object sender, RoutedEventArgs e)

        {

            Rotator.Angle += angle;

            if (Rotator.Angle == 360)

                Rotator.Angle = 0;

        }

Now run the application and see the result.

Image1.

READ MORE >>
http://www.c-sharpcorner.com/UploadFile/raj1979/4081/