.NET MAUI : Creating Customized Popups with Mopups

Popups are a powerful UI element to engage users with important information, actions, or requests. While the .NET MAUI CommunityToolkit offers simple popup functionality, sometimes you may need more customization and control over your popups. In this tutorial, we will explore how to implement custom popups using the Mopups library in .NET MAUI.


  • A basic understanding of XAML and C#.

Install NuGet Package

Open your .NET MAUI project and install the “Mopups” NuGet package by LuckyDucko.

Initialize Mopups

In your MauiProgram.cs file, within the CreateMauiAppBuilder method, call .ConfigureMopups() on the host builder to initialize the Mopups library:

using Mopups;
// ...

public static MauiApp CreateMauiAppBuilder()
    var builder = MauiApp.CreateBuilder();
    // Other configurations
    return builder.Build();

Create a Custom PopupPage

Add a new ContentPage to your project and modify the base class of the XAML file to PopupPage. Add the necessary namespace declaration for the Mopups.Pages namespace:

<?xml version="1.0" encoding="utf-8" ?>
<pages:PopupPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    <!-- Your custom popup content here -->

Create and Display the Popup

In your code-behind or ViewModel, you can use the MopupService to create and display your custom popup:

using Mopups.Services;
// ...

private async Task ShowCustomPopupAsync()
    await MopupService.Instance.PushAsync(new CustomPopupPage());

Tip: Adding Background Overlay

To create a partially opaque background that covers the content underneath the popup, you can set the BackgroundColor property of your PopupPage to a HEX color with transparency, like “#99272727”:

<pages:PopupPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    <!-- Your custom popup content here -->


The Mopups library offers a robust solution for creating customized popups in .NET MAUI applications. With the ability to fully customize the layout and presentation of your popups, Mopups provides the flexibility needed to create engaging user experiences. By following this tutorial, you can easily integrate Mopups into your .NET MAUI projects and leverage its features to create unique and interactive popups for your users.

.NET MAUI: iOS ListView disappearing cells

In this article, we will delve into a persistent .NET MAUI issue affecting ListViews on the iOS platform in .NET 7 builds. While the .NET 8 preview has addressed this issue, developers seeking a solution can employ the BindableLayout as a temporary workaround. We’ll also explore the concept of BindableLayout and touch on the CachingStrategy within ListViews.

The Problem: Disappearing Cells in ListViews on iOS

The issue at hand revolves around the behavior of ListViews on the iOS platform in .NET 7 builds. As users scroll through the list elements, the ListView cells mysteriously disappear, causing a jarring experience. While the .NET 8 preview has resolved this vexing problem, the official release is still pending, leaving developers seeking immediate solutions.

The Workaround: BindableLayout within ScrollView

A viable workaround to mitigate the disappearing cell issue involves utilizing the BindableLayout within a ScrollView. The BindableLayout.ItemSource property can be harnessed to mimic the ListView’s behavior. However, it’s crucial to acknowledge that this solution might not deliver the same performance as a native ListView.

Example Code

Here’s how you can implement the BindableLayout workaround:

            <x:Array Type="{x:Type local:ItemModel}">
                <local:ItemModel Name="Item 1" />
                <local:ItemModel Name="Item 2" />
                <local:ItemModel Name="Item 3" />
                <!-- Add more items here -->
                <Label Text="{Binding Name}" />

BindableLayout: A Glimpse

BindableLayout is a versatile feature within the .NET MAUI framework that allows developers to easily bind collections to layout controls. It’s an excellent alternative when dealing with scenarios where a native ListView isn’t performing optimally or in cases like the aforementioned issue. BindableLayout empowers developers to achieve the desired UI layout while maintaining data synchronization.

Use BindableLayout when you want more control over the layout of your items, need to create a dynamic UI with varying layouts, and don’t necessarily require built-in performance optimizations.

Understanding CachingStrategy within ListViews

