.NET MAUI Popup Placement
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. ThePlacement
property is of typePlacementMode
and can be set to any of theTop
,Right
,Left
,Bottom
,Center
, orRelative
options where:-
Top
,Right
,Left
, andBottom
align the Popup control to the corresponding corner of the placement target. -
Center
aligns the Popup at the middle of thePlacementTarget
. -
Relative
indicates a position that aligns the top left corner of the Popup with the top left corner of the placement target.
-
HorizontalOffset
andVerticalOffset
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 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 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"
.
<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.