Build Cross Platform Apps In Xamarin Forms - Part Two

As we discussed in a previous article, we focused on how to create a login page, and navigate from one form to another. In this article we will focus on the menu Bar.This sample is Cross Platform so it will work on Andriod, IOS and Windows Phone.

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.Select Master as MenuPage and details Page to MinPage as below.

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: Masterpage should load with menu bar on User login.For that we have to add Masterdetails as 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.         }  

That's 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.