Quantcast
Channel: Recent Threads — Xamarin Community Forums
Viewing all articles
Browse latest Browse all 204402

Bottom item of ListView not selectable using Master Detail Page inside TabbedPage on iOS

$
0
0

Hi community,

I've been bumping my head against an issue for a while, but I just can't find the solution for it.
In my app I've been using a Master-Detail page as one of the tabs inside of a TabbedPage which has been Pushed as a modal page. On the Detail page there are a SearchBar are a ListView inside of a StackLayout. This all seems to work great except that selecting the bottom item of the ListView is not selectable, perhaps due to an invisible overlap. I can fix the problem by putting more padding below the ListView, but this gives the impression that the items on the screen are all the items in the ListView and it just doesn't look as good.

I have created a small test app to demonstrate the issue in two gifs below. It's a simple test app with two main pages. An intro page with a button that navigations to the TabbedPage using PushModalAsync and a default TabbedPage containing a default Master-Detail Page in which the DetailPage is a simple ContentPage containing only a ListView inside of a StackLayout:

<?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:d="http://xamarin.com/schemas/2014/forms/design"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             mc:Ignorable="d"
             x:Class="TabbedListViewIssue.ListViewPage"
             Title="ListView Issue tab">
    <ContentPage.Content>
        <StackLayout>
            <ListView HeightRequest="50" ItemsSource="{Binding ListItems}">
                <ListView.ItemTemplate>
                    <DataTemplate>
                        <ViewCell>
                            <Label Text="{Binding Name}" VerticalOptions="Center"/>
                        </ViewCell>
                    </DataTemplate>
                </ListView.ItemTemplate>
            </ListView>
        </StackLayout>
    </ContentPage.Content>
</ContentPage>

When I use this ContentPage inside of the TabbedPage directly I get the expected behaviour. The bottom item of the ListView that's on the screen is selectable:

In the case I use a default Master-Detail Page with the given ContentPage as DetailPage I get the same issue that is popping up in my app. Unfortunately you can't see the clicks, but the bottom part of the second to last item and the whole bottom item can't be selected. It seems like there is some invisible area overlapping or blocking the ListView:

I have also tried setting the NavigationBar to false for the ContentPage, which does remove the NavigationBar on top, but still has the same issue of the bottom item not being selectable.

I hope there is a fix to this issue. Thanks in advance.


Viewing all articles
Browse latest Browse all 204402

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>