Add Popup to Xamarin.Forms Solution

• Aug 20, 2021
• 4 minutes to read

This topic explains how to integrate the DevExpress Popup component into a Xamarin.Forms cross-platform solution.

Important

The DevExpress Popup for Xamarin.Forms component is available for iOS and Android platforms, and can be used in Xamarin.Forms solutions that use the .NET Standard code sharing strategy.

For an Android project, the Target Framework and Target Android version should be Android 10 (API level 29) or later.

Add the DevExpress Popup Component

You can add the DevExpress Popup component to your solution in one of the following ways:

• Install the NuGet package
• Add libraries from the downloaded bundle

Install the NuGet Package

1. Obtain your NuGet feed URL.

2. Register the DevExpress NuGet feed as a package source.

   Visual Studio

   Navigate to Tools | Options | NuGet Package Manager | Package Source and add the DevExpress feed to the list of package sources.

   

   Visual Studio for Mac

   Navigate to Visual Studio | Preferences | NuGet | Sources and add the DevExpress feed to the list of sources.

   

3. Install the DevExpress.XamarinForms.Editors package from the DevExpress NuGet feed.

   Visual Studio

   1. Select Tools | NuGet Package Manager | Manage NuGet Packages for Solution in Visual Studio’s main menu, or right-click the solution in Solution Explorer and select Manage NuGet Packages for Solution.
   2. Search for DevExpress.XamarinForms.Editors in the DevExpress package source, select all projects in the solution, and click Install.

   Visual Studio for Mac

   1. Select Project | Manage NuGet Packages in the main menu, or right-click the solution in Solution Pad and select Manage NuGet Packages
   2. In the invoked Manage NuGet Packages dialog, select DevExpress from the Source drop-down list in the top left corner, search for DevExpress.XamarinForms.Editors and click Add Package.
      Select all of the solution’s projects in the invoked Select Projects dialog and click Ok.

Add Libraries from the Downloaded Bundle

If you did not install the NuGet package, do the following:

1. Add the Xamarin.Kotlin.StdLib NuGet package to the Android project of your Xamarin.Forms solution.

2. Download the Mobile UI Controls for Xamarin.Forms bundle from the Client Center.

3. Add the following assembly references to the common, Android-specific and iOS-specific projects of your solution:

   <YourAppName>

   • DevExpress.XamarinForms.Core.dll
   • DevExpress.XamarinForms.Editors.dll

   <YourAppName>.Android

   • DevExpress.XamarinForms.Editors.Android.dll
   • DevExpress.Xamarin.Android.Editors.dll
   • DevExpress.XamarinForms.Core.Android.dll

   <YourAppName>.iOS

   • DevExpress.XamarinForms.Editors.iOS.dll
   • DevExpress.Xamarin.iOS.Editors.dll
   • DevExpress.XamarinForms.Core.iOS.dll

   Note

   The above files are in the <DevExpress.Xamarin bundle>/Binaries directory. Ensure the downloaded <DevExpress.Xamarin> bundle was unzipped.

Add the Initialization Code

Add this code to the AppDelegate.cs file of the iOS project, before the LoadApplication method call:

C#

DevExpress.XamarinForms.Popup.iOS.Initializer.Init();

Add this code to the App.xaml.cs file of the project with the shared code, before the InitializeComponent method call:

C#

DevExpress.XamarinForms.Popup.Initializer.Init();

Create a DXPopup Instance

Add the following namespace to the XAML markup or C# file in which you create a popup:

XAML

xmlns:dxp="http://schemas.devexpress.com/xamarin/2014/forms/popup"

C#

using DevExpress.XamarinForms.Popup;

Create a DXPopup instance in XAML markup or C# code.

The following example creates a popup that contains a StackLayout with a single child view – Label. The DXPopup.IsOpen property is set to true to display the popup at application startup.

XAML

<ContentPage 
    xmlns="http://xamarin.com/schemas/2014/forms"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:local="clr-namespace:PopupExample"
    xmlns:dxp="http://schemas.devexpress.com/xamarin/2014/forms/popup"
    x:Class="PopupExample.MainPage">

    <StackLayout BackgroundColor="LightYellow">
        <dxp:DXPopup IsOpen="True">
            <StackLayout WidthRequest="200" BackgroundColor="AliceBlue">
                <Label Text="This is the DevExpress Popup component for Xamarin.Forms.
                                &#10;Tap outside the popup to hide it."
                        Margin="5, 5"/>
            </StackLayout>
        </dxp:DXPopup>
    </StackLayout>
</ContentPage>

C#

using Xamarin.Forms;
using DevExpress.XamarinForms.Popup;

namespace PopupExample {
    public partial class MainPage : ContentPage {
        public MainPage() {
            InitializeComponent();

            StackLayout layout = new StackLayout();
            layout.BackgroundColor = Color.LightYellow;

            DXPopup popup = new DXPopup() {
                IsOpen = true
            };
            StackLayout popupContent = new StackLayout() {
                WidthRequest = 200,
                BackgroundColor = Color.AliceBlue
            };
            Label popupLabel = new Label() {
                Text = "This is the DevExpress Popup component for Xamarin.Forms." +
                        "\n\rTap outside the popup to hide it.",
                Margin = new Thickness(5, 5)
            };
            popupContent.Children.Add(popupLabel);
            popup.Content = popupContent;

            layout.Children.Add(popup);
            Content = layout;
        }
    }
}