How to properly use an AbsoluteLayout inside a StackLayout inside a ScrollView?

dpedrinhadpedrinha DEMember ✭✭✭
edited April 2016 in Xamarin.Forms

OK, I give up. 3 days spent trying to accomplish this simple thing.

Here is my scenario (not all on the same xaml file):


This is the CarouselContentPage:

<ContentPage xmlns=""
    <ScrollView Orientation="Vertical" BackgroundColor="Navy" VerticalOptions="Fill">
      <StackLayout x:Name="MyStackLayout" HorizontalOptions="StartAndExpand" VerticalOptions="Start" BackgroundColor="Gray">
        <Label x:Name="NameLabel" FontSize="Medium" HorizontalOptions="Center"/>
        <Label x:Name="DescLabel" FontSize="Medium" HorizontalOptions="Center" />
        <AbsoluteLayout x:Name="ImgsContainer" VerticalOptions="Start" BackgroundColor="Green">
          <Image x:Name="BackImg" Aspect="AspectFit" VerticalOptions="Start"/>
          <Image x:Name="MidImg" Aspect="AspectFit" VerticalOptions="Start"/>
          <Image x:Name="FrontImg" Aspect="AspectFit" VerticalOptions="Start"/>

What I need is simple, a vertical scroll for a page with a few Labels vertically stacked and after that I need to create "one image" which is made of 3 images on top of each other. For that I need the AbsoluteLayout just for the images, right?

I've tried all possible combinations of VerticalOptions for all the views in this file and nothing works.

The problem is that the scroll always leave a big space under the images. And with the Green color, so it means the AbsoluteLayout is not shrinking its height after the image resize. The images can have variable sizes and shapes (although the 3 inside each page will all have the same dimensions) and they are all larger than any smartphone screen (zoom feature later). So I need the images to use all the Width available and keep the aspect ratio (AspectFit I believe).

All the images are Embedded Resources. Here is the code behind:

public PointInfoDataTemplate(PointModel point)
                    NameLabel.Text = point.nome;
                    DescLabel.Text = point.apelido;
                    BackImg.Source = ImageSource.FromResource(point.backimg);
                    MidImg.Source = ImageSource.FromResource(point.midimg);
                    FrontImg.Source = ImageSource.FromResource(point.frontimg);
                    //BackImg.SizeChanged += delegate {
                    //    ImgsContainer.Layout(new Rectangle(imgsContainer.Bounds.X, imgsContainer.Bounds.Y, BackImg.Bounds.Width, BackImg.Bounds.Height));
                    //    MyStackLayout.Layout(new Rectangle(imgsContainer.Bounds.X, imgsContainer.Bounds.Y, BackImg.Bounds.Width, BackImg.Bounds.Height));

I even tried resizing the Layouts after the SizeChanged event, but it didn't work either.

So maybe I'm doing something wrong, here's all my code. I'm stuck in it for 3 days, I don't know what else to do.

I tried using a RelativeLayout for the ScrollView.Content. And after an entire day trying to understand it (and not sure if I fully did) I had a worse problem. The RelativeLayout would overflow the Scroll height and hide part of the images behind the tabs (base app container).

But I'd really like to preserve the StackLayout->items + AbsoluteLayout approach.

I appreciate any help.


Best Answer


Sign In or Register to comment.