How to implement PanAndZoomImage

7 posts, 1 answers
  1. Daniela
    Daniela avatar
    4 posts
    Member since:
    Feb 2013

    Posted 18 Feb 2013 Link to this post

    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
  2. Daniela
    Daniela avatar
    4 posts
    Member since:
    Feb 2013

    Posted 18 Feb 2013 Link to this post

    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
  3. DevCraft banner
  4. Victor
    Admin
    Victor avatar
    1351 posts

    Posted 19 Feb 2013 Link to this post

    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
    Have a suggestion or face a problem - you can use the Ideas & Feedback portal to submit ideas, feedback and vote for them.
  5. Daniela
    Daniela avatar
    4 posts
    Member since:
    Feb 2013

    Posted 21 Feb 2013 Link to this post

    Please forgive me...but how exactly?
    <phone:PhoneApplicationPage
        x:Class="NeuroPath.MainPage"
        xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
        xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
        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>
  6. Victor
    Admin
    Victor avatar
    1351 posts

    Posted 22 Feb 2013 Link to this post

    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
    Have a suggestion or face a problem - you can use the Ideas & Feedback portal to submit ideas, feedback and vote for them.
  7. Daniela
    Daniela avatar
    4 posts
    Member since:
    Feb 2013

    Posted 22 Feb 2013 Link to this post

    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
  8. Answer
    Victor
    Admin
    Victor avatar
    1351 posts

    Posted 25 Feb 2013 Link to this post

    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
    Have a suggestion or face a problem - you can use the Ideas & Feedback portal to submit ideas, feedback and vote for them.
Back to Top
DevCraft banner