Get Started with DevExpress Popup for .NET MAUI

• Mar 21, 2023
• 3 minutes to read

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

Prerequisites

Refer to the following pages before you proceed with this Getting Started lesson:

• Microsoft .NET Multi-platform App UI documentation
• .NET MAUI and DevExpress Mobile UI Supported Platforms
• Requirements for .NET MAUI and DevExpress Mobile UI
• Get Started with DevExpress Controls for .NET Multi-platform App UI (.NET MAUI)

Create a New Project

Create a new .NET MAUI 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 .NET MAUI project template, you should install the following NuGet packages from the DevExpress NuGet Gallery:

• DevExpress.Maui.Controls—contains the DXPopup component.

In the MauiProgram.cs file, call the DevExpress.Maui.UseDevExpress method to initialize the DXPopup component.

C#

using DevExpress.Maui;
using Microsoft.Maui.Controls.Hosting;
using Microsoft.Maui.Hosting;

namespace PopupExample;

public static class MauiProgram {
    public static MauiApp CreateMauiApp() {
        var builder = MauiApp.CreateBuilder();
        builder
            .UseMauiApp<App>()
            // This method adds handlers for all DevExpress components.
            .UseDevExpress()
            /* You can also use the code below to add the DXPopup handler.
            .ConfigureMauiHandlers(handlers => {
                handlers.AddHandler<DXPopup, DXPopupHandler>();
            })
            */
            .ConfigureFonts(fonts => {
                fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
            });

        return builder.Build();
    }
}

See the following help topic for more information: Get Started with DevExpress Controls for .NET Multi-platform App UI (.NET MAUI).

Add Popup to the Main Page

The markup below shows how to create a DXPopup that contains a Label within a StackLayout.

XAML

<ContentPage 
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:dxco="clr-namespace:DevExpress.Maui.Controls;assembly=DevExpress.Maui.Controls"
    x:Class="PopupExample.MainPage">

    <StackLayout BackgroundColor="LightYellow">
        <Button Text="Open Popup" Clicked="Button_Clicked"/>
            <dxco:DXPopup x:Name="Popup">
                <StackLayout WidthRequest="200" BackgroundColor="AliceBlue" Padding="5, 5">
                    <Label Text="This is the DevExpress Popup component for .NET MAUI"/>
                    <Label Text="Tap outside the popup to hide it." FontAttributes="Bold"/>
                </StackLayout>
            </dxco:DXPopup>
    </StackLayout>
</ContentPage>

C#

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 DevExpress.Maui.Controls;

namespace PopupExample;

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

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

        DXPopup popup = new DXPopup() {
            IsOpen = true
        };
        StackLayout popupContent = new StackLayout() {
            WidthRequest = 200,
            BackgroundColor = Colors.AliceBlue,
            Padding = new Thickness(5, 5)
        };
        Label popupLabel = new Label() {
            Text = "This is the DevExpress Popup component for .NET MAUI."
        };
        Label popupLabel1 = new Label() {
            Text = "Tap outside the popup to hide it."
        };
        popupContent.Children.Add(popupLabel);
        popupContent.Children.Add(popupLabel1);
        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;
    }
}