How to implement PanAndZoomImage

[Daniela]

Hi
I tryed to use this control in my projects (C# and too in VB2012 projects) but I can't...I have always this problem:

"unhandled type exception  'System.NullReferenceException' in Telerik.Windows.Controls.Primitives.dll"

Imports System.Windows.Controls
Imports System.Windows.Media
Imports System.Windows

Partial Public Class zoom
    Inherits UserControl

    Public Sub New()
        InitializeComponent()
    End Sub
    Private Sub Image_Tap(sender As Object, e As System.Windows.Input.GestureEventArgs)
        Me.window.IsOpen = True  '<- on this line I recive the problem
    End Sub
End Class

[Daniela]

I solved....
Now
In to a zoomed image
How can I bind the position of a button during the zoom...I would like to have any buttons over my image but with a fixed position...too during the zooming

Please forgive my poor english

[Victor]

Hello Daniela,

You can place your buttons inside a grid and arrange them as you need. Then you can put your pan and zoom image before your buttons in the same grid. This way, the buttons will remain in a fixed position while you pan and zoom the image.

Regards,
Victor
the Telerik team

[Daniela]

Please forgive me...but how exactly?

<phone:PhoneApplicationPage
    x:Class="NeuroPath.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"
    xmlns:slideView="clr-namespace:Telerik.Windows.Controls.SlideView;assembly=Telerik.Windows.Controls.Primitives"
    xmlns:telerikPrimitives="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.Primitives"
    xmlns:telerikCore="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Core"
    mc:Ignorable="d"
    FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"
    Foreground="{StaticResource PhoneForegroundBrush}"
    d:DesignHeight="480" d:DesignWidth="480" SupportedOrientations="PortraitOrLandscape">

    <!--LayoutRoot è la griglia radice in cui viene inserito tutto il contenuto della pagina-->
    <Grid x:Name="LayoutRoot" Background="Transparent">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>

        <!--TitlePanel contiene il nome dell'applicazione e il titolo della pagina-->
        <StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
            <TextBlock x:Name="ApplicationTitle" Text="APPLICAZIONE" Style="{StaticResource PhoneTextNormalStyle}"/>
            <TextBlock x:Name="PageTitle" Text="nome pagina" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
        </StackPanel>

        <!--ContentPanel - inserire ulteriore contenuto qui-->

        <Image Grid.Row="1"
               Source="/dia4.jpg"
               Margin="12, 0, 12, 0"
               DoubleTap="Image_Tap"
               HorizontalAlignment="Left" />

        <telerikPrimitives:RadWindow IsFullScreen="True" IsOpen="False"
                                     x:Name="window">
            <telerikPrimitives:RadWindow.OpenAnimation>
                <telerikCore:RadScaleAnimation StartScaleX="0"
                                               StartScaleY="0"
                                               EndScaleX="1"
                                               EndScaleY="1"/>
            </telerikPrimitives:RadWindow.OpenAnimation>
            <telerikPrimitives:RadWindow.CloseAnimation>
                <telerikCore:RadScaleAnimation StartScaleX="1"
                                               StartScaleY="1"
                                               EndScaleX="0"
                                               EndScaleY="0"/>
            </telerikPrimitives:RadWindow.CloseAnimation>
            <Grid>

                <slideView:PanAndZoomImage Grid.Row="1"
                                           ZoomMode="Free"
                                           x:Name="panZoom"
                                           MaximumZoom="4,4"
                                           Source="/dia4.jpg"/>
                <Button Name="bnt" Padding="{Binding Padding, ElementName=panZoom}" Margin="{Binding Margin, ElementName=panZoom}" />

            </Grid>
        </telerikPrimitives:RadWindow>
        <ToolTip></ToolTip>
    </Grid>


</phone:PhoneApplicationPage>

[Victor]

Hi Daniela,

Thanks for writing.
Please explain what you mean by "a fixed position". Do you need your buttons in the same place regardless of the zoom or do you need them to move in and out as the image is zoomed?

Greetings,
Victor
the Telerik team

[Daniela]

Ok, as example: imagine that you have a photo of a human face....I need to have a button just over the left eye...I need that this button would be always over left eye too during the zoom

[Victor]

Hello Daniela,

Thank you for the clarification.
I am afraid that PanAndZoomImage does not provide such functionality out of the box. You will have to implement this manually by utilizing the information provided by the Pan and Zoom properties. With this you should be able to calculate the position of your button.

All the best,
Victor
the Telerik team