c# - How to resize ScrollView when scaling inner AbsoluteLayout?

Question

Working with Xamarin.Forms 5.0, all platforms (iOS, Android and UWP).

Inside a ScrollView, I've put an AbsoluteLayout with an image. When I scale the AbsoluteLayout the ScrollView doesn't resize according to the new size of the AbsoluteLayout/image. As a result, when zooming in image gets "cropped" and when zooming out a lot of "empty margins" appear.

I've done a simple example showing this case in the simplest possible way:

MainPage.xaml:

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="ImageZoomExample.MainPage">
    <StackLayout>
        <ScrollView Orientation="Both">
            <AbsoluteLayout x:Name="AbsLayoutCtrl">
                <Image Source="https://upload.wikimedia.org/wikipedia/commons/d/dc/Grumpy_Cat_%2814556024763%29_%28cropped%29.jpg" />
            </AbsoluteLayout>
        </ScrollView>
        <Slider x:Name="SliderCtrl" HorizontalOptions="Fill" Minimum="-4" Value="0" Maximum="5" ValueChanged="SliderCtrl_ValueChanged" />
    </StackLayout>
</ContentPage>

MainPage.xaml.cs:

using Xamarin.Forms;

namespace ImageZoomExample
{
    public partial class MainPage : ContentPage
    {
        public MainPage()
        {
            InitializeComponent();
        }
        private void SliderCtrl_ValueChanged(object sender, ValueChangedEventArgs e)
        {
            double scale;
            if (e.NewValue < 0)
            {
                scale = 1 / (1 - e.NewValue);
            }
            else
            {
                scale = 1 + e.NewValue;
            }
            AbsLayoutCtrl.Scale = scale;
        }
    }
}

How can I resize properly the ScrollView when zooming in/out?

question from:https://stackoverflow.com/questions/65865521/how-to-resize-scrollview-when-scaling-inner-absolutelayout

Answer 1

Waitting for answers