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

<Grid.RowDefinitions>

</Grid.RowDefinitions>

</StackPanel>

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