locked
How to pinch to Zoom In and Out from CENTER for Landscape or Portrait photo

    Question

  • Problem :

    -1 )  How to pinch to Zoom In and Out from CENTER for Landscape or Portrait photo

    -2)  Where and when to start to calculate how many times the Zoom size being used? 1 X , 2X, 3X and so on?

    usin this method or other method :

    This will scroll and expand the image at 45 degree from top to bottom.
    Example : ScrollViewer size  W: 900 H: 510  and RenderTransformOrigin="0.5,0.5
           
    <ScrollViewer Grid.Row="1" x:Name="scrl" Margin="243,32,0,0" VerticalAlignment="Top" HorizontalAlignment="Left" ZoomMode="Enabled" Width="900" Height="510"  HorizontalScrollMode="Enabled" VerticalScrollMode="Enabled" HorizontalScrollBarVisibility="Visible" MinZoomFactor="0.5">

               
    <Canvas x:Name="Main"  Grid.Row="1" Background="AliceBlue" Margin="10,10,0,0" VerticalAlignment="Top"

    HorizontalAlignment="Left" Width="320" Height="180" RenderTransformOrigin="0.5,0.5" >
                   
    <Image Source="Images/sample2.JPG" Canvas.Left="0" Canvas.Top="0" Width="320" Height="180"  ></Image>
               
    </Canvas>      

     
    </ScrollViewer>

    Thanks


    • Edited by FireDance Monday, November 10, 2014 2:12 PM
    Monday, November 10, 2014 1:55 PM

Answers

  • Hi FireDance,

    >>-1 )  How to pinch to Zoom In and Out from CENTER for Landscape or Portrait photo

    Please remove the canvas control to let the image become the child of ScrollViewer control, the image will be displayed in the center of the container. This scrollviewer control will try to keep the image in its center.

    <ScrollViewer Grid.Row="1" x:Name="scrl" 
    
                              Margin="243,32,0,0"
    
                              VerticalAlignment="Center"
    
                              HorizontalAlignment="Center" 
    
                              ZoomMode="Enabled"
    
                              Width="900" 
    
                              Height="510" 
    
                              HorizontalScrollMode="Enabled" 
    
                              VerticalScrollMode="Enabled"
    
                              HorizontalScrollBarVisibility="Visible"
    
                              MinZoomFactor="0.5" Background="LightGreen">
    
                        <Image Source="Assets/sample2.JPG" Width="320" Height="180"  ></Image>
    
                </ScrollViewer>
    

    >>-2)  Where and when to start to calculate how many times the Zoom size being used? 1 X , 2X, 3X and so on?

    I cannot find any properties easily to get the zoom size you want. But I find a work around get the ExtentWidth and ExtentHeight. This two properties will change when you pinch to zoom. We can calculate to get the zoom rate.

    At last, the code snippet looks like the following.

    Create a user control to hold the scrollviewr.

    <ScrollViewer x:Name="scrl" 
    
                              Margin="243,32,0,0"
    
                              VerticalAlignment="Center"
    
                              HorizontalAlignment="Center" 
    
                              ZoomMode="Enabled"
    
                              Width="900" 
    
                              Height="510" 
    
                              HorizontalScrollMode="Enabled" 
    
                              VerticalScrollMode="Enabled"
    
                              HorizontalScrollBarVisibility="Visible"
    
                              MinZoomFactor="0.5" Background="LightGreen"   
    
                                SizeChanged="scrollViewer_SizeChanged_1"
    
                                LayoutUpdated="scrollViewer_LayoutUpdated_1">
    
            <Image x:Name="image1" Source="Assets/sample2.JPG" Width="320" Height="180" Loaded="Image_Loaded_1" 
    
                           LayoutUpdated="Image_LayoutUpdated_1" 
    
                           ImageOpened="Image_ImageOpened_1"
    
                           SizeChanged="Image_SizeChanged_1"></Image>
    
            </ScrollViewer>
    

    In User control cs file.

    private void Image_Loaded_1(object sender, RoutedEventArgs e)
    
            {
    
            }
    
            private void Image_LayoutUpdated_1(object sender, object e)
    
            {
    
            }
    
            private void Image_ImageOpened_1(object sender, RoutedEventArgs e)
    
            {
    
            }
    
            private void Image_SizeChanged_1(object sender, SizeChangedEventArgs e)
    
            {
    
                // !!! Not called on Zoom since 'Size' is the 'intrinsic' size of the UIELement
    
            }
    
            private void scrollViewer_SizeChanged_1(object sender, SizeChangedEventArgs e)
    
            {
    
                // !!! Not called on Zoom since 'Size' is the 'intrinsic' size of the UIELement
    
            }
    
            private void scrollViewer_LayoutUpdated_1(object sender, object e)
    
            {
    
                // Use Extent.Height & Extent.Width information
    
                Debug.WriteLine("{0} Image.ActualHeight:{1} Image.ActualWidth:{2} Extent.Height:{3} Extent.Width:{4}",
    
                    DateTime.Now.ToString("hh:mm:ss"),
    
                    image1.ActualHeight, image1.ActualWidth, scrl.ExtentHeight, scrl.ExtentWidth);
    
            }
    

    In MainPage XAML.

     <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    
            <local:MyUserControl1></local:MyUserControl1>
    
        </Grid>
    

    If you still have concerns, please feel free to let me know.

    Regards,


    We are trying to better understand customer views on social support experience, so your participation in this interview project would be greatly appreciated if you have time. Thanks for helping make community forums a great place. Click HERE to participate the survey.

    Tuesday, November 11, 2014 6:57 AM
    Moderator