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. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to display content in SfPopup

Thread ID:

Created:

Updated:

Platform:

Replies:

145745 Jul 5,2019 10:19 PM UTC Jul 9,2019 07:31 AM UTC Xamarin.Forms 3
loading
Tags: SfPopup
John Livermore
Asked On July 5, 2019 10:20 PM UTC

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.


Subburaj Pandian Veluchamy [Syncfusion]
Replied On July 8, 2019 08:56 AM UTC

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, 
 
 
We have modified the sample based on your requirement and you can download it from the below link. 
 
  
Regards,
Subburaj Pandian V   


John Livermore
Replied On July 8, 2019 03:50 PM UTC

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 [Syncfusion]
Replied On July 9, 2019 07:31 AM UTC

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. 
 
  
You can refer our User Guide documentation regarding the same,  
 
  
·       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. 
 
  
You can refer our User Guide documentation regarding the same,  
 
  
Regards,
Subburaj Pandian V     


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon