Introduction

This article demonstrates how to navigate to modal pages. A modal page can be any of the page types (eg.-content page) supported by Xamarin.Forms. To display a modal page, the application will push it onto the navigation stack where it becomes an active page.
Let's start!
Step 1

Click File >> New >> Project >>Visual C# >> Cross-Platform(Xamarin.Forms or Native) >> give project a name and location. Then, click OK.
Step 2

Now, click open Mainpage.xaml and insert the below-given code. For that, go to Solution Explorer >> Modal page (PCL) >> Mainpage.xaml.

Next, insert the toolbar items of ListView to display page names and its clicked events to navigation between the pages.
  1. <?xml version="1.0" encoding="utf-8" ?>
  2. <ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
  3. xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
  4. xmlns:local="clr-namespace:ModalpageApp"
  5. x:Class="ModalpageApp.MainPage"
  6. Title="MainPage">
  8. <ContentPage.Content>
  10. <StackLayout >
  12. <ListView x:Name="Listview" ItemSelected="Listview_ItemSelected"/>
  14. </StackLayout>
  16. </ContentPage.Content>
  18. </ContentPage>
Step 3

Then, open Solution Explorer >>Modalpages(PCL) >>Mainpage.xaml.cs page and double click to open the design view. Here is the code for this page.
  1. using System;
  2. using System.Collections.Generic;
  3. using System.Linq;
  4. using System.Text;
  5. using System.Threading.Tasks;
  6. using Xamarin.Forms;
  8. namespace ModalpageApp
  9. {
  10. public partial class MainPage : ContentPage
  11. {
  12. List<Contacts> contact;
  13. public MainPage()
  14. {
  15. InitializeComponent();
  17. SetUpdata();
  18. Listview.ItemsSource = contact;
  19. }
  21. async void Listview_ItemSelected(object sender, SelectedItemChangedEventArgs e)
  22. {
  23. if (Listview.ItemsSource!=null)
  24. {
  25. var detailpage = new DetailspageCS();
  26. detailpage.BindingContext = e.SelectedItem as Contacts;
  27. Listview.SelectedItem = null;
  28. await Navigation.PushAsync(detailpage);
  29. }
  30. }
  31. void SetUpdata()
  32. {
  33. contact = new List<Contacts>();
  34. contact.Add(new Contacts
  35. {
  36. Name = "Logesh",
  37. Age=20,
  38. Occupation="Farmer",
  39. Country="India"
  40. });
  41. contact.Add(new Contacts
  42. {
  43. Name = "Hari",
  44. Age = 20,
  45. Occupation = "Software Engineer",
  46. Country = "India"
  47. });
  48. contact.Add(new Contacts
  49. {
  50. Name = "Mani",
  51. Age = 20,
  52. Occupation = "Farmer",
  53. Country = "India"
  54. });
  55. contact.Add(new Contacts
  56. {
  57. Name = "Guna Seker",
  58. Age = 20,
  59. Occupation = "Farmer",
  60. Country = "India"
  61. });
  62. contact.Add(new Contacts
  63. {
  64. Name = "Palani",
  65. Age = 20,
  66. Occupation = "Farmer",
  67. Country = "India"
  68. });
  69. contact.Add(new Contacts
  70. {
  71. Name = "Laxman",
  72. Age = 30,
  73. Occupation = "Driver",
  74. Country = "India"
  75. });
  76. }
  77. }
  78. }
Step 4

Now, create a class named Contacts.cs. For that, go to Solution Explorer>>Modalpage(PCL)>>right click and select Add>> New Item. In this popup window, select CrossPlatform>>class. Give a name such as Contacts.cs.

After double clicking to open it, insert the code given-below.
  1. using System;
  2. using System.Collections.Generic;
  3. using System.Linq;
  4. using System.Text;
  5. using System.Threading.Tasks;
  6. using Xamarin.Forms;
  8. namespace ModalpageApp
  9. {
  10. public class Contacts
  11. {
  12. public string Name { get; set; }
  14. public int Age { get; set; }
  16. public string Country { get; set; }
  18. public string Occupation { get; set; }
  20. public override string ToString()
  21. {
  22. return Name;
  23. }
  25. }
  26. }
Step 5

