Xamarin.Forms:在地图上隐藏ListView单击?

时间:2019-02-13 01:43:18

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

我的应用程序非常简单:它的上半部显示一个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>

这是模拟器中的应用程序:

https://guides.cocoapods.org/syntax/podspec.html

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

enter image description here

我在类MainPage中添加了一个事件处理程序(类似于enter image description here),但它没有构建:

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

2 个答案:

答案 0 :(得分:2)

我建议不要使用<StackLayout>来实现这种布局:

Xaml代码:

<Grid>

隐藏代码:

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

如果使用的是MVVM Framework,则可以使用绑定更新显示隐藏逻辑。

答案 1 :(得分:0)

以下步骤:

  • 视图中的堆栈布局中添加用于显示“显示列表”的按钮或标签。
  • 现在为地图,列表视图和按钮以及
    创建Command和Property 通过绑定从 ViewModel 处理。
  • 在地图上按下时,在 ViewModel 中调用自定义命令并编写 隐藏列表可见性,调整高度的逻辑 并显示按钮的可见性。
  • 按下按钮时,调用单击自定义命令 ViewModel 并编写用于显示列表可见性的逻辑, 调整高度和隐藏按钮可见性的大小。