How to add Syncfusion controls inside NavigationDrawer

2 mins read

Syncfusion NavigationDrawer in Xamarin provides support to add Syncfusion controls within the DrawerContentView of the NavigationDrawer. By using this the user can add N-number of controls in out SfNavigationDrawer.

To set Syncfusion controls in NavigationDrawer follow the below given procedures.

Step 1: Create NavigationDrawer sample, inside DrawerContent view create list of Syncfusion Controls to be displayed.

Step 2: Add the necessary dll for the respective control which the user has used in the Drawer content and also for Navigationdrawer.

Step 3: Use ItemSelected event to navigate to the respective controls form the Drawer content.

The below code illustrates the way to achieve this.

XAML code to create SfBusyIndicator:

<ContentPage.Content>   
<busy:SfBusyIndicator x:Name="busyindicator" Title="Application Loading..." AnimationType="Rectangle" ViewBoxWidth = "200" ViewBoxHeight="250" TextColor="Maroon" BackgroundColor="White" />    
</ContentPage.Content>

XAML code to create SfNumericUpDown:

<ContentPage.Content>
  <numeric:SfNumericUpDown  FormatString="c" SpinButtonAlignment="Left" BackgroundColor="White"  />       
</ContentPage.Content>

XAML code to create SfRangrSlider:

<ContentPage.Content>
    <range:SfRangeSlider x:Name="rangeslider" Orientation="Horizontal" SnapsTo="Ticks" ShowValueLabel="true" ValuePlacement="TopLeft" HeightRequest="50" Minimum="0" Maximum="100" StepFrequency="6"/>
</ContentPage.Content>

C# code for SfNavigationDrawer:

namespace DrawerExample
{
public partial class MainPage : ContentPage
{
    public MainPage()
    {
        InitializeComponent();
        SfNavigationDrawer navigationDrawer = new SfNavigationDrawer();
        navigationDrawer.Position = Position.Left;
        navigationDrawer.Transition = Transition.Push;
 
        navigationDrawer.TouchThreshold = 50;
        navigationDrawer.Duration = 1000;
        navigationDrawer.DrawerWidth = 150;
        navigationDrawer.DrawerHeight = 100;
        navigationDrawer.DrawerHeaderHeight = 100;
        navigationDrawer.DrawerFooterHeight = 100;
 
        Grid headerLayout = new Grid();
        headerLayout.BackgroundColor = Color.FromHex("#1aa1d6");
        Label header = new Label();
        header.Text = "Header View";
        header.FontSize = 14;
        header.TextColor = Color.White;
        header.HorizontalTextAlignment = TextAlignment.Center;
        header.VerticalTextAlignment = TextAlignment.Center;
        header.BackgroundColor = Color.FromHex("#1aa1d6");
        headerLayout.Children.Add(header);
 
        navigationDrawer.DrawerHeaderView = headerLayout;
 
        ObservableCollection<String> list = new ObservableCollection<string>();
        list.Add("RangeSlider");
        list.Add("BusyIndicator");
        list.Add("NumericUpDown");
        StackLayout mainStack = new StackLayout();
        mainStack.Orientation = StackOrientation.Vertical;
        mainStack.HeightRequest = 500;
 
        ListView listView = new ListView();
        listView.WidthRequest = 200;
        listView.VerticalOptions = LayoutOptions.FillAndExpand;
        listView.ItemsSource = list;
        mainStack.Children.Add(listView);
        navigationDrawer.DrawerContentView = mainStack;
 
        Button Btnmenu = new Button();
        Btnmenu.Text = "Show Menu";
        Btnmenu.HorizontalOptions = LayoutOptions.CenterAndExpand;
        Btnmenu.VerticalOptions = LayoutOptions.CenterAndExpand;
        Btnmenu.BackgroundColor = Color.FromHex("#1aa1d6");
 
        StackLayout Stack = new StackLayout();
        Stack.BackgroundColor = Color.White;
        Stack.HeightRequest = 100;
        Stack.HorizontalOptions = LayoutOptions.Center;
        Stack.VerticalOptions = LayoutOptions.Center;
 
        listView.ItemSelected += (object sender, SelectedItemChangedEventArgs e) =>
        {
            if (e.SelectedItem.ToString().Equals("RangeSlider"))
            {
                navigationDrawer.EnableSwipeGesture = true;
 
                navigationDrawer.ContentView = new RangeSlider().Content;
            }
 
            if (e.SelectedItem.ToString().Equals("BusyIndicator"))
            {
                navigationDrawer.EnableSwipeGesture = true;
                navigationDrawer.ContentView = new BusyIndicator().Content;
            }
 
            if (e.SelectedItem.ToString().Equals("NumericUpDown"))
            {
 
                navigationDrawer.EnableSwipeGesture = true;
                navigationDrawer.ContentView = new NumericUpDown().Content;
            }
        };
 
        Stack.Children.Add(Btnmenu);
        navigationDrawer.ContentView = Stack;
 
        StackLayout footerLayout = new StackLayout();
        footerLayout.BackgroundColor = Color.FromHex("#1aa1d6");
        Label footer = new Label();
        footer.Text = "Footer View";
        footer.FontSize = 14;
        footer.TextColor = Color.White;
        footer.HorizontalOptions = LayoutOptions.CenterAndExpand;
        footer.VerticalOptions = LayoutOptions.CenterAndExpand;
        footer.BackgroundColor = Color.FromHex("#1aa1d6");
        footerLayout.Children.Add(footer);
        navigationDrawer.DrawerFooterView = footerLayout;
 
        this.Content = navigationDrawer;
        Btnmenu.Clicked += (sender_, e3) =>
        {
            DependencyService.Get<IToggleDrawer>().ToggleDrawer();
        };
    }
}
}

Image for content page of NavigationDrawer:

Conteny page of NavigationDrawer