.NET MAUI Popup Placement

Updated over 6 months ago

The .NET MAUI Popup supports useful properties, which enable you to position it depending on your requirements.

• PlacementTarget—Defines an element in relation to which the popup is positioned when opened.

• Placement—Specifies the way the popup aligns to its placement target. The Placement property is of type PlacementMode and can be set to any of the Top, Right, Left, Bottom, Center, or Relative options where:

  • Top, Right, Left, and Bottom align the Popup control to the corresponding corner of the placement target.
  • Center aligns the Popup at the middle of the PlacementTarget.
  • Relative indicates a position that aligns the top left corner of the Popup with the top left corner of the placement target.

• HorizontalOffset and VerticalOffset specify the horizontal or vertical distance between the placement target and the alignment point.

In the following XAML example, the Popup is defined inline through the attached RadPopup.Popup property that is applied to the RadTemplatedButton control, so that the PlacementTarget for the Popup is the RadTemplatedButton. If you create the Popup with code, you have to explicitly set the PlacementTarget property.

When the Popup is declared in XAML and you want to center it, attach it to the Page element and set its Placement property to "Center".

xaml

<telerik:RadTemplatedButton HorizontalOptions="Center"
                            VerticalOptions="Start"
                            Content="Show popup"
                            Clicked="ShowPopup">
    <telerik:RadPopup.Popup>
        <telerik:RadPopup x:Name="popup"
                          Placement="Bottom"
                          HorizontalOffset="-50"
                          VerticalOffset="8">
            <telerik:RadBorder WidthRequest="200"
                               CornerRadius="8"
                               BackgroundColor="#F9F9F9"
                               BorderColor="#DFDFDF"
                               BorderThickness="1"
                               Padding="12">
                <Label TextColor="Black"
                       Text="The .NET MAUI Popup supports useful properties, which enable you to position it depending on your requirements." />
            </telerik:RadBorder>
        </telerik:RadPopup>
    </telerik:RadPopup.Popup>
</telerik:RadTemplatedButton>

Set the RadTemplatedButton'Clicked event handler:

c#

private void ShowPopup(object sender, EventArgs e) => popup.IsOpen = true;

The following image shows the end result.

See Also

• Getting Started with Telerik UI for .NET MAUI Popup