Introducing the New .NET MAUI Popup Control

Jollen Moyani - Apr 12 '23 - - Dev Community

In Syncfusion’s Essential Studio 2023 Volume 1 release, we introduced a new Popup control for the .NET MAUI platform. The .NET MAUI Popup control (SfPopup) is an alert dialog displaying content in a separate window on the active screen. The Popup’s dialog can be shown in any desired position. You can customize the appearance of its header, body, and footer and display significant information precisely based on the application’s needs.

Let’s see the features of the new .NET MAUI Popup control and the steps to get started.

Key features

The key features of the .NET MAUI Popup control are:

Positioning

The .NET MAUI Popup control supports the following positioning options:

  • Center positioning: Use the IsOpen property or SfPopup.Show method to display the Popup’s dialog at the center of the screen. .NET MAUI Popup control with center positioning
  • Absolute positioning: Use the Show(x-position, y-position) method to display the Popup at any desired location on the screen by specifying the x- and y-coordinates. .NET MAUI Popup control with absolute positioning
  • Relative positioning: Use the ShowRelativeToView(View, RelativePosition) method to display the Popup at any of the eight positions relative to the specified view. .NET MAUI Popup control with relative positioning
  • Absolute relative positioning: Use the ShowRelativeToView(View, RelativePosition,x position,y position) method to display the Popup at absolute x-y-coordinates from the relative position of the specified view. .NET MAUI Popup control with absolute relative positioning

Full-screen mode

You can display the .NET MAUI Popup control in full-screen width and height using the IsFullScreen property or Show(isFullScreen = true) method. Refer to the following image.

Full-screen mode in .NET MAUI Popup Control

Full-screen mode in .NET MAUI Popup Control

Auto-sizing

The .NET MAUI Popup control can automatically adjust its width and height based on the loaded content.

Different layouts

You can choose default layouts, namely one-button and two-button layouts, to display simple, minimal information on the Popup.

.NET MAUI Popup Control with Single-Button Layout

.NET MAUI Popup Control with Single-Button Layout

.NET MAUI Popup Control with Two-Button Layout

.NET MAUI Popup Control with Two-Button Layout

Template support

Use the template support to load any view as the header, footer, and content of the Popup control.

Template Support in .NET MAUI Popup Control

Template Support in .NET MAUI Popup Control

Modal mode

You can make the Popup a modal dialog to prevent interactions with the underlying screen until certain actions are performed.

.NET MAUI Popup control in modal mode

.NET MAUI Popup control in modal mode

Getting started with the .NET MAUI Popup Control

We have seen the key features of the .NET MAUI Popup control. Now let’s see how to add it to your .NET MAUI application:

Step 1: Create a .NET MAUI project

First, create a .NET MAUI project.

Step 2: Add the .NET MAUI Popup NuGet package

Syncfusion .NET MAUI controls are available in the NuGet Gallery. To add the .NET MAUI Popup control to your project, open the NuGet package manager in Visual Studio, search for Syncfusion.Maui.Popup, and then install it.

Step 3: Register the handler

Syncfusion.Maui.Core NuGet is a dependent package for all Syncfusion .NET MAUI controls. In the MauiProgram.cs file, register the handler for Syncfusion core.

namespace PopupMAUI;
using Syncfusion.Maui.Core.Hosting;

public static class MauiProgram
{
       public static MauiApp CreateMauiApp()
       {
             var builder = MauiApp.CreateBuilder();
             builder
                .UseMauiApp<App>()
                .ConfigureSyncfusionCore()
                .ConfigureFonts(fonts =>
                {
                   fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
                   fonts.AddFont("OpenSans-Semibold.ttf", "OpenSansSemibold");
                   fonts.AddFont("Roboto-Medium.ttf", "Roboto-Medium");
                   fonts.AddFont("Roboto-Regular.ttf", "Roboto-Regular");
                });
            return builder.Build();
       }
}
Enter fullscreen mode Exit fullscreen mode

Step 4: Add the namespace

Now, add the Syncfusion.Maui.Popup namespace on your XAML page.

<xmlns:popup ="clr-namespace:Syncfusion.Maui.Popup;assembly=Syncfusion.Maui.Popup"/>
Enter fullscreen mode Exit fullscreen mode

Step 5: Initialize the Popup control

Then, initialize the .NET MAUI Popup control using the following code.

