AbsoluteLayout-Improper sizing for content.

bcafazzobcafazzo USMember ✭✭

I'm trying to add some overlays to an image container using Xamarin Forms. The image container will contain three elements: the image, an activity indicator (centered on the image) and an "expand" button located in the bottom-right corner.

I am attempting to do this via an AbsoluteLayout (sampled below), but I have been fighting with some strange behavior: the AbsoluteLayout itself has boundaries much bigger than the content of the layout (screenshots also included below.)

I'm not quite sure what the best approach to this would be. I would like to ensure the AbsoluteLayout isn't producing unneeded white space but I also do not wish to put hard limits on the images themselves.

The following sample code recreates the issue (with background colors added to illustrate the bounds of the elements.) The attached screenshot is running an Android implementation of this demonstration. The iOS version has significantly larger whitespace.

    public class AbsoluteTestPage : ContentPage
    {
        public AbsoluteTestPage()
        {
            var image = new Image { Source = "bf3b6433.jpg", BackgroundColor = Color.Red };
            var activity = new ActivityIndicator { IsRunning = true, Color = new Color(0.8), BackgroundColor = Color.Yellow };
            var fullscreen = new Image { Source = "fa_expand_outlined.png", BackgroundColor = Color.Pink };
            var absoluteLayout = new AbsoluteLayout { BackgroundColor = Color.White };

            var scrollView = new ScrollView();
            var stackLayout = new StackLayout();

            absoluteLayout.Children.Add(image, new Rectangle(0.5, 0.5, AbsoluteLayout.AutoSize, AbsoluteLayout.AutoSize), AbsoluteLayoutFlags.PositionProportional);
            absoluteLayout.Children.Add(activity, new Rectangle(0.5, 0.5, AbsoluteLayout.AutoSize, AbsoluteLayout.AutoSize), AbsoluteLayoutFlags.PositionProportional);
            absoluteLayout.Children.Add(fullscreen, new Rectangle(1, 1, 50, 50), AbsoluteLayoutFlags.PositionProportional);
            absoluteLayout.VerticalOptions = LayoutOptions.Start;

            stackLayout.Children.Add(absoluteLayout);
            stackLayout.Children.Add(new Label { Text = "Remaining." });

            scrollView.Content = stackLayout;

            Content = scrollView;
        }
    }

The sample image is 1822x1496.

I appreciate any thoughts you may have on the issue.

Best Answer

Answers

Sign In or Register to comment.