Use the same Popup for multiple pages

[Davi Fabiano]

Hi!

Is there a way to use the same popup to be used on other pages? 

I thought of passing the title and message as parameters and calling the popup on any page

Tks.

[Suja Venkatesan]

Hi Davi,

You can achieve your requirement by creating SfPopupLayout as a page, and creating a new XAML file with SfPopupLayout in it. You can use this XAML file instance (SfPopupLayout view), across any file in your project wherever you may want to display a popup, as in the below code snippet.

Code Snippet:

//PopupPage.XAML

<?xml version="1.0" encoding="utf-8" ?>

<sfPopup:SfPopup xmlns=http://schemas.microsoft.com/dotnet/2021/maui

                 xmlns:x=http://schemas.microsoft.com/winfx/2009/xaml

                 x:Class="GettingStarted.PopupPage"

                 xmlns:sfPopup="clr-namespace:Syncfusion.Maui.Popup;assembly=Syncfusion.Maui.Popup"

                 x:Name="sfPopup">

  

    <sfPopup:SfPopup.HeaderTemplate>

        <DataTemplate>

            <StackLayout>

                <Label Text="{Binding LabelString}" HorizontalTextAlignment="Center"/>

            </StackLayout>

        </DataTemplate>

    </sfPopup:SfPopup.HeaderTemplate>

 

    <sfPopup:SfPopup.ContentTemplate>

        <DataTemplate>

            <StackLayout>

                <Label Text="{Binding Content}" VerticalOptions="Center"/>

            </StackLayout>

        </DataTemplate>

    </sfPopup:SfPopup.ContentTemplate>

</sfPopup:SfPopup>

//PopupPage.XAML.cs

public partial class PopupPage : SfPopup

{

    string Text;

    string content;

    public string LabelString

    {

        get { return Text; ; }

       set

        {

            Text = value;

        }

    }

    public string Content

    {

        get { return content; }

        set

        {

            content = value;

           

        }

    }

    public PopupPage(string header,string content)

    {

        Text = header;

        Content = content;

        this.BindingContext = this;

       InitializeComponent();

    }

}

//MainPage.XAML.cs

private void ClickToShowPopup_Clicked(object sender, EventArgs e)

       {

        PopupPage popup = new PopupPage("Headertest","TestContent");

        popup.Show();

       }

For your reference, we have attached a sample based on your requirement. Please let us know if you need any further assistance.

Regards,

Suja

Attachment: GettingStarted_a43d72c3.zip

[Davi Fabiano]

Hi!

I need help!

How do I call the popup and wait for the return of a value (example: textbox - email)?

[Diwakar Venkatesan]

Hi Davi,

To meet this requirement, you can utilize the data binding concept. In the given example, store the necessary fields in the ViewModel and connect them to their corresponding UI elements (such as Entry and Label) using data binding. Afterwards, you can easily read and modify the values of these fields within the SfPopup.AcceptButtonCommand method, which is also located in the ViewModel.

Please refer the attached code snippet and sample.

        this.ShowFooter = true;

        this.AcceptButtonText = "OK";

        this.AppearanceMode = PopupButtonAppearanceMode.OneButton;

        this.SetBinding(SfPopup.AcceptCommandProperty, new Binding("OkCommand", BindingMode.TwoWay));

Attachment: GettingStarted_76d3c57.zip

[Davi Fabiano]

Hi!

I thought of something like the .NET MAUI Community Toolkit:

        PopupPage popup = new PopupPage("Headertest","TestContent");
        //Wait for the user to click the "ok" button
        var result = await popup.Show();
        //Check the return value
        if (result is bool boolResult)
        {
             if (boolResult)
             {
                 // Yes was tapped
             }
             else
             {
                 // was tapped
             }
         }

[Diwakar Venkatesan]

Davi,

Currently, .NET MAUI SfPopup does not have the support to return the result from Show method. We require some time to analyze the requirements and feasibility to implement this support. So, we will update the further details on or before April 11,2023.

[Diwakar Venkatesan]

We have logged feature request for your requirement “support to display the popup asynchronously”.
We will implement this feature in any of our upcoming release. When planning each release cycle, we review all open feature requests and prioritize them based on factors such as our product vision, technological feasibility, and customer interest. We will keep you updated on the status of this feature. You can also communicate with us regarding the open features any time using our Feature Report page.

Feedback link - https://www.syncfusion.com/feedback/42705/support-to-show-the-popup-asynchronously

If you have any more specification/suggestions to the feature request, you can add it as a comment in the portal and cast your vote to make it count.

[Mark Hodgkinson]

I have followed the suggestion above, and it works well.

However, the popup always appears top left of the device.

Is there a way to alter the display position of the popup, perhaps to the middle of the screen, or to the bottom but horizontally central?

Thanks

[Diwakar Venkatesan]

Hi Mark Hodgkinson,

We are apologize for the delayed response. You can able to show the popup in different position. Please refer the UG documentation below,

UG link - Popup Positioning in .NET MAUI Popup control | Syncfusion

Regards,
Diwakar. V