We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Use the same Popup for multiple pages

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.


8 Replies 1 reply marked as answer

SV Suja Venkatesan Syncfusion Team March 31, 2023 01:03 PM UTC

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

Marked as answer

DF Davi Fabiano April 4, 2023 08:22 PM UTC

Hi!


I need help!

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




DV Diwakar Venkatesan Syncfusion Team April 5, 2023 01:07 PM UTC

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


DF Davi Fabiano replied to Diwakar Venkatesan April 5, 2023 05:38 PM UTC

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
             }
         }


DV Diwakar Venkatesan Syncfusion Team April 6, 2023 12:26 PM UTC

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.



DV Diwakar Venkatesan Syncfusion Team April 11, 2023 12:08 PM UTC

We have logged feature request for your requirementsupport 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.



MH Mark Hodgkinson May 23, 2023 04:21 PM UTC

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



DV Diwakar Venkatesan Syncfusion Team May 25, 2023 09:36 AM UTC

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


Loader.
Live Chat Icon For mobile
Up arrow icon