SfRotator loading issue

[Karro]

Hello,

I have a SfRoator which shows 3 images, with NavigationStripMode set to "Dots". after loading the page the dots won't display and only one image (the one corresponding to the index) is loaded, but after one swipe the other images are loaded and the dots will display as expected. I have also noticed, when saving the XAML file and doing Hot Reload, the control will load without any issue.

<StackLayout>

    <rotator:SfRotator HeightRequest="300"

                       HorizontalOptions="CenterAndExpand"

                       ItemsSource="{Binding MyShop.Images}"

                       NavigationDirection="Horizontal"

                       EnableLooping="True"

                       EnableSwiping="True"

                       SelectedIndex="1"

                       NavigationStripMode="Dots">

      <rotator:SfRotator.ItemTemplate>

        <DataTemplate>

          <Frame Padding="0"

                 BackgroundColor="#124653">

            <Image Source="{Binding Image}"

                   Aspect="AspectFill" />

          </Frame>

        </DataTemplate>

      </rotator:SfRotator.ItemTemplate>

    </rotator:SfRotator>

  </StackLayout>

public partial class MainPage : ContentPage

    {

        public MainPage()

        {

            InitializeComponent();

            BindingContext = new MainPageViewModel();

        }

    }

    public class MainPageViewModel

    {

        public MainPageViewModel()

        {

            MyShop = new Shop();

            MyShop.Images = new ObservableCollection<RotatorModel>()

            {

                new RotatorModel("MyShop1.png"),

                new RotatorModel("MyShop2.png"),

                new RotatorModel("MyShop3.png"),

            };

        }

        public Shop MyShop

        {

            get; set;

        }

    }

    public class Shop

    {

        public ObservableCollection<RotatorModel> Images

        {

            get; set;

        }

    }

    public class RotatorModel

    {

        public RotatorModel(string imageString)

        {

            Image = imageString;

        }

        public String Image

        {

            get; set;

        }

    }

[Sakthivel Palaniyappan]

Hi Mohammed,

Greetings from Syncfusion.

We have analyzed your query  and checked the reported issue based on your provided information but we could not reproduce the issue.

Sample:
https://www.syncfusion.com/downloads/support/directtrac/general/ze/RotatorSample595472311.zip

1. Could you please check the issue with the attached sample and let us know whether it is reproduced or not? If the issue was not reproduced in this sample, please revert us by modifying the sample based on your application along with replication procedure or provide the sample.  

2. Update which platform you are facing the issue Android ,iOS or UWP.

This will be helpful for us to investigate further and provide you a better solution at the earliest.

Regards,
Sakthivel P. 

[Karro]

Hi Sakthivel P. and thank you for your quick response.

Your sample works fine, but after comparing it to my scenario I have found 2 differences.

1. In my scenario I am putting the images in the drawable folder of the Android project (BuildAction = AndroidResource)

2. Which is a bit wierd, the issue happens only when using .png Images! 

I have modified your sample to reproduce the issue.

I am working on Windows 10 machine using Visual Studio 2019 Community,  targeting Android Q 10 (Api Level 29) 

(I am not considering IOS or UWP for now) NugetPackages are: XamarinForms 5.0.0.201 and Syncfusion 18.4.0.43

Attachment: RotatorSample_67cd7e13.zip

[Ruba Shanmugam]

Hi Mohammed,

Thanks for the update.

We suggest a workaround to resolve issue "Dots does not display correctly at initial loading in SfRotator" by adding DataTemplate as like below code snippet


 

<DataTemplate>
 <Grid>
     <Frame Padding="0" BackgroundColor="#124653">
         <Image Source="{Binding Image}" Aspect="AspectFill" />
     </Frame>
</Grid>
</DataTemplate> 

 

We have modified the sample based on this and please find the sample from below link

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/RotatorSample_(2)-836686672  

Please check with the above and let us know if you have any concern.

Regards,
Ruba Shanmugam
 

[Karro]

Thank you, it works as you suggested

[Sakthivel Palaniyappan]

Hi Mohammed,

Thanks for the update.

We are glad to know that reported problem is solved at your end. Please let us know if you need any other assistance on this.

Regards,
Sakthivel P.