ListViews in .NET MAUI come with a property known as CachingStrategy. This property determines how the ListView should cache its visual elements, significantly influencing performance. There are three options:

  1. RecycleElement: This strategy reuses existing cells, enhancing memory usage and rendering speed. However, it might pose issues when complex cell layouts are used.
  2. RetainElement: This strategy preserves cells for the duration of the ListView’s existence. While memory consumption can be higher, it can be useful for more intricate cell layouts.
  3. None: In this strategy, no caching is employed, causing cells to be created and destroyed frequently. While it minimizes memory usage, it can have an adverse impact on performance.


While the .NET MAUI framework continues to evolve, issues like the disappearing ListView cells on iOS in .NET 7 builds are inevitable. Developers eagerly anticipate the benefits that .NET 8 will bring, including the resolution of this particular problem. In the interim, the BindableLayout within a ScrollView offers a workaround that replicates the ListView’s behavior, albeit with potential performance differences. By understanding concepts like BindableLayout and the CachingStrategy within ListViews, developers can navigate these challenges while continuing to create engaging and efficient cross-platform applications. Stay tuned for the official .NET 8 release and more innovations that will undoubtedly enhance the .NET MAUI experience.


.NET MAUI: Label issue, Overflowing Texts in StackLayouts

In this blog post, we will explore a known issue affecting the Label UserControl in .NET MAUI when used within a StackLayout. We will explain how this problem manifests and the temporary solution proposed by the Microsoft team.

The Issue

The problem arises when using the Label UserControl inside a StackLayout UserControl. Despite setting the parent UserControl’s width and height, the Label does not respect these dimensions and overflows its content. This can lead to visual glitches and unintended behavior in the application’s user interface.

Reproducing the Issue

To replicate the issue, follow these steps:

  1. Add a Grid with a column width of *
  2. Add a StackLayout as the only child of the Grid
  3. Add a background color to the StackLayout for better visibility of the issue
  4. Add a Label with content that exceeds the available width and can’t fit on a single line.

For example

        <ColumnDefinition Width="*" />

    <StackLayout BackgroundColor="LightGray">
        <Label Text="This is a very long text that will overflow the StackLayout width." />

The Proposed Solution

While the Microsoft team is actively working on addressing this issue, a temporary solution is available to mitigate the problem. By setting the IsClippedToBounds parameter of the StackLayout to true, we can prevent the Label from overflowing its parent’s boundaries.

What does IsClippedToBounds do?

IsClippedToBounds is a property of the StackLayout that determines whether its children should be clipped to fit within the bounds of the parent container. When this property is set to true, any content that extends beyond the StackLayout’s boundaries will be clipped and hidden, ensuring that it does not visually overflow the container.

A tiny disadvantage

While setting the IsClippedToBounds property can help mitigate the issue of overflowing content in a StackLayout, it comes with its own set of limitations. One significant drawback is that it restricts the control from growing both horizontally and vertically within the parent container.

Implementation of the Temporary Solution

To apply the temporary solution to our issue, we simply need to add the IsClippedToBounds="True" attribute to the StackLayout:

        <ColumnDefinition Width="*" />

    <StackLayout BackgroundColor="LightGray" IsClippedToBounds="True">
        <Label Text="This is a very long text that will overflow the StackLayout width." />


The .NET MAUI Label UserControl issue affecting StackLayout is an acknowledged problem by the Microsoft team. While a permanent fix is being developed, we can use the IsClippedToBounds property as a temporary solution to prevent the Label from overflowing its parent’s boundaries. Keep an eye on future updates from Microsoft to stay informed about the resolution of this issue and any other improvements they bring to the .NET MAUI framework. Happy coding!


.NET MAUI: Android Bug – Map’s MoveToRegion Method Not Updating Visible Region

In the realm of software development, encountering bugs is an inevitable part of the process. In this blog post, we will delve into a bug specific to the Android platform in .NET MAUI applications. This bug affects the Map control, where the MoveToRegion method fails to update the visible region under certain circumstances. We will explore the symptoms of this bug and present a workaround that involves creating a custom child class of the Map control and overriding the OnPropertyChanged method of the IsVisible property.


