Stretch set to UniformToFill or ZoomMode set to FitToPhysicalSize removes part of the image and pan functionality

4 posts, 0 answers
  1. ThiefRiver
    ThiefRiver avatar
    12 posts
    Member since:
    Mar 2014

    Posted 28 May 2014 Link to this post

    Hi,

    I have a PanAndZoom control:
    <slideView:PanAndZoomImage
    Source="{Binding ImageSource}"
    Stretch="UniformToFill"
    Margin="0"
    ZoomMode="Free"
    MaximumZoom="10"
    CacheMode="BitmapCache" Canvas.ZIndex="10">
    <slideView:PanAndZoomImage.BusyIndicatorStyle>
    <Style TargetType="telerikPrimitives:RadBusyIndicator">
    <Setter Property="AnimationStyle" Value="AnimationStyle9" />
    <Setter Property="InitialDelay" Value="0:0:0" />
    <Setter Property="Content" Value="Loading..." />
    <Setter Property="Foreground" Value="{StaticResource RivetPhoneForegroundBrush}" />
    </Style>
    </slideView:PanAndZoomImage.BusyIndicatorStyle>
    </slideView:PanAndZoomImage>


    If the image is wide, ie with an aspect ratio of 16:9, I want the user to be able to pan left,right to view the entire image. If it is to tall, I want the same thing, just up and down.
    The issue however, is that the PanAndZoom control will destroy all parts of the image that are outside of what is initially rendered. If an image is outside of the view of the app, it will be gone.

    Ie:
    XXXXOOOXXXX
    XXXXOOOXXXX
    XXXXOOOXXXX
    XXXXOOOXXXX

    Where OOO is the display area of the phone, and X indicates the image outside of the view of the phone.

    Is there a way to fix/circumvent this?
  2. Rosy Topchiyska
    Admin
    Rosy Topchiyska avatar
    551 posts

    Posted 02 Jun 2014 Link to this post

    Hi Lars,

    Thank you for contacting us and sorry for the late reply.

    The problem with the Stretch="UniformToFill" property is that the initial zoom applied to the image is from the grid, not from the  PanAndZoomImage control. You can achieve the desired effect by setting a proper Zoom property depending on the image size. You can use the ImageOpened event to calculate the new Zoom factor:

    <Grid x:Name="LayoutRoot" Background="Transparent">
        <slideView:PanAndZoomImage x:Name="PanZoomImage"
                                   Source="image.png"
                                   ZoomMode="Free"           
                                   ImageOpened="PanAndZoomImage_ImageOpened"
                                   MaximumZoom="10">
        </slideView:PanAndZoomImage>
    </Grid>

    private void PanAndZoomImage_ImageOpened(object sender, RoutedEventArgs e)
    {
        var image = sender as Image;
        double horizontalZoom = this.LayoutRoot.ActualWidth / image.ActualWidth;
        double verticalZoom = this.LayoutRoot.ActualHeight / image.ActualHeight;
        this.PanZoomImage.Zoom = Math.Max(horizontalZoom, verticalZoom);
    }

    I hope this helps. Please, let us know if you have further questions.

    Regards,
    Rosy Topchiyska
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  3. DevCraft banner
  4. ThiefRiver
    ThiefRiver avatar
    12 posts
    Member since:
    Mar 2014

    Posted 02 Jun 2014 in reply to Rosy Topchiyska Link to this post

    That is brilliant! Solves 95% of the problems I have! Thanks Rosy!

    Any chance of helping me add a PanZoomImage.Pan function to center it after zooming? 
  5. ThiefRiver
    ThiefRiver avatar
    12 posts
    Member since:
    Mar 2014

    Posted 02 Jun 2014 in reply to ThiefRiver Link to this post

    Scratch that. The zoom is in center. Just the image I was using for the Pazi control that was kinda weird.

    Thanks a lot for the help Rose. I really appreciate it!
Back to Top