.NET MAUI Popup Styling

The OutsideBackgroundColor property of the .NET MAUI Popup lets you customize the color outside the element.

In most cases, this feature is used for modal popups to indicate that the user cannot interact with the UI behind. The default value is Color.Transparent.

You can apply the transparency of the overlay through the alpha channel of the chosen color. If you're using a hexadecimal code, its format has to be #AARRGGBB, where the first pair of letters, the AA, represents the alpha channel.

Below is an example on how to apply OutsideBackgroundColor to a modal popup.

• XAML

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

Set the needed event handlers that are used to show or hide the popup:

• C#

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

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

The following image shows a Popup with an applied overlay color: