ContextQMD
Back to Devexpress

.NET MAUI Popup: Animation and Custom Appearance

maui-404813-dialogs-menu-and-navigation-popup-custom-appearance.md

latest3.2 KB
Original Source

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

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

AllowAnimationGets or sets whether to show and hide the pop-up view with animation effects. This is a bindable property.AnimationDurationGets or sets the animation’s duration. This is a bindable property.

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:

AllowShadowGets or sets whether to display the shadow around the pop-up view. This is a bindable property.ShadowHorizontalOffsetGet or sets the horizontal offset of the shadow around the pop-up view. This is a bindable property.ShadowVerticalOffsetGets or sets the vertical offset of the shadow around the pop-up view. This is a bindable property.ShadowColorGets or sets the shadow color around the pop-up view. This is a bindable property.ShadowRadiusGets 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.

AllowScrimGets or sets whether to show the scrim that blocks interaction with other UI elements outside the pop-up view. This is a bindable property.ScrimColorGets 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>