Articles in this section
Category / Section

How to create SfNavigationDrawer sample in code behind

1 min read

We can create SfNavigationDrawer sample in the code behind. By using the below code the user can use the SfNavigationDrawer without XAML code.

 

To create SfNavigationDrawer in code behind follow the below given procedure:

 

Step 1: Add the necessary assemblies in the PCL, Android, iOS and UWP project. Click the link to know more about the assemblies required for adding SfNavigationDrawer to your project.

 

Step 2: Use the below code snippet in the code behind of your sample and run the project.

 

The below code illustrate the way to create a SfNavigationDrawer without XAML Code.

 

C# code to create SfNavigationDrawer

 

namespace NavigationDrawerSample
{
public partial class NavigationDrawerSamplePage : ContentPage
{
SfNavigationDrawer navigationDrawer = new SfNavigationDrawer();
    void ListView_ItemSelected(object sender, SelectedItemChangedEventArgs e)
    {
        if (e.SelectedItem.ToString() == "Profile")
        {
            navigationDrawer.ContentView = new Profile().Content;
        }
        else if (e.SelectedItem.ToString() == "Sent")
        {
            navigationDrawer.ContentView = new Sent().Content;
        }
        else if (e.SelectedItem.ToString() == "Draft")
        {
            navigationDrawer.ContentView = new Draft().Content;
        }
        else if (e.SelectedItem.ToString() == "Inbox")
        {
            navigationDrawer.ContentView = new Inbox().Content;
        }
        else if (e.SelectedItem.ToString() == "Out box")
        {
            navigationDrawer.ContentView = new OutBox().Content;
        }
        else if (e.SelectedItem.ToString() == "Home")
        {
            navigationDrawer.ContentView = new Home().Content;
        }
        navigationDrawer.ToggleDrawer();
    }
 
 
public NavigationDrawerSamplePage()
{
    InitializeComponent();
 
    Grid myGrid = new Grid();
 
    RowDefinition rowDef1 = new RowDefinition();
    RowDefinition rowDef2 = new RowDefinition();
    rowDef1.Height = 40;
 
    myGrid.RowDefinitions.Add(rowDef1);
    myGrid.RowDefinitions.Add(rowDef2);
 
    StackLayout stack = new StackLayout();
    stack.Orientation = StackOrientation.Horizontal;
    stack.HorizontalOptions = LayoutOptions.FillAndExpand;
    stack.BackgroundColor = Color.FromHex("1aa1d6");
    Label title = new Label();
    title.Text = "Home";
    title.VerticalTextAlignment = TextAlignment.Center;
    title.HorizontalTextAlignment = TextAlignment.Center;
    title.HeightRequest = 50;
    title.FontSize = 16;
    title.TextColor = Color.Black;
    title.BackgroundColor = Color.FromHex("1aa1d6");
 
    Button button = new Button();
    button.Image = (FileImageSource)ImageSource.FromFile("hamburgericon.png");
    button.HeightRequest = 50;
    button.WidthRequest = 50;
    button.BackgroundColor = Color.FromHex("#1aa1d6");
 
    ListView listView = new ListView();
    List<string> list = new List<string>();
 
    list.Add("Home");
    list.Add("Profile");
    list.Add("Inbox");
    list.Add("Out box");
    list.Add("Sent");
    list.Add("Draft");
    listView.ItemsSource = list;
    //Initializing navigationDrawer control
    //Label which has to be at the top of MainContent View.
 
    button.Clicked += (sender, e) =>
    {
        navigationDrawer.ToggleDrawer();
    };
 
    stack.Children.Add(button);
    stack.Children.Add(title);
 
    //Label which denotes the Content View 
    Label contentLabel = new Label();
    contentLabel.HorizontalTextAlignment = TextAlignment.Center;
 
    contentLabel.FontSize = 14;
    contentLabel.Text = "Content View";
    contentLabel.TextColor = Color.Black;
 
    //Grid which we have used to set the Drawer Header View
    Grid headerLayout = new Grid();
    headerLayout.BackgroundColor = Color.FromHex("#1aa1d6");
 
    // Codes to set Drawer Header.
    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;
 
    //Grid to set the Drawer Footer View.
    Grid footerLayout = new Grid();
    footerLayout.BackgroundColor = Color.FromHex("#1aa1d6");
 
    //Codes to set Drawer Footer.
    Label footer = new Label();
    footer.Text = "Footer View";
    footer.FontSize = 14;
    footer.TextColor = Color.White;
    footer.HorizontalTextAlignment = TextAlignment.Center;
    footer.VerticalTextAlignment = TextAlignment.Center;
    footer.BackgroundColor = Color.FromHex("#1aa1d6");
    footerLayout.Children.Add(footer);
    navigationDrawer.DrawerFooterView = footerLayout;
    //SfNavigationDrawer Properties
    navigationDrawer.Position = Position.Left;
    navigationDrawer.Transition = Transition.SlideOnTop;
    navigationDrawer.DrawerWidth = 200;
    navigationDrawer.DrawerHeaderHeight = 50;
    navigationDrawer.DrawerFooterHeight = 50;
    navigationDrawer.DrawerContentView = listView;
    //StackLayout to set the SfNavigationDrawer MainContentView.
    StackLayout maincontent = new StackLayout();
    Grid.SetRow(stack, 0);
    Grid.SetRow(navigationDrawer, 1);
    myGrid.Children.Add(stack);
    myGrid.Children.Add(navigationDrawer);
    //maincontent.Children.Add(myGrid);
    navigationDrawer.ContentView = maincontent;
    listView.ItemSelected += ListView_ItemSelected;
    this.Content = myGrid;
}
}
}
 
 

 

 

DrawerContentView

 

 

 

 

 

 

 

 

MainContentView

 

 

 

 

Did you find this information helpful?
Yes
No
Help us improve this page
Please provide feedback or comments
Comments
Please sign in to leave a comment
Access denied
Access denied