Xamarin.Forms：添加点击事件以映射到 <Grid> ？

Question

I was finally able to display the ListView using a <Grid> when clicking on a button . This is the 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">

    <Grid RowSpacing="0">
        <Grid.RowDefinitions>
            <RowDefinition Height="*" />
            <RowDefinition Height="50" />
            <RowDefinition Height="auto" />
        </Grid.RowDefinitions>
        <StackLayout Grid.Row="0" x:Name="MapGrid">
            <maps:Map WidthRequest="960" HeightRequest="200" 
                  x:Name="MyMap" IsShowingUser="true"/>
        </StackLayout>
        <StackLayout Grid.Row="1">
            <Button Text="Show List" x:Name="Button_DisplayList"
                VerticalOptions="CenterAndExpand"
                HorizontalOptions="Center"
                Clicked="OnButtonClicked" />
        </StackLayout>
        <StackLayout Grid.Row="2" x:Name="listSection" IsVisible="false" HeightRequest="200">
            <ListView x:Name="ListView_Pets">
                <ListView.ItemsSource>
                    <x:Array Type="{x:Type x:String}">
                        <x:String>dog</x:String>
                        <x:String>cat</x:String>
                        <x:String>bird</x:String>
                    </x:Array>
                </ListView.ItemsSource>
            </ListView>
        </StackLayout>
    </Grid>
</ContentPage>

And this is the codebehind:

void OnButtonClicked(object sender, EventArgs args)
{
    listSection.IsVisible = true;
    Button_DisplayList.IsVisible = false;
}

When I click the button, the ListView is displayed and the button is hidden. So far so good.

Once the ListView is open, how can I hide the ListView again when I tap on the map?

I tried using GestureRecognizers and <TapGestureRecognizer Tapped="OnTapGestureRecognizerTapped"/> , but it doesn't build.

Any help is appreciated.

I've included screenshots because I'm still learning the terminology.

Answer 1

Adding gesture recognizer on the parent stacklayout of the map

On xaml:

 <StackLayout Grid.Row="0" x:Name="MapGrid">
  <StackLayout.GestureRecognizer>
    <TapGestureRecognizer Tapped="OnMapAreaTapped"/>
  </StackLayout.GestureRecognizer>
       <maps:Map WidthRequest="960" HeightRequest="200" x:Name="MyMap" IsShowingUser="true"/>
  </StackLayout>

On code behind:

private void OnMapAreaTapped(object sen, EventArgs e)
        {
           listSection.IsVisible = false;
           Button_DisplayList.IsVisible = true;
        }