Zooming Functionality in Windows Phone 7

Shubham Srivastava
Mar 02, 2012

13.7k
0
0
- facebook
- twitter
- linkedIn
- Reddit
- WhatsApp
- Email
- Print
- Other Artcile

Introduction

In this article we will explore how we can create a zooming functionality to images in a Windows Phone 7 application. To do this, first of all we will take an Image control to display an image and two buttons for zooming in and zooming out. Set the source property of the image control in the property windows and add an image in the project from existing items. If the Source property is set to an invalid format, or is specified to an ImageSource that was not properly constructed, then the ImageFailed event is raised. The size of an Image control should sometimes be contingent upon the content of the image, or the role of the image in the view. Don't favor large images out of principle, but do use large, high-quality images in your controls if they improve the clarity and beauty of your application. Image controls are flexible and can interact with other controls in a variety of ways. They can be used in cooperation with (or in some cases, in lieu of) controls like the Button or CheckBox control.

Step 1 : Open Visual Studio.

Select new -> project
Select your preferred language
Select Silverlight for Windows Phone application
Name the project
Now name of project is "WindowsPhoneApplication"

Step 2 : Open the Toolbox of the Windows Phone application.

Drag and Drop from ToolBox a Image Control on MainPage.xaml file.
Drag and Drop from ToolBox two buttons control on MainPage.xaml file.

Code

Step 3 : The whole code of the MainPage.xaml page is:

Code

<phone:PhoneApplicationPage
   x:Class="PhoneApp2.MainPage"
   xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
   xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
   xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
   xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
   xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
   mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="768"
   FontFamily="{StaticResource PhoneFontFamilyNormal}"
   FontSize="{StaticResource PhoneFontSizeNormal}"
   Foreground="{StaticResource PhoneForegroundBrush}"
   SupportedOrientations="Portrait" Orientation="Portrait"
   shell:SystemTray.IsVisible="True">

    
    <Grid x:Name="LayoutRoot" Background="Transparent">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>

        
        <StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
            <TextBlock x:Name="ApplicationTitle" Text="MY APPLICATION" Style="{StaticResource PhoneTextNormalStyle}"/>
            <TextBlock x:Name="PageTitle" Text="zoom In/zoom out" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}" FontSize="56" />
        </StackPanel>

    
        <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
            <Image Height="264" HorizontalAlignment="Left" Margin="126,79,0,0" Name="image1" Stretch="Fill" VerticalAlignment="Top" Width="200" Source="/PhoneApp2;component/Images/Penguins.jpg" />
            <Button Content="Zoom In" Height="72" HorizontalAlignment="Left" Margin="25,497,0,0" Name="button1" VerticalAlignment="Top" Width="146" Click="zoom_in" />
            <Button Content="Zoom Out" Height="72" HorizontalAlignment="Left" Margin="238,497,0,0" Name="button2" VerticalAlignment="Top" Width="171" Click="zoom_out"/>
        </Grid>
    </Grid>
</phone:PhoneApplicationPage>

At design time the application looks like:

Step 4 : To manipulate the Click event of buttons, we will customize the source code of the MainPage.xaml.cs file.

Code

    private void zoom_out(object sender, RoutedEventArgs e)
        {
            if(j>0)
            {
                image1.Height -= 50;
                image1.Width -= 50;
                j--;
                i = j;
            }
        }
   private void zoom_in(object sender, RoutedEventArgs e)
        {
           if(i<2)
            {
                image1.Height += 50;
                image1.Width += 50;
                i++;
                j = i;
            }
        }

Step 5 : The final source code of the MainPage.xaml.cs file is:

Code

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using Microsoft.Phone.Controls;

namespace PhoneApp2
{
    public partial class MainPage : PhoneApplicationPage
    {
        int i = 0;
        int j = 0;// Constructor
        public MainPage()
        {
            InitializeComponent();
        }

        private void zoom_out(object sender, RoutedEventArgs e)
        {
            if(j>0)
            {
                image1.Height -= 50;
                image1.Width -= 50;
                j--;
                i = j;
            }
        }

        private void zoom_in(object sender, RoutedEventArgs e)
        {
           if(i<2)
            {
                image1.Height += 50;
                image1.Width += 50;
                i++;
                j = i;
            }
        }
    }
}