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&#8221;
xmlns:x=”http://schemas.microsoft.com/winfx/2006/xaml&#8221;
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&#8243;
xmlns:mc=”http://schemas.openxmlformats.org/markup-compatibility/2006&#8243;
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”>

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

Advertisements

Leave a Reply

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

WordPress.com Logo

You are commenting using your WordPress.com 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