Introducing the New .NET MAUI Popup Control
Live Chat Icon For mobile
Live Chat Icon
Popular Categories.NET  (179).NET Core  (29).NET MAUI  (214)Angular  (110)ASP.NET  (51)ASP.NET Core  (82)ASP.NET MVC  (89)Azure  (41)Black Friday Deal  (1)Blazor  (225)BoldSign  (15)DocIO  (24)Essential JS 2  (109)Essential Studio  (200)File Formats  (68)Flutter  (133)JavaScript  (226)Microsoft  (120)PDF  (81)Python  (1)React  (105)Streamlit  (1)Succinctly series  (131)Syncfusion  (938)TypeScript  (33)Uno Platform  (3)UWP  (4)Vue  (45)Webinar  (52)Windows Forms  (61)WinUI  (71)WPF  (162)Xamarin  (161)XlsIO  (38)Other CategoriesBarcode  (5)BI  (29)Bold BI  (8)Bold Reports  (2)Build conference  (9)Business intelligence  (55)Button  (4)C#  (157)Chart  (139)Chart of the week  (53)Cloud  (15)Company  (443)Dashboard  (8)Data Science  (3)Data Validation  (8)DataGrid  (68)Development  (654)Doc  (8)DockingManager  (1)eBook  (99)Enterprise  (22)Entity Framework  (7)Essential Tools  (14)Excel  (43)Extensions  (22)File Manager  (7)Gantt  (19)Gauge  (12)Git  (5)Grid  (31)HTML  (13)Installer  (2)Knockout  (2)Language  (1)LINQPad  (1)Linux  (2)M-Commerce  (1)Metro Studio  (11)Mobile  (512)Mobile MVC  (9)OLAP server  (1)Open source  (1)Orubase  (12)Partners  (21)PDF viewer  (43)Performance  (12)PHP  (2)PivotGrid  (4)Predictive Analytics  (6)Report Server  (3)Reporting  (10)Reporting / Back Office  (11)Rich Text Editor  (12)Road Map  (12)Scheduler  (54)Security  (4)SfDataGrid  (9)Silverlight  (21)Sneak Peek  (31)Solution Services  (4)Spreadsheet  (11)SQL  (14)Stock Chart  (1)Surface  (4)Tablets  (5)Theme  (12)Tips and Tricks  (112)UI  (393)Uncategorized  (68)Unix  (2)User interface  (68)Visual State Manager  (2)Visual Studio  (31)Visual Studio Code  (19)Web  (611)What's new  (333)Windows 8  (19)Windows App  (2)Windows Phone  (15)Windows Phone 7  (9)WinRT  (26)
Introducing the New .NET MAUI Popup Control

Introducing the New .NET MAUI Popup Control

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

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();
       }
}

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"/>

Step 5: Initialize the Popup control

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

<popup:SfPopup />

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>

C#

namespace PopupMAUI;
 
public partial class MainPage : ContentPage
{
    public MainPage()
    {
       InitializeComponent();
    }
 
    private void ClickToShowPopup_Clicked(object sender, EventArgs e)
    {
        this.popup.Show();
    }
}

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>

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;
        }
    }
}
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 1 release. 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!

Test Flight
App Center Badge
Google Play Store Badge
Microsoft Badge
Github Store Badge

Related blogs

Tags:

Share this post:

Popular Now

Be the first to get updates

Subscribe RSS feed

Be the first to get updates

Subscribe RSS feed