Slide view with ItemTemplateSelector gets out of sync on iOS when swiping

[Valentin]

This is possibly related to the fix for  OnSelectTemplate does not get called for each item in ItemsSource?

I have a slide view with four pages, different templates for each page. On iOS I observed the following:

- if I use the navigation buttons all is good, the proper slide template is selected and the indicators are properly updated to reflect the selected slide index.

- if I start the app again to re-initialize the slide view and instead swipe from the first slide to the second, the second template is used, but the indicator stays positioned on the first page. See the attached screenshot. If I swipe again to the right the second template is used again and the indicator is finally showing the second page is selected. After this I can swipe left and right and all is good.

I tried this both in the simulator and on device using the latest Xamarin Forms and Telerik components

I suspect it's a small bug on iOS. I did not notice this on Android.

Could you please confirm and fix? Thank you.

 

 

 

[Valentin]

Here's some sample code you can use to recreate this issue:

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:RadSlideView3"
             xmlns:telerikPrimitives="clr-namespace:Telerik.XamarinForms.Primitives;assembly=Telerik.XamarinForms.Primitives"
             x:Class="RadSlideView3.MainPage">

    <telerikPrimitives:RadSlideView HorizontalContentOptions="CenterAndExpand" VerticalContentOptions="CenterAndExpand" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
        <telerikPrimitives:RadSlideView.ItemsSource>
            <x:Array Type="{x:Type x:Int32}">
                <x:Int32>1</x:Int32>
                <x:Int32>2</x:Int32>
                <x:Int32>3</x:Int32>
                <x:Int32>4</x:Int32>
            </x:Array>
        </telerikPrimitives:RadSlideView.ItemsSource>
        <telerikPrimitives:RadSlideView.ItemTemplateSelector>
            <local:TemplateSelector>
                <local:TemplateSelector.Template1>
                    <DataTemplate>
                        <ContentView>
                            <Label Text="Page 1" HorizontalTextAlignment="Center" VerticalTextAlignment="Center"/>
                        </ContentView>
                    </DataTemplate>
                </local:TemplateSelector.Template1>
                <local:TemplateSelector.Template2>
                    <DataTemplate>
                        <ContentView>
                            <Label Text="Page 2" HorizontalTextAlignment="Center" VerticalTextAlignment="Center"/>
                        </ContentView>
                    </DataTemplate>
                </local:TemplateSelector.Template2>
                <local:TemplateSelector.Template3>
                    <DataTemplate>
                        <ContentView>
                            <Label Text="Page 3" HorizontalTextAlignment="Center" VerticalTextAlignment="Center"/>
                        </ContentView>
                    </DataTemplate>
                </local:TemplateSelector.Template3>
                <local:TemplateSelector.Template4>
                    <DataTemplate>
                        <ContentView>
                            <Label Text="Page 4" HorizontalTextAlignment="Center" VerticalTextAlignment="Center"/>
                        </ContentView>
                    </DataTemplate>
                </local:TemplateSelector.Template4>
            </local:TemplateSelector>
        </telerikPrimitives:RadSlideView.ItemTemplateSelector>
    </telerikPrimitives:RadSlideView>
</ContentPage>

 

Code behind

using Xamarin.Forms;

namespace RadSlideView3
{
    public partial class MainPage : ContentPage
    {
        public MainPage()
        {
            InitializeComponent();
        }
    }
}

 

Template selector

using System;
using Xamarin.Forms;

namespace RadSlideView3
{
    public class TemplateSelector : DataTemplateSelector
    {
        public DataTemplate Template1 { get; set; }
        public DataTemplate Template2 { get; set; }
        public DataTemplate Template3 { get; set; }
        public DataTemplate Template4 { get; set; }

        protected override DataTemplate OnSelectTemplate(object item, BindableObject container)
        {
            var index = (int)item;
            switch (index)
            {
                case 1:
                    return Template1;
                case 2:
                    return Template2;
                case 3:
                    return Template3;
                case 4:
                    return Template4;
                default:
                    throw new NotImplementedException();

            }
        }
    }
}

[Didi]

Hi Valentin,

Thank you for the provided code.

I have tested the described scenario and I have reproduced the issue on iOS. I have logged this in our Feedback portal and you could follow the item on the provided link: SlideView: [iOS] The Selected index is not updated the first time swiped. You can also find your Telerik point updated for this report. Currently, there is no suitable workaround I could suggest. 

Let me know if you have any other questions or concerns.

Regards,
Didi
Progress Telerik

[Valentin]

Thank you Didi, look forward to a fix soon.