.NET MAUI Popup: Animation and Custom Appearance

• Oct 01, 2024
• 2 minutes to read

This topic lists DXPopup APIs that allow you to customize popup appearance and animation effects.

Popup Animation

Use the following properties to enable fade in/out animation effects in a DXPopup component:

AllowAnimation

Gets or sets whether to show and hide the pop-up view with animation effects. This is a bindable property.

AnimationDuration

Gets or sets the animation’s duration. This is a bindable property.

Popup Custom Appearance

Rounded Corners

Use the CornerRadius property to adjust the popup’s shape.

Shadow Settings

Use the following properties to display a shadow and change its appearance:

AllowShadow

Gets or sets whether to display the shadow around the pop-up view. This is a bindable property.

ShadowHorizontalOffset

Get or sets the horizontal offset of the shadow around the pop-up view. This is a bindable property.

ShadowVerticalOffset

Gets or sets the vertical offset of the shadow around the pop-up view. This is a bindable property.

ShadowColor

Gets or sets the shadow color around the pop-up view. This is a bindable property.

ShadowRadius

Gets or sets the blur radius of the shadow around the pop-up view. This is a bindable property.

Scrim Settings

Use a scrim effect to bring user attention to the popup and indicate that the rest of the app/container is unavailable.

AllowScrim

Gets or sets whether to show the scrim that blocks interaction with other UI elements outside the pop-up view. This is a bindable property.

ScrimColor

Gets or sets the scrim color. This is a bindable property.

Appearance Customization Example

The example below shows how to customize DXPopup appearance:

XAML

<ContentPage ...
    xmlns:dxc="clr-namespace:DevExpress.Maui.Controls;assembly=DevExpress.Maui.Controls">
    <dxc:DXPopup ...
                AllowScrim="True" 
                AllowShadow="True"

                ScrimColor="#D3D3D3"
                ShadowColor="Gray"

                CornerRadius="15"
                ShadowRadius="15"

                ShadowHorizontalOffset="20"
                ShadowVerticalOffset="20"

                VerticalAlignment="Center"
                HorizontalAlignment="Stretch"

                Margin="20">
        ...
    </dxc:DXPopup>
</ContentPage>