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.

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.

When you click on Zoom In Button image will enlarge.

Image2.

When click on Zoom Out image will be small.



Image3.

When click on Rotate Button.

Image4.



Image5.



Image 6.

We are done here.