Rotator in NavigationDrawer

[Boris Oprit]

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 ?

[Hemalatha Marikumar]

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 

 

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

 

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. 

[Boris Oprit]

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

[Hemalatha Marikumar]

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: 

https://www.syncfusion.com/downloads/support/directtrac/general/ze/RotatorNavigationDrawer-1177488449.zip 

 

Please let us know if you have any other queries. 

 

Regards,
Hemalatha M. 

[Boris Oprit]

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">

                   

                            HeightRequest="50" 

                            WidthRequest="50" 

                            HorizontalOptions="Start" 

                            FontSize="20" 

                            BackgroundColor="#1aa1d6" 

                            Clicked="hamburgerButton_Clicked"/>

                   

                           HeightRequest="50" 

                           HorizontalTextAlignment="Center" 

                           VerticalTextAlignment="Center" 

                           Text="Home" 

                           FontSize="16" 

                           TextColor="White" 

                           BackgroundColor="#1aa1d6"/>

               

               

                       x:Name="contentLabel" 

                       VerticalOptions="Center" 

                       HorizontalOptions="Center" 

                       Text="Content View" 

                       FontSize="14" 

                       TextColor="Black"/>

           

       

       

           

                        ItemsSource="{Binding ImageCollection}" 

                        NavigationDirection="Horizontal"

                        NavigationStripMode="Dots" 

                        BackgroundColor="#ececec">

               

                   

                       

                   

               

           

       

       

           

                      ItemSelected="listView_ItemSelected">

               

                   

                       

                           

                               

                                       Text="{Binding}" 

                                       FontSize="16"/>

                           

                       

                   

               

           

       

   

And 

using System;

using System.Collections.Generic;

using System.Collections.ObjectModel;

using System.ComponentModel;

using System.Linq;

using System.Text;

using System.Threading.Tasks;

using Xamarin.Forms;

namespace NavigationDrawer

{

    public partial class MainPage : ContentPage

    {

        public MainPage()

        {

            InitializeComponent();

            hamburgerButton.Image = (FileImageSource)ImageSource.FromFile("hamburgericon.png");

            List list = new List();

            list.Add("Home");

            list.Add("Profile");

            list.Add("Inbox");

            list.Add("Out box");

            list.Add("Sent");

            list.Add("Draft");

            listView.ItemsSource = list;

        }

        void hamburgerButton_Clicked(object sender, EventArgs e)

        {

            navigationDrawer.ToggleDrawer();

        }

        private void listView_ItemSelected(object sender, SelectedItemChangedEventArgs e)

        {

            if (e.SelectedItem != null && e.SelectedItem.ToString() == "Profile")

            {

                Navigation.PushAsync(new Page1());

                headerLabel.Text = "Menu";

                navigationDrawer.ToggleDrawer();

                ((ListView)sender).SelectedItem = null;

            }

            navigationDrawer.ToggleDrawer();        

        }

    }

}

and this

using System;

using System.Collections.Generic;

using System.Text;

namespace NavigationDrawer

{

    // Model Class for Rotator.

    public class RotatorModel

    {

        public RotatorModel(string imageString)

        {

            Image = imageString;

        }

        private String _image;

        public String Image

        {

            get { return _image; }

            set { _image = value; }

        }

    }

    public class RotatorViewModel

    {

        // ViewModel class for Rotator.

        public RotatorViewModel()

        {

            ImageCollection.Add(new RotatorModel("movie1.png"));

            ImageCollection.Add(new RotatorModel("movie2.png"));

            ImageCollection.Add(new RotatorModel("movie3.png"));

            //ImageCollection.Add(new RotatorModel("movie4.png"));

            //ImageCollection.Add(new RotatorModel("movie6.png"));

        }

        private List imageCollection = new List();

        public List ImageCollection

        {

            get { return imageCollection; }

            set { imageCollection = value; }

        }

    }

}

[Hemalatha Marikumar]

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. 

 

Sample link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/RotatorNavigationDrawer-1327516902.zip 

 

Please let us know if you have any concern. 

 

Regards, 

Hemalatha M. 

[Boris Oprit]

Thanks again.

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

[Hemalatha Marikumar]

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.