Swipe Jesture does not work in Android but well workd in iOS.

[David1930]

Type of issue

Code doesn't work

Description

I'm developing in Visual Stuido code for Mac, Dotnet version 8.0.403I. I'm experiencing an issue where the swipe gesture doesn't triger when i swipe on Android emulator. But it triger well in iOS. I've placed a CollectionView inside an AbsoluteLayout so that users can scroll and read text. At the top, I've used Shell.TitleView to place a Configuration button. When clicked, it displays a MenuBar at the bottom using AbsoluteLayout. After reading the text, I intended for the swipe gesture to show the next.

<Shell.TitleView>
    <Grid ColumnDefinitions="*, Auto, *"
          VerticalOptions="Center">
        <Label Grid.Column="1"
               x:Name="TitleLabel"
               HorizontalOptions="Center"
               VerticalOptions="Center"
               WidthRequest="200"
               Style="{StaticResource TitleTextStyle}"
               Margin="0,0,50,0"/>
        <skia:SKCanvasView Grid.Column="2"
                           PaintSurface="OnPaintSurface"
                           VerticalOptions="Center"
                           HorizontalOptions="End"
                           Margin="20,0,20,0"
                           WidthRequest="40"
                           HeightRequest="20"
                           BackgroundColor="Transparent">
            <skia:SKCanvasView.GestureRecognizers>
                <TapGestureRecognizer Tapped="OnSettingsClicked"/>
            </skia:SKCanvasView.GestureRecognizers>
        </skia:SKCanvasView>
    </Grid>
</Shell.TitleView>

<AbsoluteLayout VerticalOptions="Fill"
                HorizontalOptions="Fill"
                AbsoluteLayout.LayoutBounds="0,0,1,1"
                AbsoluteLayout.LayoutFlags="All"
                InputTransparent="True">
    <AbsoluteLayout.GestureRecognizers>
        <SwipeGestureRecognizer Direction="Left"
                                Swiped="OnLeftSwipped"/>
        <SwipeGestureRecognizer Direction="Right"
                                Swiped="OnRightSwipped"/>
    </AbsoluteLayout.GestureRecognizers> 

    <Grid RowDefinitions="Auto, *, Auto"
          VerticalOptions="Start"
          AbsoluteLayout.LayoutBounds="0,0,1,1"
          AbsoluteLayout.LayoutFlags="All">
        <Grid Grid.Row="0"
              ColumnDefinitions="*, Auto, *"
              VerticalOptions="Center">
            <BoxView Grid.Column="0"
                     WidthRequest="0"/>
            <Label Grid.Column="1"
                   Text="{Binding Title} "
                   Style="{StaticResource TitleTextStyle}"
                   VerticalOptions="Center"
                   HorizontalOptions="Center"
                   Margin="0,0,0,10"/>
        </Grid>

        <!-- Bible Text  Output -->
        <CollectionView x:Name="collectionView"
                        Grid.Row="1"
                        ItemsSource="{Binding Verses}"
                        ItemsLayout="VerticalList"
                        VerticalOptions="Fill">
            <CollectionView.ItemTemplate>
                <DataTemplate x:DataType="models:VerseDto">
                    <Grid ColumnDefinitions="Auto, *"
                          Padding="0,0,0,10"
                          ColumnSpacing="0">
                        <Label Grid.Column="0"
                               Text="{Binding VerseNo}"
                               Style="{StaticResource BibleTextStyle}"
                               VerticalOptions="Start"
                               HorizontalTextAlignment="Center"
                               TranslationY="-3"/>
                        <Label Grid.Column="1"
                               Text="{Binding Text}"
                               Style="{StaticResource BibleTextStyle}"
                               LineBreakMode="CharacterWrap"
                               VerticalOptions="Center"
                               HorizontalOptions="Fill"
                               HorizontalTextAlignment="Start"/>
                    </Grid>
                </DataTemplate>
            </CollectionView.ItemTemplate>
        </CollectionView>
    </Grid>

    <!-- MenuBar Display -->
    <Grid x:Name="MenuBar"
          HeightRequest="50"
          IsVisible="{Binding MenuBarIsVisible}"
          AbsoluteLayout.LayoutBounds="0,1,1,50"
          AbsoluteLayout.LayoutFlags="PositionProportional,WidthProportional">
        <!-- App Theme Specify(Grid Background, Label, Button) -->
        <Grid.BackgroundColor>
            <AppThemeBinding Light="LightGray"
                             Dark="#333333"/>
        </Grid.BackgroundColor>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="Auto"/>
            <ColumnDefinition Width="Auto"/>
            <ColumnDefinition Width="Auto"/>
            <ColumnDefinition Width="Auto"/>
        </Grid.ColumnDefinitions>
        <Label x:Name="FontSizeLabel"
               Grid.Column="1"
               Style="{StaticResource PrimaryTextStyle}"
               VerticalOptions="Center"
               HorizontalOptions="End"
               Margin="0,0,10,0">
            <Label.TextColor>
                <AppThemeBinding Light="Black"
                                 Dark="White"/>
            </Label.TextColor>
        </Label>
        <Button Grid.Column="2"
                Text="+"
                Clicked="OnIncreaseFontSizeClicked"
                CornerRadius="5"
                BorderWidth="1"
                VerticalOptions="Center"
                HorizontalOptions="End"
                Margin="0,0,10,0">
            <Button.BackgroundColor>
                <AppThemeBinding Light="LightGray"
                                 Dark="DarkGray"/>
            </Button.BackgroundColor>
            <Button.TextColor>
                <AppThemeBinding Light="Black"
                                 Dark="White"/>
            </Button.TextColor>
            <Button.BorderColor>
                <AppThemeBinding Light="#808080"
                                 Dark="#CCCCCC"/>
            </Button.BorderColor>
        </Button>
        <Button Grid.Column="3"
                Text="-"
                Clicked="OnDecreaseFontSizeClicked"
                CornerRadius="5"
                BorderWidth="1"
                VerticalOptions="Center"
                HorizontalOptions="End"
                Margin="0,0,10,0">
            <Button.BackgroundColor>
                <AppThemeBinding Light="LightGray"
                                 Dark="DarkGray"/>
            </Button.BackgroundColor>
            <Button.TextColor>
                <AppThemeBinding Light="Black"
                                 Dark="White"/>
            </Button.TextColor>
            <Button.BorderColor>
                <AppThemeBinding Light="#808080"
                                 Dark="#CCCCCC"/>
            </Button.BorderColor>
        </Button>
        <Button Grid.Column="4"
                Text="Hide"
                Clicked="OnHideMenuBarClicked"
                CornerRadius="5"
                BorderWidth="1"
                VerticalOptions="Center"
                HorizontalOptions="End"
                Margin="0,0,10,0">
            <Button.BackgroundColor>
                <AppThemeBinding Light="LightGray"
                                 Dark="DarkGray"/>
            </Button.BackgroundColor>
            <Button.TextColor>
                <AppThemeBinding Light="Black"
                                 Dark="White"/>
            </Button.TextColor>
            <Button.BorderColor>
                <AppThemeBinding Light="#808080"
                                 Dark="#CCCCCC"/>
            </Button.BorderColor>
        </Button>
    </Grid>
