How to display content in SfPopup

[John Livermore]

Hi, 

I am learning the SfPopup control in a simple project.  Here is my XAML...

    <ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
                 xmlns:popuplayout="clr-namespace:Syncfusion.XForms.PopupLayout;assembly=Syncfusion.SfPopupLayout.XForms"
                 xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
                 xmlns:local="clr-namespace:SampleApp"
                 x:Class="SampleApp.MainPage">
 
        <StackLayout>
            <Button Text="Show Dialog" Command="{Binding ShowDialog}" />
            <popuplayout:SfPopupLayout IsOpen="{Binding DialogVisible}">
                <popuplayout:SfPopupLayout.Content>
                    <StackLayout>
                        <Label Text="Welcome to Xamarin.Forms!" 
                               HorizontalOptions="Center"
                               VerticalOptions="CenterAndExpand" />
                    StackLayout>
                popuplayout:SfPopupLayout.Content>
            popuplayout:SfPopupLayout>
        StackLayout>
 
    ContentPage>

When this code runs (UWP), I am not seeing the Label inside the .Content area.  Rather, I am seeing a default version of the popup with a single button, etc.  How do I do this so my label shows?

Here is my code in case that's helpful. I use the FreshMVVM and Fody Property Changed packages to reduce code clutter.

https://github.com/JohnLivermore/SampleXamarinApp/tree/sfpopupexample

[Subburaj Pandian Veluchamy]

Hi John, 

  

Thank you for contacting Syncfusion support. 

  

Based on the provided information, we have checked and you need to set the content for the SfPopupLayout.PopupView to display the content. 

 

Please refer the following code for the same, 

  

  

<ContentPage.Content> 

    <popuplayout:SfPopupLayout IsOpen="{Binding DialogVisible}"> 

        

        <popuplayout:SfPopupLayout.PopupView> 

            <popuplayout:PopupView> 

                <popuplayout:PopupView.ContentTemplate> 

                    <DataTemplate> 

                        <StackLayout> 

                            <Label Text="Content can be loaded here..."/> 

                        </StackLayout> 

                    </DataTemplate> 

                </popuplayout:PopupView.ContentTemplate> 

            </popuplayout:PopupView> 

        </popuplayout:SfPopupLayout.PopupView> 

  

        <popuplayout:SfPopupLayout.Content> 

            <StackLayout> 

                <Button Text="Show Dialog" Command="{Binding ShowDialog}" /> 

                <Label Text="Welcome to Xamarin.Forms!" 

                           HorizontalOptions="Center" 

                           VerticalOptions="CenterAndExpand" /> 

            </StackLayout> 

        </popuplayout:SfPopupLayout.Content> 

    </popuplayout:SfPopupLayout> 

</ContentPage.Content> 

  

  

You can refer our User Guide documentation regarding the same, 

 

UG link: https://help.syncfusion.com/xamarin/sfpopuplayout/getting-started?cs-save-lang=1&cs-lang=xaml#load-your-template-view-in-the-popup-body 

 

We have modified the sample based on your requirement and you can download it from the below link. 

 

SampleLink: https://www.syncfusion.com/downloads/support/directtrac/general/ze/SampleXamarinApp497326963 

  

Regards,
Subburaj Pandian V   

[John Livermore]

We are creating a line of business UWP app that needs the ability to show several dialogs from a single ContentPage.  And not at the same time, but multiple dialogs defined, only one shown at a time, and all hosted in the same ContentPage.  See the sample code below for an example of what we are trying to achieve.

Questions...

It appears the page must use popuplayout:SfPopupLayout as the root view on the page.  Is that correct?

If the page can only host a single dialog at a time, is it possible to switch out the contents of the dialog on the page?  How would that be done?

Can you show an example (using my SampleApp code, which uses FreshMVVM) where the page is defined under ContentPage.Content, but it can invoke more than one dialog using the IsOpen command binding?

Can a DataTemplateSelector class help here?  I have tried this as well, but I am not seeing how to specify a DataTemplateSelector for the DataTemplate of the PopupView.ContentTemplate.

Something like this...(for some reason the forum engine is stripping the < character on the tags below.  I am pasting in the code, but when I hit Save it loses the brackets).

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
                xmlns:popuplayout="clr-namespace:Syncfusion.XForms.PopupLayout;assembly=Syncfusion.SfPopupLayout.XForms"
                xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
                xmlns:local="clr-namespace:SampleApp"
                x:Class="SampleApp.MainPage">
    <ContentPage.Content>
        <StackLayout>
            <Button Text="Show Dialog 1" Command="{Binding Dialog1Visible}" />
            <Button Text="Show Dialog 2" Command="{Binding Dialog2Visible}" />
                
            <popuplayout:SfPopupLayout IsOpen="{Binding Dialog1Visible}">
                <popuplayout:SfPopupLayout.PopupView>
                    <popuplayout:PopupView>
                        <popuplayout:PopupView.ContentTemplate>
                            <DataTemplate>
                                <StackLayout>
                                    <Label Text="Dialog 1 Content" />
                                StackLayout>
                            DataTemplate>
                        popuplayout:PopupView.ContentTemplate>
                    popuplayout:PopupView>
                popuplayout:SfPopupLayout.PopupView>
            popuplayout:SfPopupLayout>
 
            <popuplayout:SfPopupLayout IsOpen="{Binding Dialog2Visible}">
                <popuplayout:SfPopupLayout.PopupView>
                    <popuplayout:PopupView>
                        <popuplayout:PopupView.ContentTemplate>
                            <DataTemplate>
                                <StackLayout>
                                    <Label Text="Dialog 2 Content" />
                                StackLayout>
                            DataTemplate>
                        popuplayout:PopupView.ContentTemplate>
                    popuplayout:PopupView>
                popuplayout:SfPopupLayout.PopupView>
            popuplayout:SfPopupLayout>
        StackLayout>
    ContentPage.Content>
ContentPage>

[Subburaj Pandian Veluchamy]

Hi John, 

  

Thank you for the update. 

  

We have checked your query and you can have multiple in one page or you can change the content of the popup view. 

  

Generally, you can define the SfPopupLayout in a two ways in your application. 

  

·       You can have the SfPopupLayout as root view of the page. By setting SfPopupLayout as root view of the page you can change the content of the popup view. You need not to have additional SfPopupLayout in that page. 

  

Refer the following sample which as SfPopupLayout as root view of the page but PopupView changes its content. 

 

SampleLink: https://www.syncfusion.com/downloads/support/directtrac/general/ze/SampleXamarinApp-1220791970 

  

You can refer our User Guide documentation regarding the same,  

 

UG link: https://help.syncfusion.com/xamarin/sfpopuplayout/getting-started#displaying-popup-when-the-sfpopuplayout-is-set-as-root-view 

  

·       You can display the popup without setting it as root view of the page, which means it has no parent and displaying the popup on the go. 

  

Refer the following sample which as multiple instances of SfPopupLayout has been created that display different content. 

 

SampleLink: https://www.syncfusion.com/downloads/support/directtrac/general/ze/SampleXamarinApp1325802400 

  

You can refer our User Guide documentation regarding the same,  

 

UG link: https://help.syncfusion.com/xamarin/sfpopuplayout/getting-started#displaying-popup-on-the-go 

  

Regards,
Subburaj Pandian V