Get Started with DevExpress Popup for Xamarin.Forms

• Nov 21, 2022
• 3 minutes to read

Note

Microsoft will end Xamarin-related support services on May 1, 2024 and shift development focus to the .NET MAUI platform.

Based on Microsoft’s decision, we highly recommend those using Xamarin.Forms to consider our .NET MAUI Component Suite for existing/new mobile projects. DevExpress .NET MAUI Popup Control supports many of the features/capabilities available in Xamarin.Forms Popup Control.

Please refer to the following help topic when you are ready to migrate your DevExpress Xamarin.Forms-based application to .NET MAUI: Migration from Xamarin.Forms to .NET MAUI.

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

Create a New Project

Create a new Xamarin.Forms project in Visual Studio. If you use the DevExpress project templates, the project is already pre-configured and contains required NuGet packages, components are initialized, and XAML namespaces are declared on all predefined pages.

If you use the standard Xamarin.Forms project templates, you should install the following NuGet packages from the DevExpress NuGet Gallery:

• DevExpress.XamarinForms.Editors—contains the DXPopup component.

In the App.xaml.cs file of the shared project, call the Init() method to initialize the DXPopup component.

C#

namespace DXApp1 {
    public partial class App : Application {
        public App() {
            DevExpress.XamarinForms.Popup.Initializer.Init();
            InitializeComponent();
            MainPage = new MainPage();
        }
    }
}

If the application supports iOS, call the DevExpress.XamarinForms.Popup.iOS.Initializer.Init method in the AppDelegate.cs file of the iOS project.

C#

namespace DXApp1.iOS {
    [Register("AppDelegate")]
    public partial class AppDelegate : global::Xamarin.Forms.Platform.iOS.FormsApplicationDelegate {
        public override bool FinishedLaunching(UIApplication app, NSDictionary options) {
            global::Xamarin.Forms.Forms.Init();
            DevExpress.XamarinForms.Popup.iOS.Initializer.Init();
            LoadApplication(new App());

            return base.FinishedLaunching(app, options);
        }
    }
}

See the following help topic for more information: Get Started with DevExpress Components for Xamarin.Forms.

Add Popup to the Main Page

The markup below shows how to create a DXPopup that contains a StackLayout with a Label. Note that the example declares the dxp XAML namespace.

XAML

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

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

C#

using System;
using Xamarin.Forms;

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

        private void Button_Clicked(object sender, EventArgs e) {
            Popup.IsOpen = true;
        }
    }
}

The example below shows how to create the same popup in code.

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\nTap outside the popup to hide it.",
                Margin = new Thickness(5, 5)
            };

            popupContent.Children.Add(popupLabel);
            popup.Content = popupContent;

            Button button = new Button() { Text = "Open Popup" };
            button.Clicked += (s, e) => { popup.IsOpen = true; };

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