We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Rotator in NavigationDrawer

Hello ,

I made a Rotator from the example's , looks great.

Now trying to do a NavigationDrawer like in the example's

But in the NavigationDrawer there is an image , the question is can i put a rotator in the NavigationDrawer instead of the image ?




7 Replies

HM Hemalatha Marikumar Syncfusion Team October 22, 2019 05:24 AM

Hi Boris, 
 
Greetings from Syncfusion. 
 
We have analyzed your query and created sample based on your updated details. Please find the sample from below location 
 
 
If the above sample doesn’t meet your requirement, please update us with the following details 
 
·       Any pictorial representation  
 
·       Referred examples  
 
·       More description to know your exact requirement. 
 
Which will more helpful for us to provide better solution. 
 
Regards, 
Hemalatha M. 



BO Boris Oprit October 22, 2019 01:28 PM

Thanks for the reply and sample.

Not exactly what i mean .

Like to put it in de NavigationDrawer itself above the name James Pollock

Put an image in the zip for example

Attachment: IMG_1807_7657269.zip


HM Hemalatha Marikumar Syncfusion Team October 22, 2019 09:51 PM

Hi Boris, 
 
Thanks for your update. 
 
We have analyzed your query. You can achieve this requirement by setting rotator view to DrawerHeaderView of SfNavigationDrawer as like below code snippet. 
 
XAML: 
<navigationdrawer:SfNavigationDrawer.DrawerHeaderView> 
       <rotator:SfRotator   ItemsSource="{Binding ImageCollection}" 
                        NavigationDirection="Horizontal" 
                        NavigationStripMode="Dots" 
                        BackgroundColor="#ececec"> 
                        <rotator:SfRotator.ItemTemplate> 
                            <DataTemplate> 
                                <Image  Source="{Binding Image}"/> 
                            </DataTemplate> 
                        </rotator:SfRotator.ItemTemplate> 
                    </rotator:SfRotator> 
</navigationdrawer:SfNavigationDrawer.DrawerHeaderView> 
  
We have created sample based on your requirement, please find the sample from below location. 
 
Sample link: 
 
Please let us know if you have any other queries. 
 
Regards,
Hemalatha M. 



BO Boris Oprit October 23, 2019 08:52 PM

Thanks for the sample , that is what i mean.

I am trying to make it work in a existing NavigationDrawer but is see no picture , what am i missing ?

De NavigationDrawer slides normal and goes to the write page but the rotator image is empty , and i have no errors.

Also put the png files in .


             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:NavigationDrawer"
                 xmlns:rotator="clr-namespace:Syncfusion.SfRotator.XForms;assembly=Syncfusion.SfRotator.XForms"
             xmlns:navigationdrawer="clr-namespace:Syncfusion.SfNavigationDrawer.XForms;assembly=Syncfusion.SfNavigationDrawer.XForms"
             x:Class="NavigationDrawer.MainPage">
   
                                         DrawerWidth ="200"
                                         DrawerHeaderHeight="160">
       
           
                  BackgroundColor="White">
               
                   
                   
               
               
                             Orientation="Horizontal">
                   


HM Hemalatha Marikumar Syncfusion Team October 23, 2019 11:12 PM

Hi Boris, 
 
Thanks for your update. 
 
We have analyzed your query. Based on the provided code snippet, we have modified the code as like below code snippet. 
 
C#: 
private List<SfRotatorItem> imageCollection = new List<SfRotatorItem>(); 
        public List<SfRotatorItem> ImageCollection 
        { 
            get { return imageCollection; } 
            set { imageCollection = value; } 
        } 
        public RotatorViewModel() 
        { 
            ImageCollection.Add(new SfRotatorItem() { Image = "movie1.png" }); 
            ImageCollection.Add(new SfRotatorItem() { Image = "movie2.png" }); 
            ImageCollection.Add(new SfRotatorItem() { Image = "movie3.png" }); 
        } 
  
XAML: 
<navigationdrawer:SfNavigationDrawer.DrawerHeaderView> 
  
                    <rotator:SfRotator HeightRequest="200" 
                        ItemsSource="{Binding ImageCollection}" 
                        NavigationDirection="Horizontal" 
                        NavigationStripMode="Dots" 
                        BackgroundColor="#ececec"> 
                    </rotator:SfRotator> 
  
</navigationdrawer:SfNavigationDrawer.DrawerHeaderView> 
  
We have created sample based on this, please find the sample from below location. 
 
 
Please let us know if you have any concern. 
 
Regards, 
Hemalatha M. 



BO Boris Oprit October 24, 2019 09:46 AM

Thanks again.

This is what i am looking for , the support is really good from Syncfusion .


HM Hemalatha Marikumar Syncfusion Team October 24, 2019 08:11 PM

Hi Boris, 
 
Thanks for your update. 
 
We glad to hear that given solution works. 
 
Please let us know if you have any other query. 
 
Regards, 
Hemalatha M. 
 


Loader.
Live Chat Icon For mobile
Up arrow icon