使搜索栏结果显示在其他内容的顶部 [英] 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?
开始使用网格和堆栈布局，似乎无法使searchBar的listView出现在其他列表视图的顶部(其他列表视图包含要搜索的产品)
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>
推荐答案
从概念上讲，您想要这样的东西.搜索结果与其他内容占据相同的网格单元，但以Z顺序位于它们的顶部.当您需要显示结果时，只需切换结果的IsVisible属性
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>
这篇关于使搜索栏结果显示在其他内容的顶部的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
