How to add a sfpopuplayout to an existing xamarin forms page

[Will Autio]

I have an existing complex Xamarin Forms app. On one of the existing complex pages I would like to have the option to tap a button to display a listview plus a couple of labels in a Popup.

What would really help me is a sample where an existing page, call it AddressView had a button that when clicked would show the people's names that live at that address in an SfpopupLayout. Note: this is just a sample description of what I am looking for. If you already have something where the Xamarin Page has some meat to it and it can call up a popup - that would do well.

I've tried to decipher what to do from the Sf docs, but to no avail.

Thanks for looking at this.

Regards,

Will

[Karthikraja Kalaimani]

Hi Will Autio,  

Thank you for contacting Syncfusion support. 

We have prepared sample for your requirement. In that sample, we implemented SfPopupLayout in a page and shown the PopupView on Button click of that same page. And by using the Binding Context concept we shown a text on PopupView. For more details, please refer to the below code snippets and attached sample. 

Code snippets :  

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

<ContentView xmlns="http://xamarin.com/schemas/2014/forms" 

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

             xmlns:sfPopup="clr-namespace:Syncfusion.XForms.PopupLayout;assembly=Syncfusion.SfPopupLayout.XForms" 

             x:Class="Popup_Demo.PopupPage"> 

  <ContentView.Content> 

        <sfPopup:SfPopupLayout x:Name="NewsPopup"> 

            <sfPopup:SfPopupLayout.PopupView> 

                <sfPopup:PopupView  ShowFooter="False" ShowHeader="False" AnimationMode="None"> 

                    <sfPopup:PopupView.ContentTemplate> 

  

                        <DataTemplate x:Name="dataTemplate"> 

  

                            <StackLayout x:Name="stkDialog" Margin="1" Orientation="Vertical" VerticalOptions="FillAndExpand" HorizontalOptions="Center" IsVisible="True"> 

  

                                <StackLayout x:Name="stkDialogOuter" BackgroundColor="#ebf0f9" Margin="1" Padding="10"> 

  

                                    <Label x:Name="lblDialogTitle" Text="{Binding strTitle}"/> 

  

                                    <StackLayout x:Name="stkDialogInner" VerticalOptions="EndAndExpand" Margin="10"> 

  

                                        <Label x:Name="lblMessage"  Text="{Binding strMessage}" /> 

  

                                    </StackLayout> 

  

                                </StackLayout> 

  

                            </StackLayout> 

  

                        </DataTemplate> 

  

                    </sfPopup:PopupView.ContentTemplate> 

                </sfPopup:PopupView> 

            </sfPopup:SfPopupLayout.PopupView> 

  

        </sfPopup:SfPopupLayout> 

    </ContentView.Content> 

</ContentView>
...

<ContentPage xmlns:ios="clr-namespace:Xamarin.Forms.PlatformConfiguration.iOSSpecific;assembly=Xamarin.Forms.Core" 

    ios:Page.UseSafeArea="True" xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" xmlns:sfPopup="clr-namespace:Syncfusion.XForms.PopupLayout;assembly=Syncfusion.SfPopupLayout.XForms" xmlns:local="clr-namespace:Popup_Demo" x:Class="Popup_Demo.MyPage"> 

    <ContentPage.BindingContext> 

        <local:ViewModel x:Name="viewModel"></local:ViewModel> 

    </ContentPage.BindingContext> 

    <ContentPage.Content> 

        <StackLayout Orientation="Vertical"> 

            <local:PopupPage x:Name="sfpopup"></local:PopupPage> 

            <Button BackgroundColor="Orange" Clicked="Button_Clicked_1" Text="ClickToShowPopup"></Button> 

        </StackLayout> 

    </ContentPage.Content> 

</ContentPage>

.......

 public partial class MyPage : ContentPage 

    { 

        

        public MyPage() 

        { 

            InitializeComponent(); 

          

        } 

  

        void Button_Clicked_1(System.Object sender, System.EventArgs e) 

        { 

            viewModel.strMessage = "Popup message"; 

            viewModel.strTitle = "Popup Title"; 

            (sfpopup.Content as SfPopupLayout).Show(); 

        } 

    } 

Sample link : https://www.syncfusion.com/downloads/support/directtrac/general/ze/Popup_Demo374900919.zip


Regards,
Karthik Raja 

[Will Autio]

Hello  Karthik Raja 

Thanks for the sample code. That helped me to apply it in our setting.

Best Regards,

Will

[Karthikraja Kalaimani]

Hi Will Autio,

Thanks for the udpate. 

We glad to know that the previously provided solution has meets your requirement. Please let us know if you need further assistance from us. 

Regards,
Karthik Raja