In Xamarin.Forms, all of my click events stopped working after I added a ScrollView to the page. Is the ScrollView intercepting the clicks?

user_1082604 0
Viewed 1167

Here's the relevant code in question:

XAML:

<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:Name="ContentPage_MainPage"
             x:Class="OpenBacon.MainPage">

    <ContentPage.ToolbarItems>
        <ToolbarItem x:Name="ToolbarItem_Subreddits" Order="Primary" Priority="10" Text="Initializing...." Clicked="ToolbarItemSubreddits_Clicked" />
        <ToolbarItem x:Name="ToolbarItem_Spacer" Order="Primary" Priority="20" Text="     " />
        <ToolbarItem Order="Primary" Priority="30" Clicked="ToolbarItemSearch_Clicked">
            <ToolbarItem.Icon>
                <OnPlatform x:TypeArguments="FileImageSource"  Android="OpenBaconSearch" />
            </ToolbarItem.Icon>
        </ToolbarItem>
        <ToolbarItem x:Name="ToolbarItem_Mail" Order="Primary" Priority="40" Clicked="ToolbarItemMail_Clicked">
            <ToolbarItem.Icon>
                <OnPlatform x:TypeArguments="FileImageSource"  Android="OpenBaconMail" />
            </ToolbarItem.Icon>
        </ToolbarItem>
        <ToolbarItem Order="Primary" Priority="50" Clicked="ToolbarItemBaconButton_Clicked">
            <ToolbarItem.Icon>
                <OnPlatform x:TypeArguments="FileImageSource"  Android="OpenBaconBaconButton" />
            </ToolbarItem.Icon>
        </ToolbarItem>
    </ContentPage.ToolbarItems>
    <ContentPage.Content>
        <AbsoluteLayout Padding="0" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
            <ScrollView x:FieldModifier="public" x:Name="ScrollView_Main" Orientation="Vertical">
                <StackLayout x:Name="StackLayout_Main">
                    <!-- Sort bar. -->
                    <Grid>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="Auto" />
                        </Grid.RowDefinitions>
                        <Grid Grid.Row="0" VerticalOptions="Start" BackgroundColor="LightGray" RowSpacing="0">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="2*" />
                                <ColumnDefinition Width="*" />
                            </Grid.ColumnDefinitions>
                            <Label Grid.Column="0" Text="" FontSize="Small" VerticalOptions="End" Margin="2" x:Name="Label_PostsSinceLastRefresh" />
                            <Button x:Name="ButtonSort" Grid.Column="1" Text="" FontSize="Small" Clicked="ButtonSort_Clicked" />
                        </Grid>
                    </Grid>
                    <!-- Posts list goes here (generated). -->
                    <StackLayout VerticalOptions="StartAndExpand" x:Name="StackLayout_Posts">

                    </StackLayout>
                </StackLayout>
            </ScrollView>

C#:

(In the constructor for MainPage)

Content = ScrollView_Main;

If I comment out the "Content =" line, the ScrollView is gone but all the toolbar items are able to receive their click events again. Uncommented, the scrolling works perfectly but I can't tap anything on the page.

I can't find any mention of any options to fix this behavior. Is this a Xamarin.Forms bug or am I missing something?

