How to make SfPopup reusable?

[Josh Phan]

Hello, I checked the documentation about reusable SfPopup, but that popup didn't have any command binding. I'm trying to create a menu popup layout that will be used in multiple pages. Could you please help me how to create a reusable Sfpopup with command binding? Thank you.

Here is my popup:

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

            <sfPopup:SfPopupLayout.PopupView>

                <sfPopup:PopupView

                                ShowCloseButton="False"

                                ShowFooter="False"

                                ShowHeader="False"

                                HorizontalOptions="StartAndExpand" AnimationMode="SlideOnLeft">

                    <sfPopup:PopupView.PopupStyle>

                        <sfPopup:PopupStyle

                                        HasShadow="False" BorderThickness="0"

                                        OverlayColor="Transparent"

                                        OverlayOpacity="0.5"/>

                    </sfPopup:PopupView.PopupStyle>

                    <sfPopup:PopupView.ContentTemplate>

                        <DataTemplate>

                            <Frame Style="{DynamicResource MenuPopupStyle}" >

                                <StackLayout Padding="0" HorizontalOptions="FillAndExpand" VerticalOptions="StartAndExpand" Spacing="30">

                                    <StackLayout Orientation="Horizontal" HorizontalOptions="FillAndExpand" Margin="0,10,10,0">

                                        <Image Source="icon.png" Aspect="AspectFit" WidthRequest="124" HeightRequest="30" HorizontalOptions="StartAndExpand"/>

                                        <ImageButton Source="menu_icon.png" Aspect="AspectFit" HorizontalOptions="EndAndExpand" WidthRequest="25" HeightRequest="25" Command="{Binding CloseMenuCommand}"/>

                                    </StackLayout>

                                    <StackLayout Spacing="30" Margin="0,25,0,0">

                                        <StackLayout Orientation="Horizontal" Spacing="10" HorizontalOptions="StartAndExpand">

                                            <StackLayout.GestureRecognizers>

                                                <TapGestureRecognizer Command="{Binding MenuHomeCommand}"/>

                                            </StackLayout.GestureRecognizers>

                                            <Image Source="homeMenu.png" Aspect="AspectFit" />

                                            <Label Text="Home" TextColor="White" FontSize="Micro"/>

                                        </StackLayout>

                                        <StackLayout Orientation="Horizontal" Spacing="10" HorizontalOptions="StartAndExpand">

                                            <StackLayout.GestureRecognizers>

                                                <TapGestureRecognizer Command="{Binding MenuPageOneCommand}"/>

                                            </StackLayout.GestureRecognizers>

                                            <Image Source="icon1.png" Aspect="AspectFit" />

                                            <Label Text="Page 1" TextColor="White" FontSize="Micro"/>

                                        </StackLayout>

                                        <StackLayout Orientation="Horizontal" Spacing="10" HorizontalOptions="StartAndExpand">

                                            <StackLayout.GestureRecognizers>

                                                <TapGestureRecognizer Command="{Binding MenuPageTwoCommand}"/>

                                            </StackLayout.GestureRecognizers>

                                            <Image Source="icon2.png" Aspect="AspectFit" />

                                            <Label Text="Page 2" TextColor="White" FontSize="Micro"/>

                                        </StackLayout>

                                        <StackLayout Orientation="Horizontal" Spacing="10" HorizontalOptions="StartAndExpand">

                                            <StackLayout.GestureRecognizers>

                                                <TapGestureRecognizer Command="{Binding MenuPageThreeCommand}"/>

                                            </StackLayout.GestureRecognizers>

                                            <Image Source="icon3.png" Aspect="AspectFit" />

                                            <Label Text="Page 3" TextColor="White" FontSize="Micro"/>

                                        </StackLayout>

                                    </StackLayout>

                                </StackLayout>

                            </Frame>

                        </DataTemplate>

                    </sfPopup:PopupView.ContentTemplate>

                </sfPopup:PopupView>

            </sfPopup:SfPopupLayout.PopupView>

        </sfPopup:SfPopupLayout>

[Suja Venkatesan]

Hi Josh,

We would like to let you know that Popup layout provides a layout that allows users to display an alert message with customizable buttons or load any desired view inside a popup. We don’t have any clear idea about your exact requirements. Could you please more details about your requirement with any illustration video or image? It will be more helpful for us to provide the timely solutions.

Regards,

Suja

[Josh Phan]

Hi Suja,

I have several pages using the same Popup layout. So I wonder if there is a way to declare that popup just one time and use it in multiple pages. 

Thank you.

Josh

[Suja Venkatesan]

Hi Josh,

You can achieve your requirement by defining SfPopupLayout in a separate Xaml file and displaying it as shown in the code snippet below

Code Snippets:

XAML:

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

<popupLayout:SfPopupLayout xmlns=http://xamarin.com/schemas/2014/forms

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

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

               x:Class="GettingStarted.MenuPopup"

               x:Name="_popupLayout">

    <popupLayout:SfPopupLayout.PopupView>

        <popupLayout:PopupView

                                ShowCloseButton="False"

                                ShowFooter="False"

                                ShowHeader="False"

                                HorizontalOptions="StartAndExpand"

                    AnimationMode="SlideOnLeft">

            <popupLayout:PopupView.PopupStyle>

                <popupLayout:PopupStyle

                                        HasShadow="False" BorderThickness="0"

                                        OverlayColor="Transparent"

                                        OverlayOpacity="0.5"/>

            </popupLayout:PopupView.PopupStyle>

 

            <popupLayout:PopupView.ContentTemplate>

                <DataTemplate>

                    <Frame>

                        <StackLayout Padding="0" HorizontalOptions="FillAndExpand"

                                             VerticalOptions="StartAndExpand"

                                             Spacing="30">

                            <StackLayout Orientation="Horizontal"

                                                 HorizontalOptions="FillAndExpand" Margin="0,10,10,0">

                                <Label Text="icon.png" WidthRequest="124" HeightRequest="30" HorizontalOptions="StartAndExpand"/>

                                <Label Text="menu_icon.png"  HorizontalOptions="EndAndExpand" WidthRequest="25" HeightRequest="25" />

                            </StackLayout>

                            <StackLayout Spacing="30" Margin="0,25,0,0">

                                <StackLayout Orientation="Horizontal" Spacing="10" HorizontalOptions="StartAndExpand">

                                    <StackLayout.GestureRecognizers>

    <TapGestureRecognizer Command="{Binding TapCommand}"/>                                    </StackLayout.GestureRecognizers>

                                    <Label Text="homeMenu.png"  />

                                    <Label Text="Home" FontSize="Micro"/>

                                </StackLayout>

….

       </popupLayout:PopupView>

    </popupLayout:SfPopupLayout.PopupView>

</popupLayout:SfPopupLayout>

C#

private MenuPopup MenuPopup1;

private void ClickToShowPopup_Clicked(object sender, EventArgs e)

{    //creating instance for Menupopup and display it

   MenuPopup1 = new MenuPopup();

   MenuPopup1.BindingContext = new MainPageViewModel();

   MenuPopup1.Show();

}

We have attached a simple sample based on your requirement for your reference. Please have a look at this sample and revert to us with more details if we misunderstood your requirements.

Regards,

Suja

Attachment: GettingStarted_8bdb773.zip