Similarly, create another class named Masterdetails.cs. This page is used when the user clicks on listview items after navigating t a new page to display details.
  1. using System;
  2. using System.Collections.Generic;
  3. using System.Linq;
  4. using System.Text;
  5. using System.Threading.Tasks;
  6. using Xamarin.Forms;
  8. namespace ModalpageApp
  9. {
  10. public class DetailspageCS : ContentPage
  11. {
  12. public DetailspageCS()
  13. {
  14. var nameLabel = new Label
  15. {
  16. FontSize = Device.GetNamedSize(NamedSize.Medium, typeof(Label)),
  17. FontAttributes = FontAttributes.Bold
  18. };
  19. nameLabel.SetBinding(Label.TextProperty, "Name");
  21. var ageLabel = new Label
  22. {
  23. FontSize = Device.GetNamedSize(NamedSize.Medium, typeof(Label)),
  24. FontAttributes = FontAttributes.Bold
  25. };
  26. ageLabel.SetBinding(Label.TextProperty, "Age");
  28. var occupationLabel = new Label
  29. {
  30. FontSize = Device.GetNamedSize(NamedSize.Medium, typeof(Label)),
  31. FontAttributes = FontAttributes.Bold
  32. };
  33. occupationLabel.SetBinding(Label.TextProperty, "Occupation");
  35. var countryLabel = new Label
  36. {
  37. FontSize = Device.GetNamedSize(NamedSize.Medium, typeof(Label)),
  38. FontAttributes = FontAttributes.Bold
  39. };
  40. countryLabel.SetBinding(Label.TextProperty, "Country");
  42. var dismissButton = new Button { Text = "Dismiss" };
  43. dismissButton.Clicked += OnDismissButtonClicked;
  45. Padding = new Thickness(0, Device.OnPlatform(20, 0, 0), 0, 0);
  46. Content = new StackLayout
  47. {
  48. HorizontalOptions = LayoutOptions.Center,
  49. VerticalOptions = LayoutOptions.Center,
  50. Children = {
  51. new StackLayout {
  52. Orientation = StackOrientation.Horizontal,
  53. Children = {
  54. new Label {
  55. Text = "Name:",
  56. FontSize = Device.GetNamedSize (NamedSize.Medium, typeof(Label)),
  57. HorizontalOptions = LayoutOptions.FillAndExpand
  58. },
  59. nameLabel
  60. }
  61. },
  62. new StackLayout {
  63. Orientation = StackOrientation.Horizontal,
  64. Children = {
  65. new Label {
  66. Text = "Age:",
  67. FontSize = Device.GetNamedSize (NamedSize.Medium, typeof(Label)),
  68. HorizontalOptions = LayoutOptions.FillAndExpand
  69. },
  70. ageLabel
  71. }
  72. },
  73. new StackLayout {
  74. Orientation = StackOrientation.Horizontal,
  75. Children = {
  76. new Label {
  77. Text = "Occupation:",
  78. FontSize = Device.GetNamedSize (NamedSize.Medium, typeof(Label)),
  79. HorizontalOptions = LayoutOptions.FillAndExpand
  80. },
  81. occupationLabel
  82. }
  83. },
  84. new StackLayout {
  85. Orientation = StackOrientation.Horizontal,
  86. Children = {
  87. new Label {
  88. Text = "Country:",
  89. FontSize = Device.GetNamedSize (NamedSize.Medium, typeof(Label)),
  90. HorizontalOptions = LayoutOptions.FillAndExpand
  91. },
  92. countryLabel
  93. }
  94. },
  95. dismissButton
  96. }
  97. };
  99. }
  100. async void OnDismissButtonClicked(object sender, EventArgs args)
  101. {
  102. await Navigation.PopModalAsync();
  103. }
  105. }
  106. }
Step 6

Then, open App.xaml.cs page to declare that the Main Page of application is Mainpage.xaml and it's navigation pages. For that, go to Solution Explorer >> Modal page (PCL) >> click open App.xaml.cs and put the code given below.
  1. using System;
  2. using System.Collections.Generic;
  3. using System.Linq;
  4. using System.Text;
  6. using Xamarin.Forms;
  8. namespace ModalpageApp
  9. {
  10. public partial class App : Application
  11. {
  12. public App()
  13. {
  14. InitializeComponent();
  16. MainPage = new NavigationPage( new MainPage());
  17. }
  19. protected override void OnStart()
  20. {
  21. // Handle when your app starts
  22. }
  24. protected override void OnSleep()
  25. {
  26. // Handle when your app sleeps
  27. }
  29. protected override void OnResume()
  30. {
  31. // Handle when your app resumes
  32. }
  33. }
  34. }
Step 7

Press F5 or "Build and Run" your application. The result is shown below like this.
Finally, we have successfully created a Xamarin.Forms Modalpage application.