This is a migrated thread and some comments may be shown as answers.

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

3 Answers 78 Views
PanAndZoomImage
This is a migrated thread and some comments may be shown as answers.
This question is locked. New answers and comments are not allowed.
ThiefRiver
Top achievements
Rank 1
ThiefRiver asked on 28 May 2014, 11:13 AM
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?

3 Answers, 1 is accepted

Sort by
0
Rosy Topchiyska
Telerik team
answered on 02 Jun 2014, 01:08 PM
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.

 
0
ThiefRiver
Top achievements
Rank 1
answered on 02 Jun 2014, 01:46 PM
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? 
0
ThiefRiver
Top achievements
Rank 1
answered on 02 Jun 2014, 01:52 PM
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!
Tags
PanAndZoomImage
Asked by
ThiefRiver
Top achievements
Rank 1
Answers by
Rosy Topchiyska
Telerik team
ThiefRiver
Top achievements
Rank 1
Share this question
or