EDIT: Here's the full 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:d="http://xamarin.com/schemas/2014/forms/design"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             mc:Ignorable="d"
             x:Name="ContentPage_MainPage"
             x:Class="OpenBacon.MainPage">

    <ContentPage.ToolbarItems>
        <ToolbarItem x:Name="ToolbarItem_Subreddits" Order="Primary" Priority="10" Text="Initializing...." Clicked="ToolbarItemSubreddits_Clicked" />
        <ToolbarItem x:Name="ToolbarItem_Spacer" Order="Primary" Priority="20" Text="     " />
        <ToolbarItem Order="Primary" Priority="30" Clicked="ToolbarItemSearch_Clicked">
            <ToolbarItem.Icon>
                <OnPlatform x:TypeArguments="FileImageSource"  Android="OpenBaconSearch" />
            </ToolbarItem.Icon>
        </ToolbarItem>
        <ToolbarItem x:Name="ToolbarItem_Mail" Order="Primary" Priority="40" Clicked="ToolbarItemMail_Clicked">
            <ToolbarItem.Icon>
                <OnPlatform x:TypeArguments="FileImageSource"  Android="OpenBaconMail" />
            </ToolbarItem.Icon>
        </ToolbarItem>
        <ToolbarItem Order="Primary" Priority="50" Clicked="ToolbarItemBaconButton_Clicked">
            <ToolbarItem.Icon>
                <OnPlatform x:TypeArguments="FileImageSource"  Android="OpenBaconBaconButton" />
            </ToolbarItem.Icon>
        </ToolbarItem>
    </ContentPage.ToolbarItems>
    <ContentPage.Content>
        <AbsoluteLayout Padding="0" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
            <ScrollView x:FieldModifier="public" x:Name="ScrollView_Main" Orientation="Vertical">
                <StackLayout x:Name="StackLayout_Main">
                    <!-- Sort bar. -->
                    <Grid>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="Auto" />
                        </Grid.RowDefinitions>
                        <Grid Grid.Row="0" VerticalOptions="Start" BackgroundColor="LightGray" RowSpacing="0">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="2*" />
                                <ColumnDefinition Width="*" />
                            </Grid.ColumnDefinitions>
                            <Label Grid.Column="0" Text="" FontSize="Small" VerticalOptions="End" Margin="2" x:Name="Label_PostsSinceLastRefresh" />
                            <Button x:Name="ButtonSort" Grid.Column="1" Text="" FontSize="Small" Clicked="ButtonSort_Clicked" />
                        </Grid>
                    </Grid>
                    <!-- Posts list goes here (generated). -->
                    <StackLayout VerticalOptions="StartAndExpand" x:Name="StackLayout_Posts">

                    </StackLayout>
                </StackLayout>
            </ScrollView>

            <ContentView x:Name="Popup_Subreddits" BackgroundColor="DimGray" Padding="10, 10" IsVisible="False" AbsoluteLayout.LayoutBounds="0, 0, 1, 1" AbsoluteLayout.LayoutFlags="All">
                <StackLayout VerticalOptions="Start"  HorizontalOptions="Center">
                    <StackLayout Orientation="Vertical" HeightRequest="400" WidthRequest="300" BackgroundColor="White">
                        <ListView x:Name="ListView_Subreddits" ItemTapped="ListView_Subreddits_ItemTapped">
                            <ListView.ItemsSource>
                                <x:Array Type="{x:Type x:String}"></x:Array>
                            </ListView.ItemsSource>
                        </ListView>
                    </StackLayout>
                </StackLayout>
                <ContentView.GestureRecognizers>
                    <TapGestureRecognizer Tapped="Popup_Subreddits_OutClick" />
                </ContentView.GestureRecognizers>
            </ContentView>
            <ContentView x:Name="Popup_BaconButton" BackgroundColor="#446"  Padding="75, 0, 0, 75" IsVisible="False" AbsoluteLayout.LayoutBounds="1, 0, .9, .9" AbsoluteLayout.LayoutFlags="All">
                <StackLayout VerticalOptions="Start"  HorizontalOptions="Center">
                    <StackLayout Orientation="Vertical" HeightRequest="600" WidthRequest="300" BackgroundColor="#0079D3">
                        <ListView x:Name="ListView_BaconButton" ItemTapped="ListView_BaconButton_ItemTapped">
                            <ListView.ItemTemplate>
                                <DataTemplate>
                                    <ImageCell Text="{Binding Name}" Detail="{Binding Detail}" ImageSource="{Binding ImageSrc}" TextColor="White" DetailColor="WhiteSmoke" />
                                </DataTemplate>
                            </ListView.ItemTemplate>
                        </ListView>
                    </StackLayout>
                </StackLayout>
                <ContentView.GestureRecognizers>
                    <TapGestureRecognizer Tapped="Popup_BaconButton_OutClick" />
                </ContentView.GestureRecognizers>
            </ContentView>
        </AbsoluteLayout>
    </ContentPage.Content>

</ContentPage>
xamarin.forms xamarin xamarin.android android c#
3 Answers

Well, the issue is the AbsoluteLayout that you have above your ScrollView.

When not given any LayoutFlags and LayoutOptions it takes up the whole available space which is causing it to take the whole screen. When you add the ScrollView it takes over the whole screen which is somehow intercepting the events. What I would suggest you do is remove this AbsoluteLayout as I do not see any specific use for it anyway so your layout would look something like:

