Xamarin.Forms：在地图点击时隐藏 ListView？答案

【问题标题】：Xamarin.Forms: Hide ListView on Map click?Xamarin.Forms：在地图点击时隐藏 ListView？
【发布时间】：2019-07-06 18:14:24
【问题描述】：

我的应用非常简单：它在上半部分显示Xamarin.Forms.Map，在下半部分显示ListView。

这是我的xaml：

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:maps="clr-namespace:Xamarin.Forms.Maps;assembly=Xamarin.Forms.Maps"
             xmlns:local="clr-namespace:GasStations"
             x:Class="GasStations.MainPage">

    <StackLayout>
        <StackLayout VerticalOptions="FillAndExpand">
            <maps:Map WidthRequest="960" HeightRequest="200"
            x:Name="MyMap"
            IsShowingUser="true"/>
            <ListView x:Name="ListView_Pets">
            </ListView>
        </StackLayout>
    </StackLayout>

</ContentPage>

这是模拟器中的应用：

当我在地图上单击时，我想隐藏ListView，并在底部显示“显示列表”。或多或少是这样的：

我在 MainPage 类中添加了一个类似这样的事件处理程序（类似于 trouble in Hide/show of listview on a click in xamarin android），但它没有构建：

public MainPage()
{
    InitializeComponent();
    /* Fills ListView and plots points in map */
    ListView_Pets.ItemClick += OnListItemClick;
}

【问题讨论】：

标签： android xamarin xamarin.forms visual-studio-2017 xamarin.forms.listview

【解决方案1】：

我建议不要使用<StackLayout>，而是使用<Grid> 来实现这种布局：

Xaml 代码：

<Grid RowSpacing="0">
    <Grid.RowDefinitions>
        <RowDefinition Height="*" />
        <RowDefinition Height="50" />
        <RowDefinition Height="auto" />
    </Grid.RowDefinitions>
    <StackLayout Grid.Row="0">
        <maps:Map WidthRequest="960" HeightRequest="200" 
                  x:Name="MyMap" IsShowingUser="true"/>
    </StackLayout>
    <StackLayout Grid.Row="1">
        <Label Text="Show List" TextColor="LightGray">
            <Label.GestureRecognizers>
                <TapGestureRecognizer Tapped="OnTapGestureRecognizerTapped"/>
            </Label.GestureRecognizers>
        </Label>
    </StackLayout>
    <StackLayout Grid.Row="2" x:Name="listSection" IsVisible="false" HeightRequest="200">
        <ListView x:Name="ListView_Pets"/>
    </StackLayout>
</Grid>

代码隐藏：

private bool isListVisible;
void OnTapGestureRecognizerTapped(object sender, EventArgs args)
 {
    isListVisible = !isListVisible;
    listSection.IsVisible = !isListVisible;
 }

如果您使用的是 MVVM 框架，您可以使用绑定更新显示隐藏逻辑。

【讨论】：

【解决方案2】：

如下步骤：

在视图的stacklayout内添加按钮或标签以显示“显示列表”。
现在为地图、列表视图和按钮创建命令和属性
通过 Binding 从 ViewModel 处理。
按下地图时，在ViewModel中调用自定义命令并写入隐藏列表可见性的逻辑，调整高度的大小并显示按钮可见性。
当按下按钮时，调用单击自定义命令 ViewModel 并编写显示列表可见性的逻辑，调整高度大小并隐藏按钮可见性。

【讨论】：