Both left and right swipe buttons appear in Android

[IanV]

Android only (iOS is fine) . Telerik 2019.2.708.1, Xamarin.Forms 4.1

See gif video of problem at: https://ibb.co/S0FnhZ1

Basically, both the left and right Swipe items appear when Android users swipe left or right.

<?xml version="1.0" encoding="UTF-8"?>
<ContentView xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:telerikDataControls="clr-namespace:Telerik.XamarinForms.DataControls;assembly=Telerik.XamarinForms.DataControls"
             xmlns:common="clr-namespace:Max.Views.Common"
             xmlns:telerikListView="clr-namespace:Telerik.XamarinForms.DataControls.ListView;assembly=Telerik.XamarinForms.DataControls"
             xmlns:commands="clr-namespace:Telerik.XamarinForms.DataControls.ListView.Commands;assembly=Telerik.XamarinForms.DataControls"
             xmlns:vm="clr-namespace:Max.Views.HotlistPages.Landing"
             xmlns:shared="clr-namespace:UXDivers.Artina.Shared;assembly=UXDivers.Artina.Shared.Base"
             xmlns:max="clr-namespace:Max"
             xmlns:converters="clr-namespace:Max.Converters"
             xmlns:gestures="clr-namespace:MR.Gestures;assembly=MR.Gestures"
             xmlns:input="clr-namespace:Telerik.XamarinForms.Input;assembly=Telerik.XamarinForms.Input"
             x:Class="Max.Views.HotlistPages.Landing.HotlistView">
  <ContentView.Content>
        <!-- Total Grid -->
        <Grid HorizontalOptions="FillAndExpand" >
            <Grid.Resources>
                <ResourceDictionary Source="ErrorCellTemplate.xaml"></ResourceDictionary>
                <ResourceDictionary Source="TaskCellTemplate.xaml"></ResourceDictionary>
                <ResourceDictionary Source="AppointmentTemplateCell.xaml"></ResourceDictionary>
                <ResourceDictionary Source="ListViewGroupHeaderTemplate.xaml"></ResourceDictionary>
                <ResourceDictionary>
                    <converters:NegateBooleanConverter x:Key="NegateBooleanConverter"></converters:NegateBooleanConverter>
                </ResourceDictionary>
            </Grid.Resources>

            <!-- Nothing to show -->
            <common:NoResults IsVisible="{Binding ShowNoResultsHotlist}" FontAwesomeIcon="{x:Static max:FontAwesomeFont.Tasks}" Line1="All clear. Go ride a bike!" Line2="" Command="{Binding RefreshHotlistCommand}"></common:NoResults>


            <!-- Has Some Values -->
            <Grid HorizontalOptions="FillAndExpand"
                  IsVisible="{Binding ShowNoResultsHotlist, Converter={StaticResource NegateBooleanConverter}}">
                <common:LottieLoader IsVisible="{Binding IsLoadingHotlist}" />
                <telerikDataControls:RadListView
                                x:Name="list"
                                GroupHeaderTemplate="{StaticResource ListViewGroupHeaderTemplate}"
                                IsVisible="{Binding IsLoadingHotlist, Converter={StaticResource NegateBooleanConverter}}"
                                ItemsSource="{Binding ItemsHotlist}"
                                BackgroundColor="White"

                                IsPullToRefreshActive="{Binding IsBusyHotlist}"
                                IsPullToRefreshEnabled="True"
                                SelectionMode="None"
                                IsItemSwipeEnabled="True"
                                SwipeOffset="80, 0, 80, 0"
                                ItemSwiping="List_OnItemSwiping"
                                ItemSwipeCompleted="List_OnItemSwipeCompleted"
                                SwipeThreshold="100">


                    <!-- GROUP BY -->
                    <telerikDataControls:RadListView.GroupDescriptors>
                        <!-- TRICK I use a HotListGroupHeaderConverter to change the Date here to a nice pretty print -->
                        <telerikListView:PropertyGroupDescriptor PropertyName="GroupBySort"  SortOrder="Ascending" />
                    </telerikDataControls:RadListView.GroupDescriptors>

                    <!-- COMMANDS -->
                    <!-- COMMANDS -->
                    <!-- COMMANDS -->

                    <telerikDataControls:RadListView.Commands>
                        <commands:ListViewUserCommand Id="PullToRefreshRequested" Command="{Binding RefreshHotlistCommand}" />
                        <commands:ListViewUserCommand Id="ItemTap" Command="{Binding HotlistTapCommand}" />
                    </telerikDataControls:RadListView.Commands>


                    <!-- TEMPLATE CELLS -->
                    <!-- TEMPLATE CELLS -->
                    <!-- TEMPLATE CELLS -->

                    <telerikDataControls:RadListView.ItemTemplateSelector>
                        <vm:HotlistItemSelector
                                        AppointmentTemplate="{StaticResource AppointmentCellTemplate}"
                                        TaskTemplate="{StaticResource TaskCellTemplate}"
                                        ErrorTemplate="{StaticResource ErrorCellTemplate}"/>
                    </telerikDataControls:RadListView.ItemTemplateSelector>

            <!-- SWIPE -->
            <!-- SWIPE -->
            <!-- SWIPE -->

            <telerikDataControls:RadListView.ItemSwipeContentTemplate>
                <DataTemplate>
                    <Grid
                              Margin="0"
                              Padding="0"
                              ColumnSpacing="0"
                              RowSpacing="0"
                              BackgroundColor="White">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="80" />
                            <ColumnDefinition Width="*" />
                            <ColumnDefinition Width="80" />
                        </Grid.ColumnDefinitions>


                        <!-- EDIT -->
                        <!-- EDIT -->
                        <!-- EDIT -->
                        <Grid Grid.Column="0"
                              BackgroundColor="{StaticResource WarningDarkerColor}"
                              Grid.ColumnSpacing="0"
                              Grid.RowSpacing="0"
                              Padding="0"
                              Margin="0,0">
                            <input:RadButton CornerRadius="0"
                                                    HorizontalOptions="FillAndExpand"
                                                    VerticalOptions="FillAndExpand"
                                                    BackgroundColor="Transparent"
                                                    Style="{StaticResource FontAwesomeFontIcon}"
                                                    Text="{x:Static max:FontAwesomeFont.History}"
                                                    TextColor="White"
                                                    FontSize="{Binding UIButtonSize}"
                                                    Command="{Binding BindingContext.MarkEventAsPostponedCommand, Source={x:Reference list}}"
                                                    CommandParameter="{Binding .}"
                                                     />
                        </Grid>

                        <Grid Grid.Column="2"
                                  BackgroundColor="{StaticResource OkColor}"
                                  Grid.ColumnSpacing="0"
                                  Grid.RowSpacing="0"
                                  Padding="0"
                                  Margin="0,0">
                            <input:RadButton CornerRadius="0"
                                                        HorizontalOptions="FillAndExpand"
                                                        VerticalOptions="FillAndExpand"
                                                        BackgroundColor="Transparent"
                                                        Style="{StaticResource FontAwesomeFontIcon}"
                                                        Text="{x:Static max:FontAwesomeFont.CheckSquare}"
                                                        TextColor="White"
                                                        FontSize="{Binding UIButtonSize}"
                                                        Command="{Binding BindingContext.MarkEventAsCompleteCommand, Source={x:Reference list}}"
                                                        CommandParameter="{Binding .}"
                                                         />
                        </Grid>




                    </Grid>
                </DataTemplate>
            </telerikDataControls:RadListView.ItemSwipeContentTemplate>

                </telerikDataControls:RadListView>
            </Grid>

            <!-- FAB BUTTON -->
            <!-- FAB BUTTON -->
            <!-- FAB BUTTON -->

            <!-- The Box View appears as a layout over the UI to show a grey transparent -->
            <gestures:BoxView
                    IsVisible="{Binding IsShowCreateEventButtonShowMenu}"
                    Grid.Row="0"
                    BackgroundColor="#22000000"
                    TappedCommand="{Binding ToggleCreateEventCommand}" />

            <Grid VerticalOptions="End" Margin="0,0,10,70"
                      Grid.Row="0"
                      RowSpacing="0"
                      IsVisible="{Binding IsShowCreateEventButtonShowMenu}"
                      HorizontalOptions="End"
                      WidthRequest="180">
                <Grid.RowDefinitions>
                    <RowDefinition Height="60"></RowDefinition>
                    <RowDefinition Height="60"></RowDefinition>
                </Grid.RowDefinitions>


                <common:FabActionButton
                        Grid.Row="0"
                        Text="Appointment"
                        Image="listviewcell_appointment.png"
                        Command="{Binding ShowCreateAppointmentCommand}"
                        CommandParameter="{Binding .}">
                </common:FabActionButton>

                <common:FabActionButton
                        Grid.Row="1"
                        Text="Task"
                        Image="listviewcell_task.png"
                        Command="{Binding ShowCreateTaskCommand}"
                        CommandParameter="{Binding .}">
                </common:FabActionButton>


            </Grid>

            <Grid Grid.Row="0" VerticalOptions="EndAndExpand" HorizontalOptions="EndAndExpand" IsVisible="{Binding IsShowCreateEventButton}">
                <common:FabPageButton x:Name="fabCreateButton"
                                          IsRotated="{Binding IsShowCreateEventButtonShowMenu}"
                                          Command="{Binding ToggleCreateEventCommand}">
                </common:FabPageButton>
            </Grid>


        </Grid>
    </ContentView.Content>
</ContentView>

[Didi]

Hello Ian,

I have reviewed the attached code and I see that the The RadListView SwipeOffset and SwipeThreshhold are with equal values. SwipeThreshold property sets the value that needs to be exceeded in order for the swipe gesture to be initialized, in other words - the minimum swipe gesture length in pixels. So, the value for the SwipeThreshold should be a smaller number than the SwipeOffset. I can assure you that the RadListView documentation will be updated regarding this.

Regarding to the SwipeContentTemplate issue, please note that the left and the right content are visible when swipe left or right. This could be avoid when BackgroundColor is set to the layout element inside the TemplateSelector/TemplateCell. By default its value is Transparent. As the RadListView BackgroundColor is White, I suggest you set the same value to the layout element inside the template selectors.

Give the suggestions a try and let me know how it goes.

Regards,
Didi
Progress Telerik