If you already have a little experience in cross-platform development with Xamarin.Forms, you probably know the problem: Navigation between different pages works very well, but there is no easy solution to display dialog boxes overlaying an active page.

Today I want to show you how you can implement this feature in your Xamarin.Forms application. I have created an example project for this purpose, which you can download from my GitHub site.

Setup

I first create a new Cross-Platform project in Visual Studio. I start without a template (blank) and use .NET standard for the shared code base. After the project is initialized, I add the plugin for the dialogs to all projects. You can find it via Nuget. The project is also open source on GitHub. To add a Nuget package to your projects, mark the project (or solution) and select the entry Manage NuGet Packages. Select all projects of your solution to install the package.

The first thing to do is to initialize the package. This takes place in the platform-specific projects. For Android, open the MainActivity.cs file and add the following to your OnCreate() method:

1
2
3
4
5
6
7
8
9

protected override void OnCreate(Bundle bundle)
{
    base.OnCreate(bundle);

    Rg.Plugins.Popup.Popup.Init(this, bundle);
        
    Xamarin.Forms.Forms.Init(this, bundle);
    LoadApplication (new App ());
}

The same goes for iOS: Add the following snippet to your FinishedLaunching()-Method inside the AppDelegate.cs file.

1
2
3
4
5
6
7
8

public override bool FinishedLaunching(UIApplication app, NSDictionary options)
{
    Rg.Plugins.Popup.Popup.Init();
      
    global::Xamarin.Forms.Forms.Init ();
    LoadApplication (new App ());
    return base.FinishedLaunching (app, options);
}

If you want to support UWP, the relevant code goes inside the App-class:

1
2
3
4
5
6
7

Rg.Plugins.Popup.Popup.Init();
Xamarin.Forms.Forms.Init (e);

if (e.PreviousExecutionState == ApplicationExecutionState.Terminated)
{
  // ...
}

More detailed information about initializing the plugin can be found in the projects documentation.

Integrating Dialogs

Now add a new Content Page to the .NET standard project. This is generated with predefined code, which must be adjusted as follows:

1
2
3
4
5
6
7

<?xml version="1.0" encoding="UTF-8"?>
<pages.PopUpPage xmlns="http://xamarin.com/schemas/2014/forms" 
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:pages="clr-namespace:Rg.Plugins.Popup.Pages;assembly=Rg.Plugins.Popup"
             x:Class="PopupDemo.Dialog">
    
</pages.PopUpPage>

This is the foundation of the dialog. I just removed the sample content and added the namespace for the plugin. Finally I changed the root element of the page from ContentView to PopUpPage. These changes are also required in the code-behind file. All you have to do here is change the inheritance from ContentView to PopUpPage.

Next, I design the content of the dialog window. I want to show the user a simple login dialog, so I need input fields for username and password, as well as a button to confirm the input.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53

<?xml version="1.0" encoding="UTF-8"?>
<pages:PopupPage xmlns="http://xamarin.com/schemas/2014/forms" 
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:pages="clr-namespace:Rg.Plugins.Popup.Pages;assembly=Rg.Plugins.Popup"
             xmlns:animations="clr-namespace:Rg.Plugins.Popup.Animations;assembly=Rg.Plugins.Popup"
             x:Class="PopupDemo.Dialog">
    <pages:PopupPage.Animation>
        <animations:ScaleAnimation DurationIn="200"
                                   DurationOut="300"
                                   EasingIn="SinIn"
                                   EasingOut="SinInOut"
                                   HasBackgroundAnimation="True"
                                   PositionIn="Top"
                                   PositionOut="Bottom"
                                   ScaleIn="1.2"
                                   ScaleOut="0.8"/>
    </pages:PopupPage.Animation>
    
    <StackLayout
        Margin="12"
        Padding="24"
        Spacing="24"
        BackgroundColor="White"
        HorizontalOptions="Center"
        VerticalOptions="Center">

        <StackLayout>
            <Label
                Text="Username"/>
            <Entry
                FontSize="Large"
                Text="me@example.com" />
        </StackLayout>

        <StackLayout>
            <Label
                Text="Password"/>
            <Entry
                FontSize="Large"
                IsPassword="True"
                Text="1234" />
        </StackLayout>

        <StackLayout>
            <Button
                Clicked="Button_Clicked"
                BackgroundColor="Orange"
                FontSize="Large"
                Text="Submit"
                TextColor="White"/>
        </StackLayout>
    </StackLayout>
</pages:PopupPage>

Now there is missing only one possibility to display the dialog. I added a simple button to my main page and linked it to an event handler that opens the dialog. In real applications, you would do this by adding bindings to the ViewModel, but I decided to use the quick and dirty variant to keep the example as simple as possible.

Calling the dialog probably reminds you syntactically of the normal navigation between the pages. Closing the dialog works analogously, I wired this part with the EventHandler in the code-behind file of the dialog.

1
2
3
4
5

// Open Dialog
PopupNavigation.Instance.PushAsync(new Dialog());

// Close Dialog
PopupNavigation.Instance.PopAsync();

Animations

If you now start the application on a device or emulator of your choice, everything should already work. Besides the pure dialog functionality, the plugin offers the possibility to animate the dialogs. The animation is defined in the XAML code of the dialog. You can also find complete documentation for this on the projects website. Here it’s a good idea to just play around with the available possibilities, but finally you’ll find a small example:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20

<?xml version="1.0" encoding="UTF-8"?>
<pages:PopupPage xmlns="http://xamarin.com/schemas/2014/forms" 
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:pages="clr-namespace:Rg.Plugins.Popup.Pages;assembly=Rg.Plugins.Popup"
             xmlns:animations="clr-namespace:Rg.Plugins.Popup.Animations;assembly=Rg.Plugins.Popup"
             x:Class="PopupDemo.Dialog">
    <pages:PopupPage.Animation>
        <animations:ScaleAnimation DurationIn="200"
                                   DurationOut="300"
                                   EasingIn="SinIn"
                                   EasingOut="SinInOut"
                                   HasBackgroundAnimation="True"
                                   PositionIn="Top"
                                   PositionOut="Bottom"
                                   ScaleIn="1.2"
                                   ScaleOut="0.8"/>
    </pages:PopupPage.Animation>
    
    <StackLayout
	…