Build Cross Platform Apps In Xamarin Forms

Introduction

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.If you didnt Read my previous article Kindly check below link.

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

public class Category
{
public string Name
{
get;
set;
}
public Func<dynamic> PageFn
{
get;
set;
}
public Category(string name, Func<dynamic> pageFn)
{
Name = name;
PageFn = pageFn;
}
}

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

public class MenuPage : ContentPage
{
public MenuPage()
{
Title = "Menu";
Icon = "menu.png";
Padding = new Thickness(10, 20);
BackgroundColor = Color.White;
var categories = new List<Category>
{
new Category("Home", () => new MainPage()),
new Category("Employee Info", () => new EmpInfo()),
new Category("Sales", () => new Sales()),
new Category("Settings", () => new Settings()),
};
var dataTemplate = new DataTemplate(typeof(TextCell));
dataTemplate.SetBinding(TextCell.TextProperty, "Name");
var listView = new ListView
{
ItemsSource = categories,
ItemTemplate = dataTemplate
};
listView.ItemSelected += (sender, e) =>
{
if (OnMenuSelect != null)
{
var category = (Category)e.SelectedItem;
var categoryPage = category.PageFn();
OnMenuSelect(categoryPage);
}
};
Content = listView;
}
public Action<dynamic> OnMenuSelect { get; set; }
}

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.

public class MasterDetails : MasterDetailPage
{
public MasterDetails()
{
var menuPage = new MenuPage
{
OnMenuSelect = categoryPage =>
{
Detail = new NavigationPage(categoryPage);
IsPresented = false;
}
};
Master = menuPage;
Detail = new NavigationPage(new MainPage());
MasterBehavior = MasterBehavior.Split;
}
}

Step 5: Masterpage should load with menu bar on User login.For that we have to add Masterdetails as below,

private void Add_Clicked(object sender, EventArgs e)
{
if (_userName.Text == "a" && _password.Text == "a")
{
Application.Current.MainPage = new MasterDetails();
}
else if (string.IsNullOrEmpty(_userName.Text) || string.IsNullOrEmpty(_password.Text))
{
DisplayAlert("Error", "Username and Password are required", "Re-try");
}
else
{
DisplayAlert("Failed", "Invalid User", "Login Again");
}
}

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.

7 Comments

Join the conversation! Your thoughts help the community grow.

svingking lee9y ago
Please share link download code :D thanks
- Venkat9y ago
  Please go check the first Article.
Venkat10y ago
Tq :)
Bhavik Patel10y ago
Nice
Asfend Yar10y ago
Nice start Dude
kalu singh rao10y ago
Great resource for learning app development. Keep it
- Venkat10y ago
  Thanks a lot..