Telerik RadPanandZoomImage in Windows Phone 7

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:

<phone:PhoneApplicationPagex:Class="RadPanandZoomApplication.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" Loaded="MainPage1_Loaded">

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

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

        </StackPanel>

        <!--ContentPanel - place additional content here-->

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

    </Grid>

    </phone:PhoneApplicationPage>

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

    ContentPanel.Children.Add(obj_Zoom);

}

}

}

 
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.