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.

1.jpg

Image1.

When you click on Zoom In Button image will enlarge.

2.jpg

Image2.

When click on Zoom Out image will be small.

3.jpg

Image3.

When click on Rotate Button.

4.jpg

Image4.

5.jpg

Image5.

6.jpg

Image 6.

We are done here.


Similar Articles