.NET MAUI Popup: Animation and Custom Appearance

• Jul 25, 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 the DXPopup opens and closes with a fade animation effect. This is a bindable property.

AnimationDuration

Gets or sets the duration of the show/close animation. 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 the DXPopup‘s shadow is visible. This is a bindable property.

ShadowHorizontalOffset

Get or sets the horizontal offset of the DXPopup‘s shadow. This is a bindable property.

ShadowVerticalOffset

Get or sets the vertical offset of the DXPopup‘s shadow. This is a bindable property.

ShadowColor

Gets or sets the color of the DXPopup‘s shadow. This is a bindable property.

ShadowRadius

Gets or sets the blur radius of the DXPopup‘s shadow. 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 the DXPopup uses a scrim as a modal window. This is a bindable property.

ScrimColor

Gets or sets the scrim color and transparency. 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>