How to make a scrollview and layout it with both absolutelayout and stacklayout (Xamarin Forms)?

Question

Having a lot of problems making a simple scrollview and inside it have both absolutelayout and stacklayouts. The stacklayout works fine but the image/labels that are controlled by an absolutelayout does not get the correct size. (I gather the image and all the labels from my codepage).

This is my current code:

<AbsoluteLayout>

  <ScrollView AbsoluteLayout.LayoutBounds="0.0, 0.0, 1, 1" AbsoluteLayout.LayoutFlags="All" >
    <AbsoluteLayout>

        <Image  Aspect = "AspectFill" AbsoluteLayout.LayoutBounds="0.0, 0.0, 1, 0.5" 
        AbsoluteLayout.LayoutFlags="All" x:Name = "image" />

        <Button BackgroundColor = "Red"
        AbsoluteLayout.LayoutBounds="1.0, 0.45, 0.5, 0.15"  />

        <StackLayout AbsoluteLayout.LayoutBounds="0.0, 1.0, 1, 0.5" AbsoluteLayout.LayoutFlags="All"  >

        <Label x:Name = "title" />
        <Label x:Name = "date" />
        <Label x:Name = "text" />

        </StackLayout>

    <AbsoluteLayout>
  </ScrollView>

<AbsoluteLayout>

With this current code the image does not take 0.5 of the screen in height. It is much longer. I have tried to add a HeightRequest ="700" on the AbsolueLayout and then the image positions itself correctly but then the scrollview does not work even when the label text is longer than the screen.

Problem is that your Absolute Layout just doesn't have enough information to calculate its size properly neither by using its parent size nor by using its children sizes. Can you tell more about your problem so maybe we could suggest better layout for you. — Artur Shamsutdinov
@Artur Shamsutdinov Yeah sure. WIth this current code the image and the button that is controlled by the absolutelayout does not get the right size. they get bigger then they are supposed to. If I add a heightrequest of the screen device height inside the absolutelauout they get the correct size but the page is not scrollable then. — Carlos Rodrigez
Why not use Grid instead of absolute layout? just make the column and rows definition with the right ratio. — Ori Price
@CarlosRodrigez can you give us a wireframe of what you need? — Artur Shamsutdinov
imgur.com/a/OwlzD this is what i am trying to achieve. so that i scroll the entire page and the image gets layed out the way i want. — Carlos Rodrigez

Ori Price Ori Price · Accepted Answer · 2016-11-22T09:22:04

This code should give you what you want. The grid has two equal rows (due to the use of "*"), one with the image and one containing the button and the stacklayout. Button height will be 50dp and is aligned to the top right corner of the row using horizontal and vertical alignment properties. You can change the ratio between the rows by putting a number before *. For example:

  <RowDefinition Height="2*"></RowDefinition>
    <RowDefinition Height="1*"></RowDefinition>

Above snippet will divide the rest of the space to 3 which will give the image 2/3 of the space and 1/3 to the stacklayout.

<?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="Rumble.Client.Page1">
  <ScrollView>
    <Grid>
      <Grid.RowDefinitions>
        <RowDefinition Height="*"></RowDefinition>
        <RowDefinition Height="*"></RowDefinition>
      </Grid.RowDefinitions>
      <Image  Aspect = "AspectFill" Grid.Row="0" x:Name = "image" />
      <Button BackgroundColor="Red"  Grid.Row="1" HeightRequest="50" HorizontalAlignment="End" VerticalAlignment="Start"  />
      <StackLayout Grid.Row="1">
        <Label x:Name = "title" />
        <Label x:Name = "date" />
        <Label x:Name = "text" />
      </StackLayout>
    </Grid>
  </ScrollView>
</ContentPage>

UPDATE:

If you want the scroll to work you'll have to set it's row to auto so it will take as much space as it needs instead of screen height limit:

   <Grid.RowDefinitions>
    <RowDefinition Height="*"></RowDefinition>
    <RowDefinition Height="Auto"></RowDefinition>
  </Grid.RowDefinitions>

How to make a scrollview and layout it with both absolutelayout and stacklayout (Xamarin Forms)?

1 Answers