Both left and right swipe buttons appear in Android

2 posts, 0 answers
  1. IanV
    IanV avatar
    39 posts
    Member since:
    Dec 2008

    Posted 06 Aug 2019 Link to this post

    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>
  2. Didi
    Admin
    Didi avatar
    356 posts

    Posted 08 Aug 2019 Link to this post

    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
Back to Top