使搜索栏结果显示在其他内容的顶部

Question

看起来类似于此问题中的要求。...How to display ListView on top of (over the) other items in Xamarin Forms?

开始玩网格和堆栈布局，似乎无法使searchBar的listView出现在其他列表视图的顶部（其他列表视图包含要搜索的产品）

所以搜索栏的列表视图结果应显示在按钮和其他列表的上方

<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

概念上，您想要这样的东西。搜索结果与其他内容占据相同的网格单元，但以Z顺序位于它们的顶部。当需要显示结果时，只需切换结果的IsVisible属性

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