Exploring Popup & Dialogs: Promotions, Cart Updates, Personalized Offers

Popups can help in ecommerce apps to alert the user to important information.

In an app, there are many ways to capture the user’s attention and display relevant information. One of the most effective methods is using popups—informative boxes that appear above the current screen content, allowing you to communicate key messages or prompt the user to make important decisions.

For example, you might show a message like:

“Are you sure you want to delete this record?”

Along with “Yes” and “No” buttons. This type of popup is commonly used to confirm sensitive or irreversible actions. But it can also serve a purely informative purpose, such as:

“Record updated successfully!”

Now, imagine you have a retail app and want to notify users about a new promotion. You could show a popup the first time the user opens the app, featuring an eye-catching message and a call-to-action button like “Claim Offer.” This not only helps the user to see the promotion but also helps drive more in-app sales.

Popups are also great for keeping users informed about real-time events, like order updates, validation errors or success confirmations.

In summary, popups are a super useful, versatile and easy-to-implement component—especially when working with .NET MAUI, where you can take advantage of the Progress Telerik UI for .NET MAUI Popup control to integrate them quickly and beautifully into your app.

What Is the .NET MAUI Popup?

The .NET MAUI Popup control lets you display custom popup windows in your app—perfect for showing alerts, important messages or getting user confirmation and input.

This control is part of the Telerik UI for .NET MAUI library, which offers over 60 professionally designed UI components. It’s ideal for building modern, cross-platform applications with a polished user experience.

Initial Configuration

Let’s set up the basic configuration so you can use the control directly in your XAML file.

For now, we’ll focus only on this initial setup. As we move forward, you’ll see how the other details are implemented step by step.

First of all, make sure you have the following prerequisites ready:

• Set up your .NET MAUI application.
• Download a Telerik UI for .NET MAUI license key file.
• Install Telerik UI for .NET MAUI.

Once all the prerequisites are set, you’re ready to start! 😎

Step 1: Add the Telerik namespace

Go to your XAML file and add the following namespace:

xmlns:telerik="http://schemas.telerik.com/2022/xaml/maui"

Step 2: Register Telerik in MauiProgram.cs

Head over to your MauiProgram.cs file and, inside the CreateMauiApp method, add .UseTelerik()to enable Telerik controls. Place it right above .UseMauiApp<App>(), like this:

using Telerik.Maui.Controls.Compatibility; 

public static class MauiProgram 
{ 
public static MauiApp CreateMauiApp() 
{ 
    var builder = MauiApp.CreateBuilder(); 
    builder 
	    .UseTelerik() 
	    .UseMauiApp<App>() 
	    .ConfigureFonts(fonts => 
    { 
    fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular"); 
    }); 
	    return builder.Build(); 
    } 
}

Exploring the Supported Modals

Now that you have the implementation you need to get started, let’s explore the different types of popups you can use. With the Telerik .NET MAUI Popup control, you can easily configure it to behave as either modal or non-modal, depending on the interaction you want to create.

But what does that mean? 🤔 Let me explain the characteristics of each:

Modal Popup

This type of popup appears above the content and blocks the entire screen. The user can’t interact with anything else until they respond to the popup.

For example, if a message appears like, “Are you sure you want to update the record?” the user must press Accept or Cancel before continuing to use the app.

📝 This is ideal for important or sensitive actions.

Non-Modal Popup

This also appears above the content but does not block the screen. The user can tap outside the popup to dismiss it or simply ignore it and keep using the app. It’s useful for showing quick messages or informative suggestions.

⚠️ If the message is critical or requires confirmation, it’s best to use a modal popup to make sure the user sees it and responds accordingly.

How to Implement It in Code?

To specify whether the popup should be modal or non-modal, you simply set the IsModal property to True or False, depending on the behavior you want.

Below, you can see a full example of how to define the popup in XAML and set the IsModal property.

<telerik:RadPopup.Popup> 
<telerik:RadPopup x:Name="popup" 
IsModal="True" 
OutsideBackgroundColor="#66000000" 
Placement="Center"> 
<telerik:RadBorder BackgroundColor="#F9F9F9" 
BorderColor="#DFDFDF" 
BorderThickness="1" 
CornerRadius="8" 
WidthRequest="300"> 
<VerticalStackLayout Padding="12" 
Spacing="12"> 
	    <Label TextColor="Black" 
	    Text="With Telerik Popup for .NET MAUI you can easily add modal popups to your application in order to draw attention to important information or receive user input." 
			    LineBreakMode="WordWrap" /> 
			    <telerik:RadTemplatedButton HorizontalOptions="Center" 
			    Content="Close" 
			    Clicked="ClosePopup" /> 
		    </VerticalStackLayout> 
	    </telerik:RadBorder> 
    </telerik:RadPopup> 
</telerik:RadPopup.Popup>

C# Code-Behind

Here’s how you handle opening and closing the Popup:

private void ClosePopup(object sender, EventArgs e) => popup.IsOpen = false;

