[Solved] Global popup placement.

[Wojtek]

Hey,

So I've found this:

https://www.telerik.com/maui-ui/documentation/knowledge-base/display-popup-irrespective-screen

and I thought I could achieve a snacbkar functionality (for windows) with it following the AppShell guide. It is very promising because it always opens at above current content (be it other popup or regular page) however under no circumstances i was able to place it correctly in the bottom center. I think the default behaviour is that the popup wants to place itself outside of the placement target. which in case of AppShell would be outside of the window but somehow it places itself within it. 

I tried using HorizontalOffset and VerticalOffset and it seems like only horizontaloffest takes effect.

Is there a way to achieve desired placement? Also could i ask for the guidance how you display that popup above all other content?

[Didi]

Hello Wojtek,

The popup displays based on its placement target. If the target is the page, it will be displayed above the content of the page.

Based on the description, you want to achieve a global popup that is positioned on top of all UI elements on the page. Then the placement target should be the page, as described in the kb article you shared. 

Regarding to the bottom position, we have this issue logged: https://feedback.telerik.com/maui/1621349-popup-when-is-attached-to-the-page-the-top-and-bottom-options-of-the-placement-property-do-not-respect-correctly I think the behavior you observe is related to it.

Regarding to the Vertical and Horizontal offset - they apply as expected. So you can set the position of the popup to bottom and set vertical offset to be the height of the page.

Here is an example:

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:telerik="http://schemas.telerik.com/2022/xaml/maui"
             xmlns:local="clr-namespace:MauiApp10"
             x:Name="page"
             x:Class="MauiApp10.MainPage">
    <Grid BackgroundColor="Beige" RowDefinitions="*" x:Name="grid">
        <Grid.GestureRecognizers>
            <TapGestureRecognizer Tapped="TapGestureRecognizer_Tapped" />
        </Grid.GestureRecognizers>
        <telerik:RadPopup.Popup>
            <telerik:RadPopup x:Name="popup"
                              VerticalOffset="{Binding Height, Source={x:Reference page}}" HorizontalOffset="500"
                              Placement="Bottom">
                <telerik:RadBorder WidthRequest="200"
                               CornerRadius="8"
                               BackgroundColor="#F9F9F9"
                               BorderColor="#DFDFDF"
                               BorderThickness="1"
                               Padding="12">
                    <Button TextColor="Black"
                            Clicked="Button_Clicked"
                       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>
    </Grid>
</ContentPage>

public partial class MainPage : ContentPage
{
    public MainPage()
    {
        InitializeComponent();
    }

    private void TapGestureRecognizer_Tapped(object sender, TappedEventArgs e)
    {
        popup.IsOpen = true;   
    }

    private void Button_Clicked(object sender, EventArgs e)
    {
        popup.IsOpen = false;
    }
}

Regards,
Didi
Progress Telerik