Click controls under other controls

Question

I have a page in Xamarin Forms and at the end I have a StackLayout that covers the whole screen, that is only visible when I call it.

The StackLayout correctly shows and so does the ActivityIndicator. However I can still click any control that should be technically underneath the stacklayout.

Is this expected behaviour? In WPF or similar when I put a control in front of another one, it doesn't allow any controls behind it to be clicked.

XAML:

<Grid>
      <Grid.RowDefinitions>
          <RowDefinition Height="*" />
          <RowDefinition Height="Auto" />
      </Grid.RowDefinitions>
      <Grid.ColumnDefinitions>
          <ColumnDefinition Width="*" />
      </Grid.ColumnDefinitions>

      <Image Source="Background.png" Aspect="AspectFill"></Image>
      <StackLayout Padding="10, 10, 0, 0">
          <Image Source="Logo.png" WidthRequest="200" HorizontalOptions="Start" />
      </StackLayout>
      <RelativeLayout>
      <StackLayout x:Name="ContentContainer" BackgroundColor="Black" Opacity="0.7" Orientation="Vertical"
               RelativeLayout.XConstraint=
             "{ConstraintExpression Type=RelativeToParent,
                                    Property=Width,
                                    Factor=0}"
               RelativeLayout.YConstraint=
             "{ConstraintExpression Type=RelativeToParent,
                                    Property=Height,
                                    Factor=0.33}"
               RelativeLayout.WidthConstraint=
             "{ConstraintExpression Type=RelativeToParent,
                                    Property=Width,
                                    Factor=1.00}"
               RelativeLayout.HeightConstraint=
             "{ConstraintExpression Type=RelativeToParent,
                                    Property=Height,
                                    Factor=0.33}" >
           <StackLayout x:Name="ControlContainer" Orientation="Vertical" VerticalOptions="CenterAndExpand" >
           <Entry x:Name="EmailInput" VerticalOptions="Center" Placeholder="Email" HorizontalOptions="Fill"  />
           <Entry x:Name="PasswordInput" VerticalOptions="Center"  Placeholder="Password" HorizontalOptions="Fill" IsPassword="true" />
        </StackLayout>
      </StackLayout>
    </RelativeLayout>
    <Grid Grid.Row="1" RowSpacing="0" ColumnSpacing="0">
      <Grid.ColumnDefinitions>
        <ColumnDefinition Width="2*" />
        <ColumnDefinition Width="2*" />
      </Grid.ColumnDefinitions>
      <Button x:Name="LoginButton" Text="Login" BackgroundColor="#FFCF3838" HorizontalOptions="FillAndExpand" Grid.Column="1" Grid.Row="0" BorderWidth="1" BorderColor="White" IsEnabled="{Binding Path=LoginViewModel.IsPageEnabled}" />
      <Button x:Name="RegisterButton" Text="Register" HorizontalOptions="Fill" BackgroundColor="#FFCF3838" Grid.Column="0" Grid.Row="0" BorderWidth="1" BorderColor="White" IsEnabled="{Binding Path=LoginViewModel.IsPageEnabled}" />
    </Grid>

    <StackLayout x:Name="LoadingContainer" BackgroundColor="Black" Opacity="0.7" Orientation="Vertical" IsVisible="{Binding Path=LoginViewModel.IsBusy}"
               RelativeLayout.XConstraint=
             "{ConstraintExpression Type=RelativeToParent,
                                    Property=Width,
                                    Factor=0}"
               RelativeLayout.YConstraint=
             "{ConstraintExpression Type=RelativeToParent,
                                    Property=Height,
                                    Factor=0}"
               RelativeLayout.WidthConstraint=
             "{ConstraintExpression Type=RelativeToParent,
                                    Property=Width,
                                    Factor=0}"
               RelativeLayout.HeightConstraint=
             "{ConstraintExpression Type=RelativeToParent,
                                    Property=Height,
                                    Factor=0}" >
      <StackLayout HeightRequest="70" VerticalOptions="CenterAndExpand">
        <ActivityIndicator IsVisible="{Binding Path=LoginViewModel.IsBusy}"
                         IsRunning="{Binding Path=LoginViewModel.IsBusy}"
                         VerticalOptions="Center"
                         HorizontalOptions="CenterAndExpand"
                         Color="{x:Static common:ColorResources.ActivityIndicatorColor}"
                         RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToParent,
                                Property=Height,
                                Factor=0.33}"
                         RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent,
                                Property=Height,
                                Factor=0.33}" />
        <Label Text="Loading ..." Font="12" TextColor="White" VerticalOptions="Center" HorizontalOptions="Center"></Label>
      </StackLayout>
    </StackLayout>
</Grid>

The StackLayout isVisible="false" at the start and the content and buttons are all visible and working correctly. When isVisible turns to true, the StackLayout overlays the screen with the ActivityIndicator going. As said, all is working well but I can still click any of the buttons originally shown, even though I can see that the StackLayout is completely covering and on top of the screen.

Chances are this is down to your code as I've already done something like this and it works fine, without underlying controls being selectable. Can you package a small example up and send so others can help out? If you want you can send on email, my details are on my Profile. — Pete
Added the XAML above, let me know if you need any more details. — Adam
When I took out the bindings it appeared to work (and replaced these with True value), however the activity indicator wasn't covering the full page. Could you email the solution so I could run this?, or recreate another small example illustrating this so I could assist further? — Pete
I've updated the XAML to show roughly what the entire XAML is. If you need more information, I can send you through the project. I'm using MVVM Light v5 if that makes any difference. — Adam
My bad - I was running this on WindowsPhone without seeing your 'android' tag. When I try on Android - yes I can see exactly your issue despite the appearance of the underlying controls not being selectable, they are. No idea when version 1.3 will be released though. — Pete

Adam Adam · Accepted Answer · 2014-10-25T12:38:37

It is a bug in Xaramin.Forms, scheduled to be fixed in version 1.3.0

[Android] Click through settings now mostly match other platforms (Layouts on top of other elements no longer allow clickthrough unless explicitly requested)

As shown in http://forums.xamarin.com/discussion/25612/xamarin-forms-1-3-0-technology-preview

Click controls under other controls

1 Answers