CODEWITHSUNDEEP
c#xamlxamarinxamarin.forms
Carlos Rodrigez
Carlos Rodrigez

Reputation: 1435

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

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.

Upvotes: 0

Views: 3470

Answers (1)

Ori Price
Ori Price

Reputation: 4201

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>

Upvotes: 2

Related Questions