Question: What is a RadPanandZoomImage?

In simple terms “PanAndZoomImage is a control that allows zooming and panning of an image either through gestures or programmatically”.

I think we are now good to go and implement this wonderful concept.

Step 1: The complete code of MainPage.xaml looks like this:

mc:Ignorable=”d” d:DesignWidth=”480″ d:DesignHeight=”768″ FontFamily=”{StaticResourcePhoneFontFamilyNormal}” FontSize=”{StaticResource PhoneFontSizeNormal}”Foreground=”{StaticResource PhoneForegroundBrush}”SupportedOrientations=”Portrait”Orientation=”Portrait”shell:SystemTray.IsVisible=”True” Loaded=”MainPage1_Loaded”>

    <!–LayoutRoot is the root grid where all page content is placed–>

    <Grid x:Name=”LayoutRoot” Background=”Transparent”>


            <RowDefinition Height=”Auto”/>

            <RowDefinition Height=”*”/>


        <!–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=”RadPanandZoom-Application” Style=”{StaticResource PhoneTextNormalStyle}”/>

            <TextBlock x:Name=”PageTitle” Text=”Windows 7 Phone” Margin=”9,-7,0,0″ Style=”{StaticResource PhoneTextTitle1Style}”/>


        <!–ContentPanel – place additional content here–>

        <Grid x:Name=”ContentPanel” Grid.Row=”1″ Margin=”12,0,12,0″></Grid>



Step 2: The complete code of MainPage.xaml.cs looks like this:

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.Media.Imaging;

using System.Windows.Shapes;

using Microsoft.Phone.Controls;

using Telerik.Windows.Controls.SlideView;namespace RadPanandZoomApplication


public partial class MainPage : PhoneApplicationPage


        // Constructorpublic MainPage(){InitializeComponent();


public void MainPage1_Loaded(object sender, RoutedEventArgs e)


PanAndZoomImage obj_Zoom = new PanAndZoomImage();

obj_Zoom.Source = new BitmapImage(new Uri(“d0014511d1392b833cacffc6efe95ce6_XL.jpg”, UriKind.Relative));

obj_Zoom.ZoomMode = ImageZoomMode.Free;

obj_Zoom.Pan = new Point(300, 200);

obj_Zoom.MaximumZoom = new Point(5, 5);





Step 3:
 The output of the application looks like this:

Step 4:
 The output of the zoomed application looks like this:

I hope this article is useful for you.


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s