Winrt ScrollViewer after zooming can't scroll the whole image

Question

I created an Winrt (Windows 8.1) app with c#/xaml where I display images. If I want to zoom these images with touch It's working but I can't scroll to the right side (vertically) completely. A little bit will cut of.

But if I keep touching and moving my hand forward I can see the missing part. If I stop touching the image goes back und I can't see the missing part.

<Grid Background="{ThemeResource BackgroundBrush}"
    DataContext="{Binding ShortcutItem}" x:Name="rootGrid">

    <Grid.RowDefinitions>
        <RowDefinition Height="140"/>
        <RowDefinition Height="*"/>
        <RowDefinition Height="70"/>
    </Grid.RowDefinitions>

    <!-- Header: Back button and page title -->
    <Grid  Grid.ColumnSpan="2">
        <!--Titel-->
        <!--Logo-->
    </Grid>

    <!--Content: Details for selected item -->
    <Grid x:Name="itemDetailGrid" 
          Margin="10,10,10,10" 
          Grid.Row="1"
          Grid.RowSpan="1" 
          DataContext="{Binding Source={StaticResource itemsViewSource}}">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>

        <ScrollViewer 
        Grid.Row="1" 
        HorizontalScrollMode="Enabled"
        HorizontalScrollBarVisibility="Auto"
        VerticalScrollMode="Enabled"
        VerticalScrollBarVisibility="Auto"
        ZoomMode="Enabled"
        MinZoomFactor="1.0"
        MaxZoomFactor="2.0">
            <ItemsControl 
                ItemsSource="{Binding DocumentPages}">
                    <ItemsControl.ItemTemplate>
                        <DataTemplate>
                            <Grid >
                                <Border BorderBrush="{StaticResource ListViewItemPlaceholderBackgroundThemeBrush}" BorderThickness="0,0,0,5" >
                                    <Image Source="{Binding Content}" Stretch="None" />
                                </Border>
                            </Grid>
                        </DataTemplate>
                    </ItemsControl.ItemTemplate>
            </ItemsControl >
        </ScrollViewer>
    </Grid>

    <!--Footer-->

</Grid>

I tested an lot of things with padding, margin and other layout Options but I can't get full view.

I hope somebody can help me.

Answer 1

try this:

using System;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Media;

namespace MyProject.Extensions
{
    public class ImageInScrollView : DependencyObject
    {
        public static readonly DependencyProperty HandlerEnabledProperty =
            DependencyProperty.RegisterAttached("HandlerEnabled", typeof(bool), typeof(Image), new PropertyMetadata(false, OnHandlerEnabledChanged));
        public static void SetHandlerEnabled(DependencyObject obj, object value)
        {
            obj.SetValue(HandlerEnabledProperty, value);
        }
        public static object GetHandlerEnabled(DependencyObject obj)
        {
            return obj.GetValue(HandlerEnabledProperty);
        }
        private static void OnHandlerEnabledChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
        {
            Image image = (d as Image);
            bool HandlerEnabled;
            bool.TryParse(e.NewValue.ToString(), out HandlerEnabled);
            if (HandlerEnabled)
            {
                image.ImageOpened -= ImageOpenedInScrollViewer;
                image.ImageOpened += ImageOpenedInScrollViewer;
                image.Stretch = Stretch.None;
            }
            else
            {
                image.ImageOpened -= ImageOpenedInScrollViewer;
            }
        }

        private static void ImageOpenedInScrollViewer(object sender, Windows.UI.Xaml.RoutedEventArgs e)
        {
            Image image = sender as Image;

            ScrollViewer parentScrollView = GetParentScrollView(image.Parent as FrameworkElement);
            if(parentScrollView == null)
                return;

            parentScrollView.IsScrollInertiaEnabled = true;
            parentScrollView.SizeChanged -= ParentScrollView_SizeChanged;
            parentScrollView.SizeChanged += ParentScrollView_SizeChanged;

            ImageUpdateHandler(image, parentScrollView);
        }

        private static void ImageUpdateHandler(Image image, ScrollViewer scrollView)
        {
            if(image == null || scrollView == null)
                return;

            if (image.ActualWidth < 0.001 || image.ActualHeight < 0.001)
            {
                image.SizeChanged += image_SizeChanged;
                return;
            }

            image.Width = image.ActualWidth;
            image.Height = image.ActualHeight;

            float minZoomFactor = (float)Math.Min(
                    scrollView.ViewportWidth / image.ActualWidth,
                    scrollView.ViewportHeight / image.ActualHeight);
            if (Math.Abs(scrollView.MinZoomFactor - minZoomFactor) < 0.001)
                return;

            scrollView.MinZoomFactor = minZoomFactor;
            scrollView.ChangeView(null, null, scrollView.MinZoomFactor, true);
        }

        static void image_SizeChanged(object sender, SizeChangedEventArgs e)
        {
            var image = sender as Image;
            image.SizeChanged -= image_SizeChanged;
            ScrollViewer parentScrollView = GetParentScrollView(image.Parent as FrameworkElement);
            if (parentScrollView == null)
                return;

            ImageUpdateHandler(image, parentScrollView);
        }

        static void ParentScrollView_SizeChanged(object sender, SizeChangedEventArgs e)
        {
            var scrollView = sender as ScrollViewer;
            var image = Helper.FindFirstChild<Image>(scrollView);
            ImageUpdateHandler(image, scrollView);
        }

        private static ScrollViewer GetParentScrollView(FrameworkElement parent)
        {
            ScrollViewer parentScrollView;
            while ((parentScrollView = parent as ScrollViewer) == null)
            {
                parent = parent.Parent as FrameworkElement;
                if (parent == null)
                    return null;
            }
            return parentScrollView;
        }
    }
}

usage in your xaml:

<ScrollViewer ZoomMode="Enabled" VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Auto">
    <Image Source="your_source" extensions:ImageInScrollView.HandlerEnabled="true"/>
</ScrollViewer>

don't forget to add namespace in xaml :

xmlns:extensions="using:MyProject.Extensions"

you might find this answer interesting