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

Raj Kumar
14y
37k
0
0

Article

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.