如何在Xamarin Forms中的其他项目之上(上方)显示ListView? [英] How to display ListView on top of (over the) other items in Xamarin Forms?

问题描述

我有一个ListView，显示最近的搜索项.我已经在主页的堆栈布局中添加了它.我想在其他UI元素上显示ListView，如下所示:如何完成.

I have a ListView that displays recent Search items. I have added it in the Stack Layout of my Main page. I want to show ListView over the other UI elements just like this: How can it be done.

我当前正在为SearchBar和ListView使用新的页面.在主页上，我只有一个搜索按钮，当我单击该按钮时，应用程序导航到包含SearchBar和ListView的新页面.但我希望在同一页面上完成.单击搜索"按钮后，SearchBar和ListView显示将在其他UI元素上可见.

I am currently using a new Page just for SearchBar and ListView. On the mainpage I have just a Search Button, when I click on that button, app navigates to the new Page that contains SearchBar and ListView. But I want it done on the same page. When Search button is clicked, SearchBar and ListView show become visible over the other UI elements.

这是我的代码:

在MainPage.xaml

<Button Text="Search" Clicked="SearchButtonPressed" />

C#代码

void SearchButtonPressed(object sender, EventArgs e)
{
    Navigation.PushAsync(new SearchPage());
}

SearchPage.xaml代码

<StackLayout>
    <SearchBar x:Name="SearchBar"
                TextChanged="Handle_SearchButtonPressed"
                Placeholder="Search places..."
                CancelButtonColor="Red" />

    <ListView x:Name="ListView" ItemsSource="{Binding Source=list}" RowHeight="50" IsVisible="True">
        <ListView.ItemTemplate>
            <DataTemplate>
                <ViewCell Tapped="ViewCell_Tapped">
                    <Label Text="{Binding}" TextColor="Black" VerticalOptions="Center" />
                </ViewCell>
            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>
</StackLayout>

推荐答案

您可以使用网格来实现:

you can do it with a grid:

<Grid>

    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>


    <Entry Grid.Row="0"
           Placeholder="SearchItem"
           TextChanged="Entry_TextChanged"/>
    <Image Grid.Row="1"
           Aspect="Fill"
           Source="testImage.png"/>

        <ListView x:Name="ListView"
                  Grid.Row="1"
                  VerticalOptions="Start"
                  HorizontalOptions="Fill"
                  IsVisible="False"
                  HeightRequest="300"
                  BackgroundColor="White"
                  Opacity="0.8">
            <ListView.ItemTemplate>
                <DataTemplate>
                    <TextCell Text="{Binding}"/>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>

</Grid>

如果搜索条目的文本已更改，请显示列表视图:

if the text of the search entry changed, show the listview:

private void Entry_TextChanged(object sender, TextChangedEventArgs e)
    { 
        ListView.IsVisible =  e.NewTextValue.Length > 0; 
    }

这篇关于如何在Xamarin Forms中的其他项目之上(上方)显示ListView?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！