.NET MAUI DevExpress Popup Positioning

• Mar 06, 2024
• 3 minutes to read

You can attach a popup to any view on the screen or show a popup as a modal window. You can also position a popup relative to its target view or specify its alignment on the screen.

Relative Popup Position

If you want to position a popup relative to a view (a View class descendant), set the PlacementTarget property to that view.

If you use the PlacementTarget property, the DXPopup is displayed without its scrim. In this case, AllowScrim and ScrimColor properties have no effect.

The following example shows how to position a popup relative to a button:

XAML

<Button x:Name="button" Text="Tap to display a Popup view"/>

<dxco:DXPopup PlacementTarget="{x:Reference button}">
    <StackLayout WidthRequest="200">
        <Label Text="This is the DevExpress .NET MAUI Popup component." 
               Margin="10, 10"/>
    </StackLayout>
</dxco:DXPopup>

Note

The Margin property of the DXPopup element applies to the target element specified by the PlacementTarget property.

If you do not specify the popup placement explicitly, it is attached to the bottom edge of the target view and opened from top to bottom (as shown in the example above). Use the Placement property to specify the direction in which the popup should open.

The following markup opens the popup to the right of the target control:

XAML

<dxco:DXPopup x:Name="popup" PlacementTarget="{x:Reference button}" Placement="Right">
    <!--...-->
</dxco:DXPopup>

Alignment

Use HorizontalAlignment and VerticalAlignment properties to specify how to align the popup relative to the target view.

Vertical Alignment

Horizontal Alignment

If you set the HorizontalAlignment property to Stretch, the popup width aligns with the width of the target view.

Absolute Popup Position

If you do not specify the PlacementTarget property explicitly, the popup is displayed as a modal window. When a user taps outside the popup’s boundaries, the popup closes.

XAML

<dxco:DXPopup>
    <StackLayout WidthRequest="200">
        <Label Text="This is the DevExpress .NET MAUI Popup component displayed as a dialog. 
                     Tap outside the popup to hide it." 
               Margin="10, 10"/>
    </StackLayout>
</dxco:DXPopup>

Alignment

If you want to horizontally and vertically align a modal popup within the screen, use HorizontalAlignment and VerticalAlignment properties.

Vertical Alignment

Horizontal Alignment

Scrim

You can display a popup as a modal window with the scrim that disables the rest of the UI until the popup is closed. To activate the popup scrim, enable the AllowScrim property.

You can also apply an overlay color (transparent, if required) outside the popup to indicate that a user must interact with the dialog in order to return to the underlying UI. Use the ScrimColor property to customize the scrim color and transparency.

This example shows how to specify the scrim to block interaction with the rest of the UI until a user taps the button within the Popup to close it.

XAML

<dxco:DXPopup x:Name="popup" 
              AllowScrim="True"
              ScrimColor="#b3adb9ce">
    <StackLayout WidthRequest="200">
        <Label Text="This is the DevExpress .NET MAUI Popup component displayed as a dialog. 
         Tap outside the popup to hide it." Margin="10, 10"/>
        <Button Text="Close the Popup" Clicked="ClosePopup_Clicked" 
                BackgroundColor="Transparent" TextColor="#343434"></Button>
    </StackLayout>
</dxco:DXPopup>

C#

void ClosePopup_Clicked(System.Object sender, System.EventArgs e) {
    popup.IsOpen = false;
}