<ScrollView x:FieldModifier="public" x:Name="ScrollView_Main" Orientation="Vertical">
            <StackLayout x:Name="StackLayout_Main">
                <!-- Sort bar. -->
                <Grid>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto" />
                    </Grid.RowDefinitions>
                    <Grid Grid.Row="0" VerticalOptions="Start" BackgroundColor="LightGray" RowSpacing="0">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="2*" />
                            <ColumnDefinition Width="*" />
                        </Grid.ColumnDefinitions>
                        <Label Grid.Column="0" Text="" FontSize="Small" VerticalOptions="End" Margin="2" x:Name="Label_PostsSinceLastRefresh" />
                        <Button x:Name="ButtonSort" Grid.Column="1" Text="" FontSize="Small" Clicked="ButtonSort_Clicked" />
                    </Grid>
                </Grid>
                <!-- Posts list goes here (generated). -->
                <StackLayout VerticalOptions="StartAndExpand" x:Name="StackLayout_Posts">

                </StackLayout>
            </StackLayout>
        </ScrollView>
user_74620310

You can use RelativeLayout to achieve this.

I created simple demo to simulate your function,and in order to make it easier to understand, I turned the background yellow. The main code is:

 <ContentPage.ToolbarItems>
    <ToolbarItem x:Name="ToolbarItem_Subreddits" Order="Primary" Priority="10" Text="Initializing...." Clicked="ToolbarItemSubreddits_Clicked"/>
    <ToolbarItem x:Name="ToolbarItem_Spacer" Order="Primary" Priority="20" Text="     " />
    <ToolbarItem Order="Primary" Priority="30" Clicked="ToolbarItemSearch_Clicked">
        <ToolbarItem.Icon>
            <OnPlatform x:TypeArguments="FileImageSource"  Android="OpenBaconSearch" />
        </ToolbarItem.Icon>
    </ToolbarItem>
    <ToolbarItem x:Name="ToolbarItem_Mail" Order="Primary" Priority="40" Clicked="ToolbarItemMail_Clicked">
        <ToolbarItem.Icon>
            <OnPlatform x:TypeArguments="FileImageSource"  Android="OpenBaconMail" />
        </ToolbarItem.Icon>
    </ToolbarItem>
    <ToolbarItem Order="Primary" Priority="50" Clicked="ToolbarItemBaconButton_Clicked">
        <ToolbarItem.Icon>
            <OnPlatform x:TypeArguments="FileImageSource"  Android="OpenBaconBaconButton" />
        </ToolbarItem.Icon>
    </ToolbarItem>
</ContentPage.ToolbarItems>
<ContentPage.Content>
        <ScrollView x:FieldModifier="public" x:Name="ScrollView_Main" Orientation="Vertical">   
       <!--attention here-->
        <RelativeLayout BackgroundColor="Yellow" HeightRequest="800" WidthRequest="800" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
            <StackLayout x:Name="StackLayout_Main"  HorizontalOptions="Fill" VerticalOptions="Fill"
                RelativeLayout.XConstraint= "{ConstraintExpression Type=RelativeToParent, Property=Width, Factor = 0}"
                RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor = 0}" >
                <!-- Sort bar. -->
                <Grid>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto" />
                    </Grid.RowDefinitions>
                    <Grid Grid.Row="0" VerticalOptions="Start" BackgroundColor="LightGray" RowSpacing="0">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="2*" />
                            <ColumnDefinition Width="*" />
                        </Grid.ColumnDefinitions>
                        <Label Grid.Column="0" Text="test" FontSize="Small" VerticalOptions="End" Margin="2" x:Name="Label_PostsSinceLastRefresh" />
                        <Button x:Name="ButtonSort" Grid.Column="1" Text="Button_Sort" FontSize="Small" Clicked="ButtonSort_Clicked" />
                    </Grid>
                </Grid>
                <!-- Posts list goes here (generated). -->
                <StackLayout VerticalOptions="StartAndExpand" x:Name="StackLayout_Posts">

                </StackLayout>
            </StackLayout>

        <ContentView x:Name="Popup_Subreddits" BackgroundColor="DimGray" Padding="10, 10" IsVisible="True" 
                     RelativeLayout.XConstraint= "{ConstraintExpression Type=RelativeToParent, Property=Width, Factor = 0}"
                     RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor = 0.06}"
                     >
            <StackLayout VerticalOptions="Start"  HorizontalOptions="Center">
                <StackLayout Orientation="Vertical" HeightRequest="400" WidthRequest="300" BackgroundColor="White">
                    <ListView x:Name="ListView_Subreddits" ItemTapped="ListView_Subreddits_ItemTapped">
                        <ListView.ItemsSource>
                            <x:Array Type="{x:Type x:String}">
                            <x:String>mono</x:String>
                            <x:String>monodroid</x:String>
                            <x:String>monotouch</x:String>
                            <x:String>monorail</x:String>
                            <x:String>monodevelop</x:String>
                            <x:String>monotone</x:String>
                            <x:String>monopoly</x:String>
                            <x:String>monomodal</x:String>
                            <x:String>mononucleosis</x:String>
                           </x:Array>
                        </ListView.ItemsSource>
                    </ListView>
                </StackLayout>
            </StackLayout>
            <ContentView.GestureRecognizers>
                <TapGestureRecognizer Tapped="Popup_Subreddits_OutClick" />
            </ContentView.GestureRecognizers>
        </ContentView>
         <ContentView x:Name="Popup_BaconButton" BackgroundColor="#446"  Padding="0, 0, 0, 0" IsVisible="False" 
                      RelativeLayout.XConstraint= "{ConstraintExpression Type=RelativeToParent, Property=Width, Factor = 0}"
                      RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor = 0.06}"
                      >
            <StackLayout VerticalOptions="Start"  HorizontalOptions="Center">
                <StackLayout Orientation="Vertical" HeightRequest="600" WidthRequest="300" BackgroundColor="#0079D3">
                    <ListView x:Name="listView" ItemTapped="ListView_BaconButton_ItemTapped"> 
                        <ListView.ItemTemplate>
                            <DataTemplate>
                                <ImageCell Text="{Binding Name}" Detail="{Binding Comment}"  ImageSource="{Binding Image}" TextColor="White" DetailColor="WhiteSmoke" />
                            </DataTemplate>
                        </ListView.ItemTemplate>
                    </ListView>
                </StackLayout>
            </StackLayout>
            <ContentView.GestureRecognizers>
                <TapGestureRecognizer Tapped="Popup_BaconButton_OutClick" />
            </ContentView.GestureRecognizers>
        </ContentView>
        </RelativeLayout>
    </ScrollView>