The bug we are addressing pertains to the Map control in .NET MAUI applications on the Android platform. In some cases, the MoveToRegion method fails to modify the visible region of the map, resulting in the region staying the same despite the attempted change. This issue can lead to inconsistencies in map display and user experience.


To overcome this bug, we can implement a workaround that involves creating a custom child class of the Map control and overriding the OnPropertyChanged method of the IsVisible property. By introducing a small delay and invoking the MoveToRegion method on the UI thread, we can ensure that the visible region updates correctly.

Begin by creating a new class that derives from the Map control. This class will serve as a custom child class that incorporates the necessary workaround logic.

public class CustomMap : Map
    protected override void OnPropertyChanged([CallerMemberName] string propertyName = null)

        if (propertyName == nameof(IsVisible))
            if (IsVisible)
                Task.Run(async () =>
                    // Introduce a small delay before invoking MoveToRegion
                    await Task.Delay(1500);

                    Device.BeginInvokeOnMainThread(() =>

Replace the Map control instances in your .NET MAUI application with instances of the newly created CustomMap control. This ensures that the workaround logic is applied.

<ContentPage ...
    <local:CustomMap ... />

The bug affecting the Map control on the Android platform in .NET MAUI applications, where the MoveToRegion method fails to update the visible region, can be frustrating for developers and users alike. However, by implementing the workaround provided in this blog post, which involves creating a custom child class of the Map control and overriding the OnPropertyChanged method of the IsVisible property, you can ensure that the visible region updates as intended.

It’s important to note that while this workaround provides a solution to the bug, it’s advisable to keep track of official .NET MAUI updates and bug resolutions. Check for any fixes or enhancements provided by the .NET MAUI team, as they may address this bug in future releases.


This content has 6 months. Some of the information in this post may be out of date or no longer work. Please, read this page keeping its age in your mind.

.NET MAUI iOS Bug – Release Mode Bindings Not Working

Software bugs can sometimes manifest in specific environments or platforms, leading to unexpected behavior. In this blog post, we will discuss a bug in .NET MAUI specifically affecting iOS platforms. The bug causes bindings between Views and ViewModels to fail in Release mode, resulting in empty Views without the expected data. We’ll explore the symptoms of this bug and present a workaround that involves utilizing the XamlCompilation attribute with the Skip option.


The bug we are addressing affects the binding functionality in .NET MAUI apps running on iOS platforms in Release mode. When encountering this issue, Views fail to bind with their associated ViewModels, resulting in empty Views that appear as if no BindingContext is present.

What is XamlCompilation?

XamlCompilation is an attribute provided by Xamarin.Forms that allows developers to specify how XAML files should be compiled. It offers three options: None, XamlC, and Skip.

  • None: The default option. XAML files are not compiled individually and are interpreted at runtime.
  • XamlC: XAML files are compiled ahead-of-time into IL code, improving performance by eliminating the need for runtime interpretation.
  • Skip: XAML files are skipped from the compilation process and are interpreted at runtime, similar to the None option.

Providing workaround

To mitigate this bug, we can utilize the XamlCompilation attribute with the Skip option on the affected Views. This attribute is used to control the compilation behavior of XAML files in .NET MAUI applications.

Identify the Affected View First, identify the View(s) in your .NET MAUI app that are experiencing the binding issue specifically on iOS platforms in Release mode. Add XamlCompilation Attribute Add the XamlCompilation attribute to the affected View’s code-behind file. Set the attribute value to Skip to instruct the compiler to exclude the associated XAML file from the compilation process.

public partial class MyAffectedView : ContentView
    // ...

Ensure that the affected View is properly updated with the XamlCompilation attribute. Test the application in Release mode on iOS to confirm that the bindings are now functioning as expected and the Views are populated with the appropriate data.

Keep in mind that while this workaround provides a solution for the bug, it’s important to regularly check for updates from the .NET MAUI team, as they may address and fix this issue in future releases. Additionally, test your app thoroughly after applying the workaround to ensure the expected functionality and behavior across different platforms.

This content has 6 months. Some of the information in this post may be out of date or no longer work. Please, read this page keeping its age in your mind.