How to make a Listview overlap a stacklayout in Xamarin Forms?

Question

I am trying to do my own autocomplete control, I have done this with a stacklayout and inside I have placed a grid and within this a searchbar and a lisview, the problem arises that in this way I always have to have the fixed height defined.

If I change the Stacklayout for an AbsoluteLayout it works a bit better, but the list when I load is behind a stacklayout that I have below and I can not select the items that are last, I guess the problem is because the stacklayout overlaps the listview , I would like to know how I can do it in reverse, that the listview overlaps the stacklayout.

                 <AbsoluteLayout    
                           Grid.Column="1"
                           Grid.Row="0"
                           IsVisible="{Binding IsVisibleSearchBarClienteBinding}"
                        >
                        <SearchBar
                                Placeholder="Buscar Cliente"
                                HeightRequest="32"
                                Text="{Binding SearchCustomer}"
                            >
                            <SearchBar.Behaviors>
                                <behaviors:EventHandlerBehavior EventName="TextChanged">
                                    <behaviors:InvokeCommandAction Command="{Binding RefreshSearchCustomerCommand}" />
                                </behaviors:EventHandlerBehavior>
                            </SearchBar.Behaviors>
                        </SearchBar>
                        <!--Buscar Clientes-->
                        <ListView
                                BackgroundColor="Transparent"       
                                ItemsSource="{Binding CustomerObseravableBinding}"
                                IsVisible="{Binding IsVisibleListViewSearchBarBinding}"
                                IsPullToRefreshEnabled="true"
                                Margin="0,5,0,0"
                                RefreshCommand="{Binding RefreshListCustomerCommand}"
                                SeparatorVisibility="Default"    
                                VerticalOptions="StartAndExpand"
                            >
                            <ListView.ItemTemplate>
                                <DataTemplate>
                                    <ViewCell>
                                        <Grid
                                                HeightRequest="40">
                                            <Label 
                                                    Grid.Row="0"
                                                    Text="{Binding Name}" FontSize="16">
                                            </Label>
                                            <Label 
                                                    Grid.Row="1"
                                                    Text="{Binding VATRegistrationNo}"  FontSize="12">
                                            </Label>
                                            <Grid.GestureRecognizers>
                                                <TapGestureRecognizer Command="{Binding SelectedCustomerFromSearchBarCommand}"/>
                                            </Grid.GestureRecognizers>
                                        </Grid>

                                    </ViewCell>

                                </DataTemplate>
                            </ListView.ItemTemplate>
                        </ListView>
                        <!--</StackLayout>-->

                    </AbsoluteLayout>

I would expect that the listview will be above the stacklayout that I have below where I could select the items from it. But currently the list remains behind the stacklayout and I can not select anything.

imgur.com/1k1kmxc -> ListView Inside AbsolutLayout imgur.com/x4dj3ev -> ListView Inside StackLayout — Ivanrlg
if you want the ListView above the StackLayout, then place the StackLayout before the ListView in the XAML — Jason
@Jason wao, after so many hours trying that was what I needed, that helped me, thank you very much. — Ivanrlg

Junior Jiang Junior Jiang · Accepted Answer · 2019-04-02T01:51:06

I would expect that the listview will be above the stacklayout

As Jason said , you need to place the StackLayout before the ListView in the XAML.

Sample as follow:

<StackLayout>...</StackLayout>
<ListView>...</ListView>

How to make a Listview overlap a stacklayout in Xamarin Forms?

1 Answers