get search bar results to appear ontop of other content [closed] - xaml

Question

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 2 years ago.
Improve this question
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>

Answer 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>