</ContentPage.Content>

Note：

1.use RelativeLayout as the parent layout.And set the property of the ContentView just like this:

<ContentView x:Name="Popup_Subreddits" BackgroundColor="DimGray" Padding="10, 10" IsVisible="True" 
                     RelativeLayout.XConstraint= "{ConstraintExpression Type=RelativeToParent, Property=Width, Factor = 0}"
                     RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor = 0.06}"
                     >
 </ContentView>

And 

  <ContentView x:Name="Popup_BaconButton" BackgroundColor="#446"  Padding="0, 0, 0, 0" IsVisible="False" 
                      RelativeLayout.XConstraint= "{ConstraintExpression Type=RelativeToParent, Property=Width, Factor = 0}"
                      RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor = 0.06}"
                      >
</ContentView>

Of course, you can adjust the value of Factor according to your requirement.

The result of the demo is :

enter image description here enter image description here

user_103083360

I finally found the solution to the problem here:

https://forums.xamarin.com/discussion/comment/373736/#Comment_373736

Apparently, all I needed to do was add the following to the ScrollView definition:

AbsoluteLayout.LayoutBounds="0, 0, 1, 1"

AbsoluteLayout.LayoutFlags="All"

I.e.

<ScrollView 
    x:FieldModifier="public" 
    x:Name="ScrollView_Main" 
    Orientation="Vertical" 
    AbsoluteLayout.LayoutBounds="0, 0, 1, 1" 
    AbsoluteLayout.LayoutFlags="All">

So the full XAML now looks like this:

<?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:Name="ContentPage_MainPage"
             x:Class="OpenBacon.MainPage">

    <ContentPage.ToolbarItems>
        <ToolbarItem x:Name="ToolbarItem_Subreddits" Order="Primary" Priority="10" Text="Initializing...." Clicked="ToolbarItemSubreddits_Clicked" />
        <ToolbarItem x:Name="ToolbarItem_Spacer" Order="Primary" Priority="20" Text="     " />
        <ToolbarItem Order="Primary" Priority="30" Clicked="ToolbarItemSearch_Clicked">
            <ToolbarItem.Icon>
                <OnPlatform x:TypeArguments="FileImageSource"  Android="OpenBaconSearch" />
            </ToolbarItem.Icon>
        </ToolbarItem>
        <ToolbarItem x:Name="ToolbarItem_Mail" Order="Primary" Priority="40" Clicked="ToolbarItemMail_Clicked">
            <ToolbarItem.Icon>
                <OnPlatform x:TypeArguments="FileImageSource"  Android="OpenBaconMail" />
            </ToolbarItem.Icon>
        </ToolbarItem>
        <ToolbarItem Order="Primary" Priority="50" Clicked="ToolbarItemBaconButton_Clicked">
            <ToolbarItem.Icon>
                <OnPlatform x:TypeArguments="FileImageSource"  Android="OpenBaconBaconButton" />
            </ToolbarItem.Icon>
        </ToolbarItem>
    </ContentPage.ToolbarItems>
    <ContentPage.Content>
        <AbsoluteLayout Padding="0" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
            <ScrollView x:FieldModifier="public" x:Name="ScrollView_Main" Orientation="Vertical" AbsoluteLayout.LayoutBounds="0, 0, 1, 1" AbsoluteLayout.LayoutFlags="All">
                <StackLayout x:Name="StackLayout_Main">
                    <!-- Sort bar. -->
                    <Grid>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="Auto" />
                        </Grid.RowDefinitions>
                        <Grid Grid.Row="0" VerticalOptions="Start" BackgroundColor="LightGray" RowSpacing="0">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="2*" />
                                <ColumnDefinition Width="*" />
                            </Grid.ColumnDefinitions>
                            <Label Grid.Column="0" Text="" FontSize="Small" VerticalOptions="End" Margin="2" x:Name="Label_PostsSinceLastRefresh" />
                            <Button x:Name="ButtonSort" Grid.Column="1" Text="" FontSize="Small" Clicked="ButtonSort_Clicked" />
                        </Grid>
                    </Grid>
                    <!-- Posts list goes here (generated). -->
                    <StackLayout VerticalOptions="StartAndExpand" x:Name="StackLayout_Posts">

                    </StackLayout>
                </StackLayout>
            </ScrollView>

            <ContentView x:Name="Popup_Subreddits" BackgroundColor="DimGray" Padding="10, 10" IsVisible="False" AbsoluteLayout.LayoutBounds="0, 0, 1, 1" AbsoluteLayout.LayoutFlags="All">
                <StackLayout VerticalOptions="Start"  HorizontalOptions="Center">
                    <StackLayout Orientation="Vertical" HeightRequest="400" WidthRequest="300" BackgroundColor="White">
                        <ListView x:Name="ListView_Subreddits" ItemTapped="ListView_Subreddits_ItemTapped">
                            <ListView.ItemsSource>
                                <x:Array Type="{x:Type x:String}"></x:Array>
                            </ListView.ItemsSource>
                        </ListView>
                    </StackLayout>
                </StackLayout>
                <ContentView.GestureRecognizers>
                    <TapGestureRecognizer Tapped="Popup_Subreddits_OutClick" />
                </ContentView.GestureRecognizers>
            </ContentView>
            <ContentView x:Name="Popup_BaconButton" BackgroundColor="#446"  Padding="75, 0, 0, 75" IsVisible="False" AbsoluteLayout.LayoutBounds="1, 0, .9, .9" AbsoluteLayout.LayoutFlags="All">
                <StackLayout VerticalOptions="Start"  HorizontalOptions="Center">
                    <StackLayout Orientation="Vertical" HeightRequest="600" WidthRequest="300" BackgroundColor="#0079D3">
                        <ListView x:Name="ListView_BaconButton" ItemTapped="ListView_BaconButton_ItemTapped">
                            <ListView.ItemTemplate>
                                <DataTemplate>
                                    <ImageCell Text="{Binding Name}" Detail="{Binding Detail}" ImageSource="{Binding ImageSrc}" TextColor="White" DetailColor="WhiteSmoke" />
                                </DataTemplate>
                            </ListView.ItemTemplate>
                        </ListView>
                    </StackLayout>
                </StackLayout>
                <ContentView.GestureRecognizers>
                    <TapGestureRecognizer Tapped="Popup_BaconButton_OutClick" />
                </ContentView.GestureRecognizers>
            </ContentView>
        </AbsoluteLayout>
    </ContentPage.Content>

</ContentPage>

As you can see, it's identical to the code in my question with the exception of those two attributes being added to the ScrollView definition. That fixed everything.

Here are some screenshots of how it looks now:

Screenshot #1

Screenshot #2

Screenshot #3 (code modified slightly)

user_10826040
Related