First swipe on the control does not work

[David]

We are trying out the RadSlideView but we are having a problem with the first swipe on the control when the app first starts.

Our page RadSlideView correctly displays the first ContentView.

When we swipe left to move to the next content view it briefly appears and then disappears and we are left with a blank page. The indicators do not change.

If we then swipe again we do move to the next content view and the indicator moves and if we swipe back again the first page appears correctly.

In addition we have hooked up a command button which increments the SelectedIndex property of the control and this works correctly.

We are not seeing any exceptions in the debug window or the ios device log.

Below is our page and view model

Any advice would be helpful.

Thanks

<?xml version="1.0" encoding="utf-8" ?>
<pageBase:ContentPageBase xmlns="http://xamarin.com/schemas/2014/forms"
                xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
                xmlns:base="clr-namespace:Tempcover.Mobile.Ui.ViewModels.Base;assembly=Tempcover.Mobile.Ui"
                xmlns:pageBase="clr-namespace:Tempcover.Mobile.Ui.Views.Base;assembly=Tempcover.Mobile.Ui"
                xmlns:primitives="clr-namespace:Telerik.XamarinForms.Primitives;assembly=Telerik.XamarinForms.Primitives"
                x:Class="Tempcover.Mobile.Ui.Views.IntroCarouselPage"
                          BackgroundColor="White"
                base:ViewModelLocator.AutoWireViewModel="true">


    <Grid>
    <Grid.RowDefinitions>
            <RowDefinition Height="*"/>
            <RowDefinition Height="Auto"/>
        </Grid.RowDefinitions>
        <primitives:RadSlideView
            BackgroundColor="White"
            Grid.Row="0"
            Grid.Column="0"
            x:Name="SlideView"
            IndicatorText="•"
            IndicatorFontSize="64"
            IndicatorColor="LightBlue"
            SelectedIndicatorText="•"
            SelectedIndicatorFontSize="96"
            SelectedIndicatorColor="{DynamicResource Primary}"
            ShowButtons="false"
            SelectedIndex="{Binding SelectedIndex}">

            <primitives:RadSlideView.ItemsSource>
                <x:Array Type="{x:Type ContentView}">
                    <ContentView>
                        <StackLayout Style="{StaticResource IntroCarouselStackLayoutStyle}">
                            <Image Source="tempcover.png" Margin="10,0,10,0" VerticalOptions="Center" HeightRequest="128" />
                            <Label VerticalOptions="Start" Style="{StaticResource IntroCarouselPanelLabelHeaderStyle}" Text="Fast, flexible and affordable temporary insurance"></Label>
                        </StackLayout>
                    </ContentView>
                    <ContentView>
                        <StackLayout  Style="{StaticResource IntroCarouselStackLayoutStyle}">
                            <Image Source="Page2.png" VerticalOptions="Center" HeightRequest="100" />
                            <Label Style="{StaticResource IntroCarouselPanelLabelHeaderStyle}" Text="Find and compare short term cover quicker than ever before"></Label>
                            <Label Style="{StaticResource IntroCarouselPanelLabelSubheaderStyle}" Text="Create your account and get instant accesss to a range of quotes" />
                        </StackLayout>
                    </ContentView>
                    <ContentView >
                        <StackLayout   Style="{StaticResource IntroCarouselStackLayoutStyle}">
                            <Image Source="Page3.png" VerticalOptions="Center" HeightRequest="100" />
                            <Label Style="{StaticResource IntroCarouselPanelLabelHeaderStyle}" Text="View all your policy documents in one convenient place"></Label>
                            <Label Style="{StaticResource IntroCarouselPanelLabelSubheaderStyle}" Text="Login to get easy access to your documents and update your details in seconds" />
                        </StackLayout>
                    </ContentView>
                    <ContentView >
                        <StackLayout  Style="{StaticResource IntroCarouselStackLayoutStyle}">
                            <Image Source="Page4.png" VerticalOptions="Center" HeightRequest="100" />
                            <Label Style="{StaticResource IntroCarouselPanelLabelHeaderStyle}" Text="And that's it, everything you need for temporary insurance is right here"></Label>
                            <Label Style="{StaticResource IntroCarouselPanelLabelSubheaderStyle}" Text="Ready to get started? Click the button below to login and begin!" />
                        </StackLayout>
                    </ContentView>

                </x:Array>
            </primitives:RadSlideView.ItemsSource>
        </primitives:RadSlideView>
        <StackLayout Grid.Row="1" Grid.Column="0">
            <Button Margin="10" x:Name="SeeMoreCommand" Text="{Binding BottomButtonText}"  Style="{StaticResource ButtonPrimaryStyle}" Command="{Binding SeeMoreCommand}"/>
            <Label HorizontalOptions="Center" Text="Already have an account?"></Label>
            <Label Text="Sign in now" HorizontalOptions="Center" TextColor="Blue">
                <Label.GestureRecognizers>
                    <TapGestureRecognizer NumberOfTapsRequired="1" Command="{Binding SignInNowCommand}"/>
                </Label.GestureRecognizers>
            </Label>
        </StackLayout>
    </Grid>
    </pageBase:ContentPageBase>

