Xamarin Forms: AbsoluteLayout

Question

I need to use an AbsoluteLayout for other controls on the page not listed here. How do I layout a common senerio where I have a SearchBar at the top, then a ListView which fills the rest of the screen.

I tried this, but the ListView goes incorrectly under the SearchBar

    <AbsoluteLayout VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
        <SearchBar></SearchBar>
        <ListView 
            AbsoluteLayout.LayoutFlags="All"
            AbsoluteLayout.LayoutBounds="0,0,1,1">
        </ListView>
      </AbsoluteLayout>

Using `StackLayout` will be more suitable for the scenario that you described. — Dishant, Sep 16 '18 at 23:30

score 1 · Accepted Answer · answered Sep 17 '18 at 02:32

Part of the problem is AbsoluteLayoutFlags you have set on the listview.

when you set it to all, you are telling the layout to start at 0,0 and go all the way to 1,1. Which is why the listview is appearing on the searchbar.

<AbsoluteLayout VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
    <SearchBar AbsoluteLayout.LayoutBounds="0,0,1,40"
               AbsoluteLayout.LayoutFlags="WidthProportional,PositionProportional"/>
    <ListView 
        AbsoluteLayout.LayoutFlags="XProportional,SizeProportional"
        AbsoluteLayout.LayoutBounds="0,40,1,1">
        <ListView.ItemsSource>
            <x:Array Type="{x:Type x:String}">
                <x:String>mono</x:String>
                <x:String>monodroid</x:String>
                <x:String>monotouch</x:String>
                <x:String>monorail</x:String>
                <x:String>monodevelop</x:String>
                <x:String>monotone</x:String>
                <x:String>monopoly</x:String>
                <x:String>monomodal</x:String>
                <x:String>mononucleosis</x:String>
            </x:Array>
        </ListView.ItemsSource>
    </ListView>
</AbsoluteLayout>

Xamarin Documentation

I am sure you were referencing the documentation. I linked it here and quoting part of it. Hopefully it helps.

Proportional values define a relationship between a layout and a view. This relationship defines a child view's position or scale value as a proportion of the corresponding value of the parent layout. These values are expressed as doubles with values between 0 and 1.

Proportional values are used to position and size views within the layout. So, when a view's width is set as a proportion, the resultant width value is the proportion multiplied by the AbsoluteLayout's width. For example, with an AbsoluteLayout of width 500 and a view set to have a proportional width of .5, the rendered width of the view will be 250 (500 x .5).

Thank you @Neil, that was very helpful. – Ian Vink Sep 17 '18 at 15:58 — Ian Vink, Sep 17 '18 at 15:58

Xamarin Forms: AbsoluteLayout

1 Answers1