Xamarin.Forms - Modal Pages

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">  
  7.   
  8.     <ContentPage.Content>  
  9.   
  10.         <StackLayout >  
  11.   
  12.             <ListView x:Name="Listview" ItemSelected="Listview_ItemSelected"/>  
  13.   
  14.         </StackLayout>  
  15.           
  16.     </ContentPage.Content>  
  17.   
  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;  
  7.   
  8. namespace ModalpageApp  
  9. {  
  10.     public partial class MainPage : ContentPage  
  11.     {  
  12.         List<Contacts> contact;  
  13.         public MainPage()  
  14.         {  
  15.             InitializeComponent();  
  16.   
  17.             SetUpdata();  
  18.             Listview.ItemsSource = contact;  
  19.         }  
  20.   
  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;  
  7.   
  8. namespace ModalpageApp  
  9. {  
  10.     public class Contacts  
  11.     {  
  12.         public string Name { getset; }  
  13.   
  14.         public int Age { getset; }  
  15.   
  16.         public string Country { getset; }  
  17.   
  18.         public string Occupation { getset; }  
  19.   
  20.         public override string ToString()  
  21.         {  
  22.             return Name;  
  23.         }  
  24.   
  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;  
  7.   
  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");  
  20.   
  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");  
  27.   
  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");  
  34.   
  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");  
  41.   
  42.             var dismissButton = new Button { Text = "Dismiss" };  
  43.             dismissButton.Clicked += OnDismissButtonClicked;  
  44.   
  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.             };  
  98.   
  99.         }  
  100.         async void OnDismissButtonClicked(object sender, EventArgs args)  
  101.         {  
  102.             await Navigation.PopModalAsync();  
  103.         }  
  104.   
  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;  
  5.   
  6. using Xamarin.Forms;  
  7.   
  8. namespace ModalpageApp  
  9. {  
  10.     public partial class App : Application  
  11.     {  
  12.         public App()  
  13.         {  
  14.             InitializeComponent();  
  15.   
  16.             MainPage = new NavigationPage( new MainPage());  
  17.         }  
  18.   
  19.         protected override void OnStart()  
  20.         {  
  21.             // Handle when your app starts  
  22.         }  
  23.   
  24.         protected override void OnSleep()  
  25.         {  
  26.             // Handle when your app sleeps  
  27.         }  
  28.   
  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.

Up Next
    Ebook Download
    View all
    Learn
    View all