Prefer Xamarin button Clicked event as priority over TouchAction: works in Android, fails in iOS iPhone

40 Views Asked by At

I have a Xamarin page with a TouchAction event and some ImageButtons (HorizontalGrid and VerticalGrid). Each of these ImageButtons has a Clicked event.

I work with MS Visual Studio, Here is the XAML code behind the page:

<?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:skia="clr-namespace:SkiaSharp.Views.Forms;assembly=SkiaSharp.Views.Forms" 
             xmlns:tt="clr-namespace:TouchTracking.Forms;assembly=TouchTracking.Forms"
             x:Class="Mobile.StorageBuild"
             BackgroundColor="White"
             Title="APP">
    <ContentPage.Content>
        <Grid>
            <skia:SKCanvasView x:Name="CanvasView" EnableTouchEvents="True" PaintSurface="CanvasView_PaintSurface"/>
            <Grid HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" BackgroundColor="Transparent">
                <StackLayout Orientation="Horizontal" HorizontalOptions="Center" VerticalOptions="Start" Spacing="10" Margin="0,10">
                    <ImageButton x:Name="HorizontalGrid" Source="HorizontalIcon.png" BackgroundColor="White" HorizontalOptions="Center" VerticalOptions="Center" Clicked="HorizontalGrid_Clicked"/>
                    <ImageButton x:Name="VerticalGrid" Source="VerticalIcon.png" BackgroundColor="White" HorizontalOptions="Center" VerticalOptions="Center" Clicked="VerticalGrid_Clicked"/>
                </StackLayout>
                <StackLayout Orientation="Horizontal" HorizontalOptions="Center" VerticalOptions="End" Margin="0,10">
                    <Frame x:Name="DivFrame" BorderColor="Black" Padding="0" IsVisible="True">
                        <Picker x:Name="Division" Title="#" HorizontalTextAlignment="Center" VerticalTextAlignment="Center" TitleColor="Black" TextColor="Black" FontSize="30" SelectedIndexChanged="Division_SelectedIndexChanged"/>
                    </Frame>
                    <ImageButton x:Name="Forward" Source="ArrowRight.png" BackgroundColor="#444444" Clicked="Forward_Clicked"/>
                </StackLayout>

            </Grid>
            <Grid.Effects>
                <tt:TouchEffect Capture="True" x:Name="OnTouch" TouchAction="OnTouch_TouchAction"/>
            </Grid.Effects>
        </Grid>
    </ContentPage.Content>
</ContentPage>

Expected Behaviour (Clicked event over TouchAction event): If you click on ImageButton, the Clicked event should respond. If you click elsewhere, the TouchAction event should respond.

Actual Behavior: Android reacts as expected, but iOS iPhone triggers the TouchAction event even if you click on ImageButton.

My Observation: I confirmed that there is a conflict between the Clicked and the TouchAction events: The ImageButton Clicked event responds as expected with iOS device only if the TouchAction event is completely removed.

My Questions (Removing the TouchAction event is not an acceptable option):

  1. Does anyone know why iOS behaves this way?
  2. Is there a way to set this priority (Clicked event over TouchAction event) explicitly?
  3. Is there any other uncomplicated way to make iOS respond just like Android in this case?

Greetings and thanks to the community in advance.

0

There are 0 best solutions below