<popup:SfPopup />
Enter fullscreen mode Exit fullscreen mode

Step 6: Display the default Popup

Let’s display the default popup on your screen by calling the Show method. Refer to the following code example.

XAML

<?xml version="1.0" encoding="utf-8" ?>
 <ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
              xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
              xmlns:popup ="clr-namespace:Syncfusion.Maui.Popup;assembly=Syncfusion.Maui.Popup"
              x:Class="PopupMAUI.MainPage">
  <StackLayout x:Name="mainLayout">
   <Button x:Name="clickToShowPopup" 
           Text="ClickToShowPopup"
           VerticalOptions="Start" 
           HorizontalOptions="Center"
           Clicked="ClickToShowPopup_Clicked" />
   <popup:SfPopup x:Name="popup" />
  </StackLayout>
 </ContentPage>

Enter fullscreen mode Exit fullscreen mode

C#

namespace PopupMAUI;

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

    private void ClickToShowPopup_Clicked(object sender, EventArgs e)
    {
        this.popup.Show();
    }
}

Enter fullscreen mode Exit fullscreen mode

Refer to the following image.

.NET MAUI Popup Control with Default Layout

.NET MAUI Popup Control with Default Layout

Step 7: Display the templated Popup

Using the template properties, customize the header, message, and footer content. Refer to the following code example.

XAML

