Modal Page:

Model Page can be any of the Page types supported by Xamarin.Forms. The Modal Page force the users to complete a Self-contained task that cannot be Navigated away from until the task is completed or cancelled. A Modal Page is the Child window to a parent window and it just work like Pop-Up window that stays in front of the original window until the user cancel it or completed the self-contained task.

Creating the Modal Page:

In this tutorial, we will design our Modal Page through the following steps:

• » Creating Modal Page
  » Display a Modal Page - PUSH
  » Close the Modal Page - POP
  

First of all we need to create the Main Page or Parent page that will point to modal page. In order to create the parent page, follow the given steps.

• 1 » In your MainPage.xaml file, create the button using the following code.

  
  

  <?xml version="1.0" encoding="utf-8" ?>
  <ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
               xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
               xmlns:local="clr-namespace:App2"
               x:Class="App2.MainPage">
  
       <Button
          Text="Click me to open Modal Page" 
          VerticalOptions="Center" 
          HorizontalOptions="Center"
          BackgroundColor="#184757"
          TextColor="White"
          Clicked="onclicked"
       />
  
  </ContentPage>
  

  
  

  2 » Create Another content page in your project. (i named it "dispalyPage") this page will work like a Pop-up Modal page. in this page, create the button that will close the Modal page.

  
  

  <?xml version="1.0" encoding="utf-8" ?>
  <ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
               xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
               x:Class="App2.displaypage"
               
              >
      <ContentPage.Content>
          <StackLayout Margin="10, 10, 10, 10" BackgroundColor="#008080">
              <Label 
                  Text="Its me, Your Modal Page"
                  TextColor="White"
                  FontAttributes="Bold"
                  FontSize="Large"
                  VerticalOptions="CenterAndExpand" 
                  HorizontalOptions="CenterAndExpand" 
              />
  
              <Button 
                  x:Name="dismissButton" 
                  Text="close me"
                  Clicked="OnDismissButtonClicked"
              />
          </StackLayout>
      </ContentPage.Content>
  </ContentPage>
  

  
  

  In above code We created our Modal page with two buttons, one will open the modal page, and the other one will close the modal page.

To display the modal Page, the application will push it onto the modal stack, where it will become the active page as shown in the following diagram.

To Navigate to the Modal page, We need to Invoke the Method PushModalAsync() method on the Navigation property of the current page. when the user will click the button that we created in our MainPage, it will open the modal page using the following code. (write this code in your MainPage.xaml.cs file.

async void onclicked (object sender, EventArgs e)
{
      var disp = new displaypage();
      await Navigation.PushModalAsync(disp);
}

Using Above Method, When the User will Click on the Button Present on Main Page, the Modal page instance will be pushed onto the modal stack, Where it becomes the Active Page as shown in the following screenshots.

When the User will click the Close button present on Modal Page, or Physical Back button present on mobile, The Application will POP the current page that is modal page from the modal stack and the top most page will become the active page as shown in the following diagram.

We can close the Modal page and back to the previous screen by just pressing the back button on the device, In order to create the back button or close button programmatically, we need to Invoke the PopModalAsync() method. When the user will click the close button that we create in our modal page, it will close the modal page, and the top most page will become the active page using the following code. (write this code in your dispalyPage.xaml.cs file.)

async void OnDismissButtonClicked(object sender, EventArgs args)
{
    await Navigation.PopModalAsync();
}

Using Above method, when the user will click on the Button present on DisplayPage, the model page instance will be removed from the modal stack, and the top most page will become the active page as shown in the following screenshot.

Download Above Complete Project

Simple Gallery using modal page:

Download Complete Gallery Project.