get search bar results to appear ontop of other content

问题

looking something similar to what is asked in this Q.... How to display ListView on top of (over the) other items in Xamarin Forms?

been playing about with grids and stacklayouts and cant seem to get the listView of the searchBar to appear on top of the other list views (the other list views contains the products searched for)

so the search bar listview results should appear over the buttons, and other lists

<content>
<StackLayout>

        <StackLayout>
            <SearchBar Placeholder="Search..." TextChanged="SearchBar" x:Name="SearchBar"></SearchBar>
            <ListView x:Name="SearchList" ItemTapped="ItemTapped">
                <ListView.ItemTemplate>
                    <DataTemplate>
                        <TextCell x:Name="SearchBarText" Text="{Binding Name}" Detail="{Binding Desc}">
                        </TextCell>
                    </DataTemplate>
                </ListView.ItemTemplate>
            </ListView>
        </StackLayout>

        <!-- clicking on the button will turn on visibility of list-->
        <Button Text="Choclate" Clicked="ChoclateClick" WidthRequest="100" HorizontalOptions="Start"/>

        <ListView ItemsSource="{Binding ChocList}" x:Name="ChocListView" IsVisible="False" HasUnevenRows="True" SeparatorVisibility="None" VerticalOptions="FillAndExpand" VerticalScrollBarVisibility="Always" HeightRequest="1500">
            <ListView.ItemTemplate>
                <DataTemplate>
                    <ViewCell>
                        <Grid x:Name="ChocGrid" RowSpacing="25">
                            <Grid.RowDefinitions>
                                <RowDefinition Height="Auto"/>
                                <RowDefinition Height="*"/>
                            </Grid.RowDefinitions>
                            <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="Auto"/>
                            <ColumnDefinition Width="*"/>
                            </Grid.ColumnDefinitions>
                                        <Label Grid.Column="0" Grid.Row="0" Text="{Binding Id}" VerticalOptions="End" IsVisible="False"/>
                                        <controls:CircleImage  Grid.Column="1"  Grid.Row="0" HeightRequest="60" HorizontalOptions="CenterAndExpand" VerticalOptions="Center" Aspect="AspectFill" WidthRequest="66" Grid.RowSpan="2" Source="{Binding Image}"/>
                                        <Label Grid.Column="2" Grid.Row="0" Text="{Binding Name}" VerticalOptions="Start"/>
                                        <Label Grid.Column="2" Grid.Row="0"  Text="{Binding Desc}" VerticalOptions="End"/>
                                        <Label Grid.Column="3" Grid.Row="0" VerticalOptions="Start" Text="{Binding Price, StringFormat='£{0:0.00}'}"/>
                                        <Picker Grid.Column="4"  Grid.Row="0" SelectedIndexChanged="ChocQuantityChanged">
                                            <Picker.Items>
                                                <x:String>0</x:String>
                                                <x:String>1</x:String>
                                                <x:String>2</x:String>
                                                <x:String>3</x:String>
                                                <x:String>4</x:String>
                                                <x:String>5</x:String>
                                                <x:String>6</x:String>
                                            </Picker.Items>
                                        </Picker>
                        </Grid>
                    </ViewCell>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>

        <!-- clicking on the button will turn on visibility of list-->
        <Button Text="Sweet" Clicked="SweetsClicked" WidthRequest="100" HorizontalOptions="Start"/>

        <ListView ItemsSource="{Binding SweetsList}" x:Name="SweetsList" IsVisible="False" HasUnevenRows="True" SeparatorVisibility="None" HeightRequest="1500>
                <ListView.ItemTemplate>
                    <DataTemplate>
                        <ViewCell>
                            <Grid Padding="10" RowSpacing="10" ColumnSpacing="10">
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="Auto"/>
                                    <RowDefinition Height="*"/>
                                </Grid.RowDefinitions>
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="Auto"/>
                                    <ColumnDefinition Width="*"/>
                                </Grid.ColumnDefinitions>

                             <Label Grid.Column="0" Grid.Row="0" Text="{Binding Id}" VerticalOptions="End" IsVisible="False"/>
                                        <controls:CircleImage  Grid.Column="1"  Grid.Row="0" HeightRequest="60" HorizontalOptions="CenterAndExpand" VerticalOptions="Center" Aspect="AspectFill" WidthRequest="66" Grid.RowSpan="2" Source="{Binding Image}"/>
                                        <Label Grid.Column="2" Grid.Row="0" Text="{Binding Name}" VerticalOptions="Start"/>
                                        <Label Grid.Column="2" Grid.Row="0"  Text="{Binding Desc}" VerticalOptions="End"/>
                                        <Label Grid.Column="3" Grid.Row="0" VerticalOptions="Start" Text="{Binding Price, StringFormat='£{0:0.00}'}"/>
                                        <Picker Grid.Column="4"  Grid.Row="0" SelectedIndexChanged="ChocQuantityChanged">
                                <Picker.Items>
                                        <x:String>0</x:String>
                                        <x:String>1</x:String>
                                        <x:String>2</x:String>
                                        <x:String>3</x:String>
                                        <x:String>4</x:String>
                                        <x:String>5</x:String>
                                        <x:String>6</x:String>
                                    </Picker.Items>
                                </Picker>
                            </Grid>
                        </ViewCell>
                    </DataTemplate>
                </ListView.ItemTemplate>
            </ListView>
        </StackLayout>
</content>

回答1:

conceptually you want something like this. Your search results occupy the same grid cell as your other content, but are on top of them in Z-order. When you need to display results, just toggle the IsVisible property of your results

<Grid>
  <Grid.RowDefintions>
    <RowDefintion Height="50" />
    <RowDefintion Height="*" />
  </Grid.RowDefintions>
  <SearchBar Grid.Row="0" />
  <StackLayout Grid.Row="1">
    Your content goes here.  You can use other containers besides StackLayout
  </StackLayout>
  <StackLayout Grid.Row="1" IsVisible="false">
    Your search results go here.  The results need to be AFTER the other 
    content in the XAML in order for them to display on "top"
  </StackLayout>
</Grid>

来源：https://stackoverflow.com/questions/61716195/get-search-bar-results-to-appear-ontop-of-other-content