Build Cross Platform Apps In Xamarin Forms - Part Two

Introduction

                            As we discussed previous article, we focused on how to create a login page, and how to navigate from one form to another.In this article we will focus on the menu Bar.we will add additional functionality to our sample Application.

• Build Cross Platform Apps In Xamarin Forms - Part One

 Step 1

 Create menu, right click in Menu folder and Select Add-->New Item.  Select Class under Visual C# , add a name and click OK.  This Class will help us to define Menu name and Page name for navigation.

Add the menu name and Page Fn(ContentPage information will be stored).

Category.cs  

1. public class Category  
2.     {  
3.         public string Name  
4.         {  
5.             get;  
6.             set;  
7.         }  
8.   
9.         public Func<dynamic> PageFn  
10.         {  
11.             get;  
12.             set;  
13.         }  
14.   
15.         public Category(string name, Func<dynamic> pageFn)  
16.         {  
17.             Name = name;  
18.             PageFn = pageFn;  
19.         }  
20.     }  

Step 2

             Create menu page, right click in Menu folder and Select Add-->New Item. Select Cross-Platform Under Forms ContentPage , add a name MenuPage and click OK. Now,create an objects for the category to add menu details ,pass it to ListView and create Itemseleted event so that when user touch MenuItem corresponding page will load.

Step 3
              We need Menu Icon so that user can click the menu icon and see the Menulist for that We have to add Menu icon, add both project IOS (under Resources) and Android (under Resources->Drawable) and add some sample pages for menu like Settings.cs, Sales.cs, EmpInfo.cs pages.

MenuPage.cs

1. public class MenuPage : ContentPage  
2.    {  
3.        public MenuPage()  
4.        {  
5.            Title = "Menu";  
6.            Icon = "menu.png";  
7.   
8.            Padding = new Thickness(10, 20);  
9.            BackgroundColor = Color.White;  
10.            var categories = new List<Category>  
11.            {  
12.                new Category("Home", () => new MainPage()),  
13.                new Category("Employee Info", () => new EmpInfo()),  
14.                new Category("Sales", () => new Sales()),  
15.                new Category("Settings", () => new Settings()),  
16.            };  
17.   
18.            var dataTemplate = new DataTemplate(typeof(TextCell));  
19.            dataTemplate.SetBinding(TextCell.TextProperty, "Name");  
20.   
21.            var listView = new ListView  
22.            {  
23.                ItemsSource = categories,  
24.                ItemTemplate = dataTemplate  
25.            };  
26.   
27.            listView.ItemSelected += (sender, e) =>  
28.            {  
29.                if (OnMenuSelect != null)  
30.                {  
31.                    var category = (Category)e.SelectedItem;  
32.                    var categoryPage = category.PageFn();  
33.                    OnMenuSelect(categoryPage);  
34.                }  
35.            };  
36.            Content = listView;  
37.        }  
38.        public Action<dynamic> OnMenuSelect { get; set; }  
39.    }  

Step 4: We added the menu page and menu category. Now, we have masterpage and child page display.

1. public class MasterDetails : MasterDetailPage  
2.    {  
3.        public MasterDetails()  
4.        {  
5.            var menuPage = new MenuPage  
6.            {  
7.                OnMenuSelect = categoryPage =>  
8.                {  
9.                    Detail = new NavigationPage(categoryPage);  
10.                    IsPresented = false;  
11.                }  
12.            };  
13.   
14.            Master = menuPage;  
15.   
16.            Detail = new NavigationPage(new MainPage());  
17.   
18.            MasterBehavior = MasterBehavior.Split;  
19.        }  
20.    }  

Step 5: When you login, our masterpage should load with menu bar. Open LoginPage on the click event, given below:

1. private void Add_Clicked(object sender, EventArgs e)  
2.         {  
3.             if (_userName.Text == "a" && _password.Text == "a")  
4.             {  
5.                 Application.Current.MainPage = new MasterDetails();  
6.             }  
7.             else if (string.IsNullOrEmpty(_userName.Text) || string.IsNullOrEmpty(_password.Text))  
8.             {  
9.                 DisplayAlert("Error", "Username and Password are required", "Re-try");  
10.             }  
11.             else  
12.             {  
13.                 DisplayAlert("Failed", "Invalid User", "Login Again");  
14.             }  
15.         }  

Thats it.Run the Application and login will see the menu bar with the icon and default toolbar.

Summary

                     We created a sample EmployeeInfo Application with the menu bar. In the coming articles, we will focus on the toolbar and enhance our menu bar.