Enlarge image in WP8.1

Question

I have a full screen image using this code:

<phone:PhoneApplicationPage x:Class="solution.FullScreenViewer" 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" FontFamily="{StaticResource PhoneFontFamilyNormal}" FontSize="{StaticResource PhoneFontSizeNormal}" Foreground="{StaticResource PhoneForegroundBrush}" SupportedOrientations="PortraitOrLandscape" Orientation="Portrait" mc:Ignorable="d" shell:SystemTray.IsVisible="True"> <Image Name="img" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"Stretch="Uniform"/> </phone:PhoneApplicationPage> 

This is just part of a larger project. I wanted to implement te feture to open an image in full screen after clicking on it, so that I would make another page with one image and nothing else. I am loading an image from C # using this code:

  protected override void OnNavigatedTo(NavigationEventArgs e) { string context = this.NavigationContext.QueryString["context"]; img.Source = new BitmapImage(new Uri(context, UriKind.RelativeOrAbsolute)); base.OnNavigatedTo(e); } 

Now I would like to add an option to increase the image, but I do not know how to do it. I also tried Google, but the only thing I found was to use ZoomMode in ScroolViewer, which does not work for me (it says that the ZoomMode member is not recognized).

Is there any other solution to increase?

Answer 1

Instead of using the image you can use a grid that has another grid. In the second grid, use Grid.RenderTransform to change its contents (image in the grid) using scaling. You can use the ManipulationDelta event to track zooming in or out.

Using this, you can simply enlarge the image, but it is not very nice because you are concentrated only in the upper left corner of the image. To avoid this, you can allow the user to scroll the image by adding the transformed transform in the image rendering transform tag. You can see how to do this in the code below:

 <Grid x:Name="LayoutRoot" ManipulationDelta="LayoutRoot_ManipulationDelta"> <Grid x:Name="ContentPanel"> <Grid x:Name="imageGrid"> <Grid.RenderTransform> <ScaleTransform x:Name="ImageTransform" /> </Grid.RenderTransform> <Image x:Name="img" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" Stretch="Uniform" Source="/Resources/Logo/CTK .png" ManipulationDelta="img_ManipulationDelta" ManipulationCompleted="img_ManipulationCompleted"> <Image.RenderTransform> <TranslateTransform x:Name="PanTransform"/> </Image.RenderTransform> <Image.Resources> <Storyboard x:Name="Pan"> <DoubleAnimation x:Name="PanAnimation" Storyboard.TargetName="PanTransform" Storyboard.TargetProperty="X" Duration="0:0:1"> <DoubleAnimation.EasingFunction> <CircleEase EasingMode="EaseOut" /> </DoubleAnimation.EasingFunction> </DoubleAnimation> </Storyboard> </Image.Resources> </Image> </Grid> </Grid> </Grid> 

And this is the C # code for scaling and translation:

  private void LayoutRoot_ManipulationDelta(object sender, System.Windows.Input.ManipulationDeltaEventArgs e) { if (e.DeltaManipulation.Scale.X > 0.0 && e.DeltaManipulation.Scale.Y > 0.0) { // Scale in the X direction double tmp = ImageTransform.ScaleX * ((e.DeltaManipulation.Scale.X + e.DeltaManipulation.Scale.Y) / 2); if (tmp < 1.0) tmp = 1.0; else if (tmp > 4.0) tmp = 4.0; ImageTransform.ScaleX = tmp; // Scale in the Y direction tmp = ImageTransform.ScaleY * ((e.DeltaManipulation.Scale.X + e.DeltaManipulation.Scale.Y) / 2); if (tmp < 1.0) tmp = 1.0; else if (tmp > 4.0) tmp = 4.0; ImageTransform.ScaleY = tmp; } } private void img_ManipulationDelta(object sender, System.Windows.Input.ManipulationDeltaEventArgs e) { // First make sure we're translating and not scaling (one finger vs. two) if (e.DeltaManipulation.Scale.X == 0.0 && e.DeltaManipulation.Scale.Y == 0.0) { Image photo = sender as Image; TranslateTransform transform = photo.RenderTransform as TranslateTransform; // Compute the new X component of the transform double x = transform.X + e.DeltaManipulation.Translation.X; double y = transform.Y + e.DeltaManipulation.Translation.Y; // Apply the computed value to the transform transform.X = x; transform.Y = y; } } private void img_ManipulationCompleted(object sender, System.Windows.Input.ManipulationCompletedEventArgs e) { if (e.IsInertial) { Image photo = sender as Image; // Compute the inertial distance to travel double dx = e.FinalVelocities.LinearVelocity.X / 10.0; double dy = e.FinalVelocities.LinearVelocity.Y / 10.0; TranslateTransform transform = photo.RenderTransform as TranslateTransform; double x = transform.X + dx; double y = transform.Y + dy; // Apply the computed value to the animation PanAnimation.To = x; // Trigger the animation Pan.Begin(); } } 

Answer 2

You can scale the application scale as follows:

 public static void ZoomToRatio(double ratio) { ScaleTransform transform = new ScaleTransform() { ScaleX = ratio, ScaleY = ratio, }; double height = 0.0; double width = 0.0; if (ratio < 1.0) { height = Application.Current.Host.Content.ActualHeight * ratio; width = Application.Current.Host.Content.ActualWidth * ratio; } else { height = Application.Current.Host.Content.ActualHeight / ratio; width = Application.Current.Host.Content.ActualWidth / ratio; } Application.Current.RootVisual.SetValue(Canvas.HeightProperty, height); Application.Current.RootVisual.SetValue(Canvas.WidthProperty, width); Application.Current.RootVisual.RenderTransform = transform; }