using System.Collections.ObjectModel;
using System.Threading.Tasks;
using Tempcover.Mobile.Ui.ViewModels.Base;
using Tempcover.Mobile.Ui.ViewModels.Enums;
using Xamarin.Forms;
using System.Windows.Input;
using System;

namespace Tempcover.Mobile.Ui.ViewModels
{
    public class IntroCarouselViewModel : ViewModelBase
    {


        public IntroCarouselViewModel()
        {
            CarouselSource = new ObservableCollection<View>();
            SelectedIndex = 0;
        }

        public override Task<Initialise> InitializeAsync(object navigationData)
        {
            return Task.FromResult(Initialise.Success);
        }

        public Command MyCommand { protected set; get; }

        public ICommand SignInNowCommand
        {
            get
            {
                return new Command(() =>
                {
                    throw new NotImplementedException();
                });
            }
        }


        private string _person;
        public string Person
        {
            get { return _person; }
            set
            {
                _person = value;
                RaisePropertyChanged(() => Person);
            }
        }

        private int _selectedIndex;
        public int SelectedIndex
        {
            get { return _selectedIndex; }

            set
            {
                _selectedIndex = value;
                RaisePropertyChanged(() => SelectedIndex);
                RaisePropertyChanged(() => BottomButtonText);
            }
        }

        ObservableCollection<View> _carouselSource;
        public ObservableCollection<View> CarouselSource
        {
            set
            {
                _carouselSource = value;
                RaisePropertyChanged(() => CarouselSource);
            }
            get
            {
                return _carouselSource;
            }
        }

        private string _BottomButtonText;
        public string BottomButtonText
        {
            get {
                switch (SelectedIndex)
                {
                    case 3:
                        return "Set up your account";
                    default:
                        return "See more";
                }
            }

        }

        public ICommand SeeMoreCommand
        {
            get
            {
                return new Command(() =>
                {
                    if (SelectedIndex <3)
                    {
                        SelectedIndex++;
                    }
                    else
                    {
                        // navigate to the login page
                    }
                });
            }
        }


    }
}

using System.Diagnostics;
using Tempcover.Mobile.Ui.Views.Base;
using Xamarin.Forms;
using Xamarin.Forms.Xaml;

namespace Tempcover.Mobile.Ui.Views
{
    [XamlCompilation(XamlCompilationOptions.Compile)]
    public partial class IntroCarouselPage : ContentPageBase
    {
        public IntroCarouselPage()
        {
            InitializeComponent();
            NavigationPage.SetHasNavigationBar(this, false);
        }
    }
}

 

[Didi]

Hello David,

Thank you for the provided code.

We have two issues logged in our Feedback portal regarding the SlideView SelectedIndex update for iOS. 

SlideView: [iOS] After swiping left in a control with ContentViews, SelectedIndex is not updated

SlideView: [iOS] The Selected index is not updated the first time swiped

Currently, I could not suggest any feasible workaround for these issues. I can assure you that their priority is raised, so a fix will be included in some of the upcoming releases. Please follow the items in our Feedback portal to get notified as soon as we start working on them.

Regards,
Didi
Progress Telerik

[David]

Thanks for your response. We will have to try a different control library.

[Didi]

Hi David,

I am sorry to hear that these issues make you switch to another control's library. I understand that they are critical and affects the working process. 

I hope that you will take a look at the other controls Telerik UI for Xamarin suite provides.

Regards,
Didi
Progress Telerik