locked
AbsoluteLayout-Improper sizing for content. RRS feed

  • Question

  • User184914 posted

    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 = "faexpandoutlined.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.

    Monday, June 20, 2016 10:25 PM

Answers

  • User184914 posted

    I discovered that the AbsoluteLayout was actually rendering a proper size to display the image, but it was being clipped to the bounds of the screen, and the Image itself was being rendered to fit the clipped boundaries.

    i.e.: the image was 1822x1496. The AbsoluteLayout was 1822x1496. But the screen was 1080x1920. The actual visible area for the AbosluteLayout was 1080x1496, so the image was being rendered at ~1080x887, causing the white space to be rendered.

    iOS had significantly larger white space because my Android device has a pixel density of 3, meaning the 1822x1496 image was actually ~607x498, the layout was ~607x498, the screen was 360x640, etc.

    So in a nutshell I created an extension of AbsoluteLayout that would get the actual boundaries of the container (in this case, the screen size), which would call the default OnSizeRequest, then scale that result so it would fix the aforementioned boundaries.

    • Marked as answer by Anonymous Thursday, June 3, 2021 12:00 AM
    Tuesday, June 21, 2016 5:47 PM