.NET MAUI Popup: Animation and Custom Appearance
- 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:
<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>