<?xml version="1.0" encoding="utf-8" ?>
 <ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
              xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
              xmlns:popup ="clr-namespace:Syncfusion.Maui.Popup;assembly=Syncfusion.Maui.Popup"
              xmlns:local="clr-namespace:PopupMAUI"
              x:Class="PopupMAUI.TermsAndCondition">

  <ContentPage.BindingContext>
   <local:GettingStartedViewModel/>
  </ContentPage.BindingContext>

  <ContentPage.Resources>

   <Style TargetType="Button" x:Key="DeclineButtonStyle">
    <Setter Property="CornerRadius" Value="20"/>
    <Setter Property="BorderColor" Value="#79747E"/>
    <Setter Property="BorderWidth" Value="1"/>
    <Setter Property="BackgroundColor" Value="#FFFFFF" />
    <Setter Property="TextColor" Value="#6750A4"/>
    <Setter Property="FontSize" Value="14"/>
    <Setter Property="FontFamily" Value="Roboto-Medium"/>
    <Setter Property="CharacterSpacing" Value="0.1"/>
   </Style>

   <Style TargetType="Button" x:Key="AcceptButtonStyle">
    <Setter Property="CornerRadius" Value="20"/>
    <Setter Property="BorderColor" Value="#6750A4"/>
    <Setter Property="BorderWidth" Value="1"/>
    <Setter Property="BackgroundColor" Value="#6750A4" />
    <Setter Property="TextColor" Value="#FFFFFF"/>
    <Setter Property="FontSize" Value="14"/>
    <Setter Property="FontFamily" Value="Roboto-Medium"/>
    <Setter Property="CharacterSpacing" Value="0.1"/>
   </Style>

   <Style TargetType="Label" x:Key="PopupContentLabelStyle">
    <Setter Property="TextColor" Value="#49454E"/>
    <Setter Property="FontFamily" Value="Roboto-Regular"/>
    <Setter Property="FontSize" Value="14"/>
    <Setter Property="CharacterSpacing" Value="0.24"/>
   </Style>

   <Style TargetType="Label" x:Key="PopupHeaderLabelStyle">
    <Setter Property="TextColor" Value="#1C1B1F"/>
    <Setter Property="FontFamily" Value="Roboto-Regular"/>
    <Setter Property="FontSize" Value="24"/>
    <Setter Property="CharacterSpacing" Value="0.15"/>
   </Style>
  </ContentPage.Resources>

  <!--Popup definition-->
   <popup:SfPopup x:Name="termsAndConditionsDialog"
                  StaysOpen="True"
                  IsOpen="{Binding IsOpen}"
                  ShowFooter="True" FooterHeight="100"
                  HeaderTitle="Terms and Conditions"
                  ShowCloseButton="False"                                          
                  WidthRequest="350"                       
                  AutoSizeMode="Height">

   <!--Popup style-->
    <popup:SfPopup.PopupStyle>
     <popup:PopupStyle HeaderTextAlignment="Center"
                       HeaderBackground="White"
                       HeaderTextColor="#1C1B1F"
                       HeaderFontFamily="Roboto-Medium"
                       Stroke="Gray"
                       StrokeThickness="1"
                       HeaderFontSize="17"
                       MessageBackground="White"
                       FooterBackground="White"
                       CornerRadius="5">
     </popup:PopupStyle>
    </popup:SfPopup.PopupStyle>

   <!--Popup content customization-->
    <popup:SfPopup.ContentTemplate>
     <DataTemplate>
      <Grid RowDefinitions="Auto,Auto,Auto,Auto" ColumnDefinitions="Auto,*" RowSpacing="6" ColumnSpacing="4">
       <Label Text="1. " Style="{StaticResource PopupContentLabelStyle}" LineBreakMode="WordWrap"/>
       <Label Grid.Column="1" Text="Children below the age of 18 cannot be admitted to movies certified A." Style="{StaticResource PopupContentLabelStyle}" LineBreakMode="WordWrap"/>
       <Label Grid.Row="1" Text="2. " Style="{StaticResource PopupContentLabelStyle}" LineBreakMode="WordWrap"/>
       <Label Grid.Row="1" Grid.Column="1" Text="Please carry proof of age for movies certified A." Style="{StaticResource PopupContentLabelStyle}" LineBreakMode="WordWrap"/>
       <Label Grid.Row="2" Text="3. " Style="{StaticResource PopupContentLabelStyle}" LineBreakMode="WordWrap"/>
       <Label Grid.Row="2" Grid.Column="1" Text="Drinking alcohol is strictly prohibited inside the premises." Style="{StaticResource PopupContentLabelStyle}" LineBreakMode="WordWrap"/>
       <Label Grid.Row="3" Text="4. " Style="{StaticResource PopupContentLabelStyle}" LineBreakMode="WordWrap"/>
       <Label Grid.Row="3" Grid.Column="1" Text="Please purchase tickets for children above the age of 3." Style="{StaticResource PopupContentLabelStyle}" LineBreakMode="WordWrap"/>
      </Grid>
     </DataTemplate>
    </popup:SfPopup.ContentTemplate>

   <!--Popup footer customization-->
    <popup:SfPopup.FooterTemplate>
     <DataTemplate>

      <Grid ColumnDefinitions="Auto,Auto" HorizontalOptions="Center" VerticalOptions="Center" ColumnSpacing="12">
       <Button Text="Decline" 
               Command="{Binding Source={x:Reference viewModel}, Path=DeclineCommand}"
               CommandParameter="{x:Reference termsAndConditionPopup}"                                                 
               Style="{StaticResource DeclineButtonStyle}" 
               WidthRequest="126" 
               HeightRequest="40"/>
       <Button Text="Accept" 
               Grid.Column="1" 
               Command="{Binding Source={x:Reference viewModel}, Path=AcceptCommand}"
               CommandParameter="{x:Reference ticketBookingPopup}"                                                 
               Style="{StaticResource AcceptButtonStyle}" 
               WidthRequest="126" 
               HeightRequest="40"/>

      </Grid>
     </DataTemplate>
    </popup:SfPopup.FooterTemplate>
   </popup:SfPopup>
 </ContentPage>
Enter fullscreen mode Exit fullscreen mode

Then, show the Popup with the MVVM model by setting the IsOpen property.

namespace PopupMAUI
{
    public partial class TermsAndCondition : ContentPage
    {
        public TermsAndCondition ()
        {
            InitializeComponent ();
            this.Loaded += TermsAndCondition_Loaded;
        }

        private void TermsAndCondition_Loaded(object sender, EventArgs e)
        {
            (this.BindingContext as GettingStartedViewModel).IsOpen = true;
        }
    }
}
Enter fullscreen mode Exit fullscreen mode

Customizing the .NET MAUI Popup Control Using Templates

Customizing the .NET MAUI Popup Control Using Templates

Note: For more details, refer to the .NET MAUI Popup control documentation.

Conclusion

Thanks for reading! In this blog, we’ve explored the features of the new .NET MAUI Popup control introduced in the 2023 Volume 1release. More information about our .NET MAUI controls and other features in this release can be found on our Release Notes and What’s New pages. Try out the upgrades and share your thoughts in the comment section below!

You can also contact us via our support forum, support portal, or feedback portal. We are always happy to assist you!

Related blogs

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .