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.