How to overlay elements with Xamarin.Forms

Question

I simply want to create an Autocomplete element on the top where the suggestion list is not shifting down the remaining elements im my Layout.

I could try to wrap the Entry and ListView in an AbsoluteLayout container, but for me this sounds not like a clean solution. Is there a different way to achieve this?

Answer 1

Been using Grid all the time until it started randomly crashing with complicated layouts.

Anyway the solution is to use an AbsoluteLayout. https://learn.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/layouts/absolutelayout

Example of 2 centered overlayed items:

    <AbsoluteLayout 
                 VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
        
     <BoxView
                       AbsoluteLayout.LayoutBounds="0.5, 0.5, -1, -1" 
                AbsoluteLayout.LayoutFlags="PositionProportional"          
              BackgroundColor="Red"
              HeightRequest="100"
              WidthRequest="100"/>
    
     <ActivityIndicator
                       AbsoluteLayout.LayoutBounds="0.5, 0.5, -1, -1" 
                AbsoluteLayout.LayoutFlags="PositionProportional"          
              IsRunning="True"
              VerticalOptions="CenterAndExpand"
              HorizontalOptions="CenterAndExpand"/>
</AbsoluteLayout>

XAML Tips:

FillAndExpand XY:

AbsoluteLayout.LayoutBounds="0, 0, 1, 1" 
AbsoluteLayout.LayoutFlags="All"

Center XY:

AbsoluteLayout.LayoutBounds="0.5, 0.5, -1, -1"     
AbsoluteLayout.LayoutFlags="PositionProportional"

Vertical Center, Horizontal Fill:

AbsoluteLayout.LayoutBounds="0.5, 0.5, 1, -1" 
AbsoluteLayout.LayoutFlags="PositionProportional"

Vertical End, Horizontal Center

AbsoluteLayout.LayoutBounds="0.5, 1, -1, -1" 
AbsoluteLayout.LayoutFlags="PositionProportional"

Vertical Start, Horizontal Center

AbsoluteLayout.LayoutBounds="0.5, 0, -1, -1" 
AbsoluteLayout.LayoutFlags="PositionProportional"

Vertical Start, Horizontal Start

AbsoluteLayout.LayoutBounds="0, 0, -1, -1" 
AbsoluteLayout.LayoutFlags="PositionProportional"

Answer 2

If you use a Grid you can overlay stuff and set if should go left, right, center etc.. The last one to be added will be on top, in your case Entry.

Answer 3

In order to overlay elements you can use "Absolute" and/or "Relative" Layout.

There is workaround for overlaying using "Grid". In order to do that you need to put your elements or "containers" in same Row/Cell.

Here is example:

<Grid>
    <Label Grid.Row="0" Text="test" VerticalTextAlignment="Center" />
    <Label Grid.Row="0" Text="overlay" VerticalTextAlignment="Center" />
</Grid>