This is a migrated thread and some comments may be shown as answers.
Both left and right swipe buttons appear in Android
1 Answer 37 Views
This is a migrated thread and some comments may be shown as answers.
IanV
Top achievements
Rank 1
Veteran
IanV asked on 06 Aug 2019, 04:45 PM

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"?>
             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>

1 Answer, 1 is accepted

Sort by
0
Didi
Telerik team
answered on 08 Aug 2019, 07:53 AM
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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Asked by
IanV
Top achievements
Rank 1
Veteran
Answers by
Didi
Telerik team
Share this question
or