private void ShowPopup(object sender, EventArgs e) => popup.IsOpen = true;

Here’s an image that shows the result:

Available Animations

The .NET MAUI Popup supports built-in animations that play when the popup is shown or hidden. You also have full control over the animation type, its duration and the easing (the pace at which the animation runs).

🔧 Setting the Animation Type

You can configure the animation using the AnimationType property, which accepts the following options:

• Fade (default): The popup fades in and out smoothly.
• None: Disables animations entirely. The popup will appear or disappear instantly, with no visual effect.
• Zoom: The popup appears with a zoom effect, as if it expands or contracts from the center.

⏱️ Animation Duration

You can also define, in milliseconds, how long you want the animation to last by using the AnimationDuration property. The default value is 300 ms.

🌀 Animation Easing

This one lets you control the pace of the animation—how it accelerates and decelerates over time.

You can choose from several easing options, such as:

• Easing.Linear (default): The animation runs at a constant speed from start to finish.
• Easing.CubicIn: The animation starts slowly and then speeds up.
• Easing.BounceOut: The animation ends with a playful bounce effect.

Feel free to explore other easing options available in the Microsoft.Maui.Easing class to match your app’s style.

Popup Placement

You also have the option to configure properties that control how the popup is positioned on the screen. The main options include:

🔹 PlacementTarget: The reference element relative to which the popup will be displayed when it opens.
🔹 Placement: Specifies how the popup will be aligned in relation to the PlacementTarget. This property accepts a value of type PlacementMode and supports the following options:

• The Top, Right, Left and Bottom options define on which side of the reference element the popup will appear. For example, if Top is selected, the popup will be displayed just above the element; if Right is chosen, it will appear to its right, and so on.
• Center will position the popup directly at the center of the placement target.
• Relative aligns the top-left corner of the popup with the top-left corner of the placement target.

🔹 HorizontalOffset and VerticalOffset let you fine-tune the popup’s position by shifting it horizontally or vertically relative to its anchor element.

In other words, they control the amount of space between the popup and the element it’s attached to.

Here’s an example of how it can be implemented:

<telerik:RadTemplatedButton HorizontalOptions="Center" 
	    VerticalOptions="Start" 
	    Content="Show popup" 
	    Clicked="ShowPopup"> 
	    <telerik:RadPopup.Popup> 
	    <telerik:RadPopup x:Name="popup" 
	    Placement="Bottom" 
	    HorizontalOffset="-50" 
	    VerticalOffset="8"> 
	    <telerik:RadBorder WidthRequest="200" 
	    CornerRadius="8" 
	    BackgroundColor="#F9F9F9" 
	    BorderColor="#DFDFDF" 
	    BorderThickness="1" 
	    Padding="12"> 
	    <Label TextColor="Black" 
	    Text="The .NET MAUI Popup supports useful properties, which enable you to position it depending on your requirements." /> 
	    </telerik:RadBorder> 
	    </telerik:RadPopup> 
    </telerik:RadPopup.Popup> 
</telerik:RadTemplatedButton>

Popup Styling

You can also customize the style of this element!

By using the OutsideBackgroundColor property, you can set the outer background color of the popup. By default, it’s set to Color.Transparent.

⚠️ Important: If you use a hexadecimal value, make sure to follow the #AARRGGBB format.

Here’s an example of how to apply it:

<telerik:RadTemplatedButton HorizontalOptions="{OnPlatform Default=Center, MacCatalyst=Start, WinUI=Start}" 
    VerticalOptions="{OnPlatform Default=Center, MacCatalyst=Start, WinUI=Start}" 
    Content="Show customized popup" 
    Clicked="ShowPopup"> 
    <telerik:RadPopup.Popup> 
    <telerik:RadPopup x:Name="popup" 
    VerticalOffset="8" 
    Placement="{OnPlatform Android=Center, iOS=Center}" 
    OutsideBackgroundColor="#267A7BBA"> 
    <telerik:RadBorder BackgroundColor="#F9F9F9" 
    BorderColor="#7A7BBA" 
    BorderThickness="1" 
    CornerRadius="8" 
    WidthRequest="300" 
    Padding="12"> 
    <Label TextColor="Black" 
    Text="Telerik offers a wide range of .NET MAUI controls to enable your cross-platform development of native Windows, macOS, Android and iOS applications." 
    LineBreakMode="WordWrap" /> 
		    </telerik:RadBorder> 
	    </telerik:RadPopup> 
    </telerik:RadPopup.Popup> 
</telerik:RadTemplatedButton>

Conclusion

You’re all set! Now you’re ready to implement the .NET MAUI Popup in your applications. I hope you take full advantage of this powerful control to deliver an amazing user experience! 💚💕

If you have any questions, feel free to drop them in the comments.
See you next time! 🙋‍♀️

References

• https://www.telerik.com/maui-ui/popup

Ready to Get Started?

Telerik UI for .NET MAUI comes with a free 30-day trial, so try out the Popup plus 65+ other native .NET MAUI components for yourself.

Try Now