</AbsoluteLayout>

[여기에 피드백 입력]

Page URL

https://learn.microsoft.com/ko-kr/dotnet/maui/fundamentals/gestures/swipe?view=net-maui-9.0

Content source URL

https://github.com/dotnet/docs-maui/blob/main/docs/fundamentals/gestures/swipe.md

Document Version Independent Id

18b94b7b-80ce-cc78-6ad7-9e5fd8292d13

Platform Id

812f456d-74e5-fc31-c883-d58608fd42f0

Article author

@davidbritch

Metadata

• ID: 18b94b7b-80ce-cc78-6ad7-9e5fd8292d13
• PlatformId: 812f456d-74e5-fc31-c883-d58608fd42f0
• Service: dotnet-mobile
• Sub-service: dotnet-maui

Related Issues

[David1930]

I found that this issue can be resolved by attaching GestureRecognizers to a Grid within the CollectionView’s ItemTemplate, instead of to the AbsoluteLayout. This is because, on Android, touch events are processed from the topmost view down to the child views, and since the CollectionView handles touch events by default for scrolling, it prevents the events from being passed to the parent AbsoluteLayout. Therefore, by adding GestureRecognizers to the Grid inside the CollectionView’s ItemTemplate, it becomes possible to handle both swipe gestures and scroll gestures.

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:models="clr-namespace:McCheyneBible.Models"
             xmlns:viewModels="clr-namespace:McCheyneBible.ViewModels"
             xmlns:skia="clr-namespace:SkiaSharp.Views.Maui.Controls;assembly=SkiaSharp.Views.Maui.Controls"
             x:Class="McCheyneBible.Views.BibleTextPage"
             x:DataType="viewModels:BibleTextPageViewModel">

    <Shell.TitleView>
        <Grid ColumnDefinitions="*, Auto, *"
              VerticalOptions="Center">
            <Label Grid.Column="1"
                   Text="{Binding Version}"
                   HorizontalOptions="Center"
                   VerticalOptions="Center"
                   WidthRequest="200"
                   Style="{StaticResource TitleTextStyle}"
                   Margin="0,0,50,0"/>
            <skia:SKCanvasView Grid.Column="2"
                               PaintSurface="OnPaintSurface"
                               VerticalOptions="Center"
                               HorizontalOptions="End"
                               Margin="20,0,20,0"
                               WidthRequest="40"
                               HeightRequest="20"
                               BackgroundColor="Transparent">
                <skia:SKCanvasView.GestureRecognizers>
                    <TapGestureRecognizer Tapped="OnSettingsClicked"/>
                </skia:SKCanvasView.GestureRecognizers>
            </skia:SKCanvasView>
        </Grid>
    </Shell.TitleView>

    <AbsoluteLayout VerticalOptions="Fill"
                    HorizontalOptions="Fill"
                    AbsoluteLayout.LayoutBounds="0,0,1,1"
                    AbsoluteLayout.LayoutFlags="All">
        
        <Grid RowDefinitions="Auto, *, Auto"
              VerticalOptions="Fill"
              HorizontalOptions="Fill"
              AbsoluteLayout.LayoutBounds="0,0,1,1"
              AbsoluteLayout.LayoutFlags="All">
            <Grid Grid.Row="0"
                  ColumnDefinitions="*, Auto, *"
                  VerticalOptions="Center">
                <BoxView Grid.Column="0"
                         WidthRequest="0"/>
                <Label Grid.Column="1"
                       Text="{Binding Title} "
                       Style="{StaticResource TitleTextStyle}"
                       VerticalOptions="Center"
                       HorizontalOptions="Center"
                       Margin="0,0,0,10"/>
            </Grid>

            <CollectionView x:Name="collectionView"
                            Grid.Row="1"
                            ItemsSource="{Binding Verses}"
                            ItemsLayout="VerticalList"
                            VerticalOptions="Fill"
                            HorizontalOptions="Fill"
                            Scrolled="OnCollectionViewScrolled">
                <CollectionView.ItemTemplate>
                    <DataTemplate x:DataType="models:VerseDto">
                        <Grid ColumnDefinitions="Auto, *"
                              Padding="0,0,0,10"
                              ColumnSpacing="0">
                            <!-- SwipeGesture(iOS, Andriod both flatform OK -->
                            <Grid.GestureRecognizers>
                                <SwipeGestureRecognizer Direction="Left"
                                                        Swiped="OnLeftSwipped"/>
                                <SwipeGestureRecognizer Direction="Right"
                                                        Swiped="OnRightSwipped"/>
                            </Grid.GestureRecognizers>
                            <Label Grid.Column="0"
                                   Text="{Binding VerseNo}"
                                   Style="{StaticResource BibleTextStyle}"
                                   VerticalOptions="Start"
                                   HorizontalTextAlignment="Center"
                                   TranslationY="-3"/>
                            <Label Grid.Column="1"
                                   Text="{Binding Text}"
                                   Style="{StaticResource BibleTextStyle}"
                                   LineBreakMode="CharacterWrap"
                                   VerticalOptions="Center"
                                   HorizontalOptions="Fill"
                                   HorizontalTextAlignment="Start"/>
                        </Grid>
                    </DataTemplate>
                </CollectionView.ItemTemplate>
            </CollectionView>

            <Grid Grid.Row="2"
                  ColumnDefinitions="Auto,Auto"
                  HorizontalOptions="Center"
                  ColumnSpacing="5">
                <Button Grid.Column="0"
                        x:Name="PreviousButton"
                        Command="{Binding GoToPreviousChapterCommand}"
                        IsVisible="{Binding IsPreviousButtonEnabled}"
                        HorizontalOptions="Center"
                        WidthRequest="90"
                        HeightRequest="40">
                    <Button.BackgroundColor>
                        <AppThemeBinding Light="LightGray"
                                         Dark="DarkGray"/>
                    </Button.BackgroundColor>
                    <Button.TextColor>
                        <AppThemeBinding Light="Black"
                                         Dark="White"/>
                    </Button.TextColor>
                    <Button.BorderColor>
                        <AppThemeBinding Light="#808080"
                                         Dark="#CCCCCC"/>
                    </Button.BorderColor>
                </Button>
                <Button Grid.Column="1"
                        x:Name="NextButton"
                        Command="{Binding GoToNextChapterCommand}"
                        IsVisible="{Binding IsNextButtonEnabled}"
                        HorizontalOptions="Center"
                        WidthRequest="90"
                        HeightRequest="40">
                    <Button.BackgroundColor>
                        <AppThemeBinding Light="LightGray"
                                         Dark="DarkGray"/>
                    </Button.BackgroundColor>
                    <Button.TextColor>
                        <AppThemeBinding Light="Black"
                                         Dark="White"/>
                    </Button.TextColor>
                    <Button.BorderColor>
                        <AppThemeBinding Light="#808080"
                                         Dark="#CCCCCC"/>
                    </Button.BorderColor>
                </Button>
            </Grid>
        </Grid>

        <Grid x:Name="MenuBar"
              HeightRequest="50"
              IsVisible="{Binding MenuBarIsVisible}"
              AbsoluteLayout.LayoutBounds="0,1,1,50"
              AbsoluteLayout.LayoutFlags="PositionProportional,WidthProportional">
            
            <Grid.BackgroundColor>
                <AppThemeBinding Light="LightGray"
                                 Dark="#333333"/>
            </Grid.BackgroundColor>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="Auto"/>
                <ColumnDefinition Width="Auto"/>
                <ColumnDefinition Width="Auto"/>
                <ColumnDefinition Width="Auto"/>
            </Grid.ColumnDefinitions>
            <Label x:Name="FontSizeLabel"
                   Grid.Column="1"
                   Style="{StaticResource PrimaryTextStyle}"
                   VerticalOptions="Center"
                   HorizontalOptions="End"
                   Margin="0,0,10,0">
                <Label.TextColor>
                    <AppThemeBinding Light="Black"
                                     Dark="White"/>
                </Label.TextColor>
            </Label>
            <Button Grid.Column="2"
                    Text="+"
                    Clicked="OnIncreaseFontSizeClicked"
                    CornerRadius="5"
                    BorderWidth="1"
                    VerticalOptions="Center"
                    HorizontalOptions="End"
                    Margin="0,0,10,0">
                <Button.BackgroundColor>
                    <AppThemeBinding Light="LightGray"
                                     Dark="DarkGray"/>
                </Button.BackgroundColor>
                <Button.TextColor>
                    <AppThemeBinding Light="Black"
                                     Dark="White"/>
                </Button.TextColor>
                <Button.BorderColor>
                    <AppThemeBinding Light="#808080"
                                     Dark="#CCCCCC"/>
                </Button.BorderColor>
            </Button>
            <Button Grid.Column="3"
                    Text="-"
                    Clicked="OnDecreaseFontSizeClicked"
                    CornerRadius="5"
                    BorderWidth="1"
                    VerticalOptions="Center"
                    HorizontalOptions="End"
                    Margin="0,0,10,0">
                <Button.BackgroundColor>
                    <AppThemeBinding Light="LightGray"
                                     Dark="DarkGray"/>
                </Button.BackgroundColor>
                <Button.TextColor>
                    <AppThemeBinding Light="Black"
                                     Dark="White"/>
                </Button.TextColor>
                <Button.BorderColor>
                    <AppThemeBinding Light="#808080"
                                     Dark="#CCCCCC"/>
                </Button.BorderColor>
            </Button>
            <Button Grid.Column="4"
                    Text="Hide"
                    Clicked="OnHideMenuBarClicked"
                    CornerRadius="5"
                    BorderWidth="1"
                    VerticalOptions="Center"
                    HorizontalOptions="End"
                    Margin="0,0,10,0">
                <Button.BackgroundColor>
                    <AppThemeBinding Light="LightGray"
                                     Dark="DarkGray"/>
                </Button.BackgroundColor>
                <Button.TextColor>
                    <AppThemeBinding Light="Black"
                                     Dark="White"/>
                </Button.TextColor>
                <Button.BorderColor>
                    <AppThemeBinding Light="#808080"
                                     Dark="#CCCCCC"/>
                </Button.BorderColor>
            </Button>
        </Grid>
    </AbsoluteLayout>
</ContentPage>

[jfversluis]

This seems to be an issue in the .NET MAUI SDK and not with the docs, please open an issue on the .NET MAUI repository at https://github.com/dotnet/maui is this is still not resolved for you, thanks!