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
|