CODEWITHSUNDEEP
androidxamarinxamarin.formsvisual-studio-2017xamarin.forms.listview
fdkgfosfskjdlsjdlkfsf
fdkgfosfskjdlsjdlkfsf

Reputation: 3303

Xamarin.Forms: Hide ListView on Map click?

My app is really simple: it displays a Xamarin.Forms.Map in the top half and a ListView on the bottom half.

This is my 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>

This is app in the emulator:

enter image description here

I would like to hide the ListView when I click on the map, and at the bottom something that says "Show List". More or less something like this:

enter image description here

I added an event handler like so in class MainPage (similar to trouble in Hide/show of listview on a click in xamarin android), but it doesn't build:

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

Upvotes: 0

Views: 947

Answers (2)

Himanshu Dwivedi
Himanshu Dwivedi

Reputation: 8174

Instead of using <StackLayout> I would propose to use <Grid> to achieve this kind of Layout:

Xaml Code:

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

Code Behind:

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

You can update the show hide logic using binding, if you are using MVVM Framework.

Upvotes: 2

Mridul Malviya
Mridul Malviya

Reputation: 96

Following steps as follows:

  • Add Button or Label for display "Show List" inside stacklayout in Views.
  • Now create Command and Property for map, listview and button and
    handle from ViewModel by Binding.
  • When press on map,invoke custom command in ViewModel and write logic for hiding list visibility, adjusting size for height and showing button visibility.
  • When press on button,invoke click custom command in ViewModel and write logic for showing list visibility, adjusting size for height and hiding button visibility.

Upvotes: 0

Related Questions