1. Home
  2. Forum
  3. Xamarin.Forms
  4. Using SfRotator with Views Xaml only

Using SfRotator with Views Xaml only

Hi 
Wondering if you could help. I am using your SFRotator control and I am having problem in making it work with a dataselectortemplate

I m building  something  like below image (example only) . I have created a solution in github because file was > 30mb
I basically want each stage to be a (view-vm)





I get an error "LoadTemplate cannot be null".  
If you see my solution  I have  3 views and a main page where the rotator is located using a datatemplateselector.

I could not find any examples that uses views but only once that uses images. I am trying to use views (Xaml only) no code behind

In your website you show "Load Custom View" for various login but no code is available either. (Is it xaml only?)

Please advice how I can use your control with views and how

I have created another sample  where  I have added a "Skip" button but on a physical device the click event does not work. It does work emulator .Strange!!

   
           
                                     ItemsSource="{Binding RotatorItems}" 
                                     SelectedDotColor="Red"
                                     DotsBorderColor="White"
                                     EnableLooping="False"
                                     EnableSwiping="True"
                                     NavigationDirection="Horizontal" 
                                     NavigationStripMode=" Dots" 
                                     BackgroundColor="Transparent"
                                     NavigationStripPosition="Bottom">
               
                   
                       
                           
                               
                               
                               
                           
                           
                               
                           
                           
                                     VerticalOptions="CenterAndExpand">
                               
                                   HeightRequest="88" WidthRequest="88"
                                   HorizontalOptions="Center"
                                   Margin="0,0,0,32"/>
                               
3 Replies
MK Muneesh Kumar G Syncfusion Team May 13, 2019 11:19 AM UTC

Hi Dev, 
 
Greetings from Syncfusion.  
 
Query1: Get an error"LoadTemplate cannot be null" when using a data template selector. 
 
We have validated your query and currently, we don't have support for having a separate template for each item in SfRotator. We have already considered this to be a feature request and it will be available on our upcoming volume 2 main release 2019. Which will be available on end of June 2019. We appreciate your patience until then.  
 
Query 2: How to use control with views  
 
We have created a sample to achieve your requirement with views inside the SfRotator control. Please find the sample from below link. 
 
 
In this sample, we have done the following things 
 
1. Added the DataTemplate with views as like below code snippet 
 
<ContentPage.Resources>
        <ResourceDictionary>
            <DataTemplate x:Key="RotatorTemplate">
                <StackLayout Orientation="Vertical" HorizontalOptions="Center">
                    <Label Text="{Binding Name}" TextColor="Black" WidthRequest="150" VerticalTextAlignment="Center" />
                    <ContentPresenter Content="{Binding ItemTemplate}" />
                </StackLayout>
            </DataTemplate>
        </ResourceDictionary>
    </ContentPage.Resources>
    <ContentPage.Content>
        <sf:SfRotator x:Name="rotator" ItemsSource="{Binding RotatorCollection,Mode=TwoWay }" ItemTemplate="{StaticResource RotatorTemplate}" NavigationDirection="Horizontal" NavigationStripMode="Dots" EnableSwiping="True" EnableLooping="False"  VerticalOptions="CenterAndExpand"
            NavigationStripPosition="Bottom">
        </sf:SfRotator>
    </ContentPage.Content> 
 
 
2. Created the view model with Item template as like below code snippet and set the binding context to the rotator. 
 
 public class RotatorModel
    {

        public RotatorModel(string name, View itemTemplate)
        {
            Name = name;
            ItemTemplate = itemTemplate;
        }
        private String name;
        public String Name
        {
            get { return name; }
            set { name = value; }
        }
       
        private View itemTemplate;
        public View ItemTemplate
        {
            get
            {
                return itemTemplate;
            }

            set
            {
                itemTemplate = value;
            }
        }
    } 
 
Query 2: On a physical device the click event does not work 
 
We have tried to replicate the reported "SfRotator with button in data template does not fire click event" issue at our end by created a sample based on provided code snippet. Since we are not aware of your exact application scenario, so we request you to try our sample and can you please revert us by modifying the sample based on your application along with replication procedure.  
This will be helpful for us to investigate further and provide you a better solution at the earliest.  
 
Please find the sample & video from below link 
 
 
 
Note: We have checked with following devices, Moto E2(API 23), Moto G4(API 24), Samsung SM-G50F (API 26). Please let us device configuration for provide a better solution. 

Please get back us, if you have any concern.  
  
Regards, 
Muneesh Kumar G  
 


MO mobileguy May 13, 2019 01:23 PM UTC

many thanks . that is Brilliant!



MK Muneesh Kumar G Syncfusion Team May 14, 2019 05:43 AM UTC

Hi Dev,  
 
Thanks for your update, please let us know if you have any other queries.  
 
Regards, 
Muneesh Kumar G  


Loader.
Up arrow icon