Introducing the New .NET MAUI Popup Control
Tags: dotnetmaui, mobile, ui, desktop
Published: 2023-04-12 12:20:10

---
title: Introducing the New .NET MAUI Popup Control
published: true
date: 2023-04-12 11:00:00 UTC
tags: dotnetmaui, mobile, ui, desktop
canonical_url: https://www.syncfusion.com/blogs/post/dotnet-maui-popup-control.aspx
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lgr6i1fniq0799gt3ay6.png
---
In Syncfusion’s [Essential Studio 2023 Volume 1 ](https://www.syncfusion.com/forums/181344/essential-studio-2023-volume-1-main-release-v21-1-35-is-available-for-download "Essential Studio 2023 Volume 1")release, we introduced a new Popup control for the [.NET MAUI](https://www.syncfusion.com/maui-controls/ ".NET MAUI controls") platform. The [.NET MAUI Popup control](https://www.syncfusion.com/maui-controls/maui-popup ".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](#positioning)
- [Full-screen mode](#full_screen_mode)
- [Auto-sizing](#auto_sizing)
- [Different layouts](#different_layouts)
- [Template support](#template_support)
- [Modal mode](#modal_mode)

### <a name="positioning">Positioning</a>

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](https://www.syncfusion.com/blogs/wp-content/uploads/2023/04/NET-MAUI-Popup-control-with-center-positioning-2.png)
- **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](https://www.syncfusion.com/blogs/wp-content/uploads/2023/04/NET-MAUI-Popup-control-with-absolute-positioning-2.png)
- **Relative positioning:** Use the **ShowRelativeToView(View, RelativePosition)** method to display the Popup at any of the [eight positions](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Popup.PopupRelativePosition.html#fields "PopupRelativePosition class of .NET MAUI Popup control") relative to the specified view. ![.NET MAUI Popup control with relative positioning](https://www.syncfusion.com/blogs/wp-content/uploads/2023/04/NET-MAUI-Popup-control-with-relative-positioning-1.png)
- **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](https://www.syncfusion.com/blogs/wp-content/uploads/2023/04/NET-MAUI-Popup-control-with-absolute-relative-positioning-1.png)

### <a name="full_screen_mode">Full-screen mode</a>

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.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/04/Full-screen-mode-in-.NET-MAUI-Popup-Control-1.png" alt="Full-screen mode in .NET MAUI Popup Control" style="width:100%">

  <figcaption>Full-screen mode in .NET MAUI Popup Control</figcaption>

</figure>

### <a name="auto_sizing">Auto-sizing</a>

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

### <a name="differnet_layouts">Different layouts</a>

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

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/04/NET-MAUI-Popup-Control-with-Single-Button-Layout-2.png" alt=".NET MAUI Popup Control with Single-Button Layout" style="width:100%">

  <figcaption>.NET MAUI Popup Control with Single-Button Layout</figcaption>

</figure>

<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/04/NET-MAUI-Popup-Control-with-Two-Button-Layout-2.png" alt=".NET MAUI Popup Control with Two-Button Layout" style="width:100%">

  <figcaption>.NET MAUI Popup Control with Two-Button Layout</figcaption>

</figure>

### <a name="template_support">Template support</a>

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

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/04/Template-Support-in-.NET-MAUI-Popup-Control-1.png" alt="Template Support in .NET MAUI Popup Control" style="width:100%">

  <figcaption>Template Support in .NET MAUI Popup Control</figcaption>

</figure>

### <a name="modal_mode">Modal mode</a>

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

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/04/NET-MAUI-Popup-control-in-modal-mode-1.png" alt=".NET MAUI Popup control in modal mode" style="width:100%">

  <figcaption>.NET MAUI Popup control in modal mode</figcaption>

</figure>

## 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](https://learn.microsoft.com/en-us/dotnet/maui/get-started/first-app?view=net-maui-7.0&tabs=vswin&pivots=devices-android "Build your .NET MAUI app").

### Step 2: Add the .NET MAUI Popup NuGet package

Syncfusion .NET MAUI controls are available in the [NuGet Gallery](https://www.nuget.org/ "NuGet Gallery"). To add the .NET MAUI Popup control to your project, open the **NuGet package manager** in [Visual Studio](https://visualstudio.microsoft.com/ "Visual Studio"), search for [Syncfusion.Maui.Popup](https://www.nuget.org/packages/Syncfusion.Maui.Popup "Syncfusion.Maui.Popup NuGet Package"), 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.

```csharp
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.

```xml
<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.

```xml
<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
<?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#**

```csharp
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.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/04/NET-MAUI-Popup-Control-with-Default-Layout-2.png" alt=".NET MAUI Popup Control with Default Layout" style="width:100%">

  <figcaption>.NET MAUI Popup Control with Default Layout</figcaption>

</figure>

### 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
<?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.

```csharp
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;
        }
    }
}
```
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/04/Customizing-the-.NET-MAUI-Popup-Control-Using-Templates-2.png" alt="Customizing the .NET MAUI Popup Control Using Templates" style="width:100%">

  <figcaption>Customizing the .NET MAUI Popup Control Using Templates</figcaption>

</figure>

**Note:** For more details, refer to the [.NET MAUI Popup control documentation](https://help.syncfusion.com/maui/popup/getting-started "Getting started with .NET MAUI Popup control").

## Conclusion

Thanks for reading! In this blog, we’ve explored the features of the new [.NET MAUI Popup control](https://www.syncfusion.com/maui-controls/maui-popup ".NET MAUI Popup control") introduced in the [2023 Volume 1](https://www.syncfusion.com/forums/181344/essential-studio-2023-volume-1-main-release-v21-1-35-is-available-for-download "Essential Studio 2023 Volume 1")release. More information about our .NET MAUI controls and other features in this release can be found on our [Release Notes](https://help.syncfusion.com/common/essential-studio/release-notes/v21.1.35 "Essential Studio Release Notes") and [What’s New pages](https://www.syncfusion.com/products/whatsnew "Essential Studio What’s New page"). Try out the upgrades and share your thoughts in the comment section below!

You can also contact us via our [support forum](https://www.syncfusion.com/forums "Syncfusion Support Forum"), [support portal](https://support.syncfusion.com/ "Syncfusion Support Portal"), or [feedback portal](https://www.syncfusion.com/feedback "Syncfusion Feedback Portal"). We are always happy to assist you!

## Related blogs

- [Syncfusion Essential Studio 2023 Volume 1 Is Here!](https://www.syncfusion.com/blogs/post/essential-studio-2023-volume-1.aspx "Blog: Syncfusion Essential Studio 2023 Volume 1 Is Here!")
- [What’s New in 2023 Volume 1: .NET MAUI Charts](https://www.syncfusion.com/blogs/post/2023-volume-1-dotnet-maui-charts.aspx "Blog: What’s New in 2023 Volume 1: .NET MAUI Charts")
- [Introducing the 7th Set of .NET MAUI Controls and Features](https://www.syncfusion.com/blogs/post/7th-set-of-dotnet-maui-controls.aspx "Blog: Introducing the 7th Set of .NET MAUI Controls and Features")
- [Streamline MAUI Projects with the Syncfusion .NET MAUI Template Studio](https://www.syncfusion.com/blogs/post/dotnet-maui-template-studio.aspx "Blog: Streamline MAUI Projects with the Syncfusion .NET MAUI Template Studio")