The 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 it is open.
Placement—Specifies the way the popup aligns to its placement target. The
Placementproperty is of type
PlacementModeand can be set to any of the
Bottomalign the Popup control to the corresponding corner of the placement target.
Centeraligns the Popup at the middle of the
Relativeindicates a position that aligns the top left corner of the Popup with the top left corner of the placement target.
VerticalOffsetspecify 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 Button control, so that the Button is considered a
PlacementTarget for the Popup. If you create the Popup with code, you have to explicitly set the
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
<Button HorizontalOptions="Center" VerticalOptions="Start" BackgroundColor="#7A9BFF" TextColor="White" Text="Show popup" Clicked="ShowPopup" x:Name="button"> <telerik:RadPopup.Popup> <telerik:RadPopup x:Name="popup" Placement="Bottom" HorizontalOffset="20" VerticalOffset="20"> <telerik:RadBorder WidthRequest="200" HeightRequest="210" CornerRadius="6" BackgroundColor="#93D7FF" BorderColor="#7A9BFF" BorderThickness="1" Padding="10"> <Label Text="With Telerik Popup for .NET MAUI you could easily add modal popups to your application in order to draw attention to important information or receive user input." /> </telerik:RadBorder> </telerik:RadPopup> </telerik:RadPopup.Popup> </Button>
Set the Button
Clicked event handler:
The following image shows the end result.