Zooming Functionality in Windows Phone 7


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"

clock1.gif

clock2.gif

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

<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>

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">
 
    <!--LayoutRoot is the root grid where all page content is placed-->
    <Grid x:Name="LayoutRoot" Background="Transparent">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
 
        <!--TitlePanel contains the name of the application and page title-->
        <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>

    <!--ContentPanel - place additional content here-->
        <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:

img1.gif

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;
            }
        }
    }
}

Step 6 : Press F5 to run the application.

Output

  • After running the application:

img2.gif

  • Click the Zoom In button to increase the image size

img3.gif

  • Click the Zoom Out button to decrease the image size

img4.gif

Resources

Up Next
    Ebook Download
    View all
    Learn
    View all