How to update details of an item of the listview from an button command from popup?

[Richy]

I have a Listview and each item in it has a cancel Button, on the click of that cancel button a Popup appears. Inside the popup, I have an Editor control and a submit button. On the click of the submit button, I have to change the property status of the same item in the listview to 'cancelled'. How can i achieve this?

Here is my code

ContentView

    <ContentView.Resources>

        <ResourceDictionary>

            <popupLayout:SfPopupLayout x:Key="AppointmentCancelWindow" x:Name="AppointmentCancelWindow" StaysOpen="True">

                <popupLayout:SfPopupLayout.PopupView>

                    <popupLayout:PopupView

HeightRequest="230"

ShowFooter="True"

ShowCloseButton="False">

                        <popupLayout:PopupView.HeaderTemplate>

                            <DataTemplate>

                                <StackLayout BackgroundColor="WhiteSmoke" Padding="10,0,0,0">

                                    <Label Text="Feedback"></Label>

                                </StackLayout>

                            </DataTemplate>

                        </popupLayout:PopupView.HeaderTemplate>

                        <popupLayout:PopupView.ContentTemplate>

                            <DataTemplate>

                                <StackLayout VerticalOptions="FillAndExpand">

                                    <Editor x:Name="Editnotes" Text="{Binding FeedbackComment, Mode=TwoWay}" MaxLength="2000" WidthRequest="260" Placeholder="Provide Feedback..."

                                            AutoSize="TextChanges" FontSize="Small" />

                                </StackLayout>

                            </DataTemplate>

                        </popupLayout:PopupView.ContentTemplate>

                        <popupLayout:PopupView.FooterTemplate>

                            <DataTemplate>

                                <Grid Padding="5">

                                    <Grid.ColumnDefinitions>

                                        <ColumnDefinition Width="25*" />

                                        <ColumnDefinition Width="25*" />

                                        <ColumnDefinition Width="25*" />

                                        <ColumnDefinition Width="25*" />

                                    </Grid.ColumnDefinitions>

                                    <StackLayout Grid.Column="1">

                                        <buttons:SfButton Text="Cancel"

                                                      HorizontalOptions="CenterAndExpand"

                                                      Command="{Binding CloseFeedbackCommand}"

                                                      CommandParameter="{StaticResource AppointmentCancelWindow}" />

                                    </StackLayout>

                                    <StackLayout Grid.Column="2">

                                        <buttons:SfButton Text="Submit"

                                                      HorizontalOptions="CenterAndExpand"

                                                      Command="{Binding SubmittFeedbckCommand}"

                                                      CommandParameter="{StaticResource AppointmentCancelWindow}" />

                                    </StackLayout>

                                </Grid>

                            </DataTemplate>

                        </popupLayout:PopupView.FooterTemplate>

                    </popupLayout:PopupView>

                </popupLayout:SfPopupLayout.PopupView>

            </popupLayout:SfPopupLayout>

        </ResourceDictionary>

    </ContentView.Resources>

    <ContentView.Content>     

            <StackLayout>

                <list:SfListView x:Name="appointmentListView" VerticalOptions="FillAndExpand"

                       ItemsSource="{Binding ScheduledAppointments}" Orientation="Horizontal"

                       ItemSpacing="5"

                       AutoFitMode="Height"

                       SelectedItem="{Binding SelectedAppointment,Mode=TwoWay}"

                       LoadMoreOption="Auto"

                       LoadMoreCommand="{Binding LoadMoreAppointmentsCommand}"

                       LoadMoreCommandParameter="{Binding Source={x:Reference Name=appointmentListView}}"

                       IsBusy="{Binding IsLoading}"

                       ListViewCachingStrategy="RecycleTemplate">

                    <list:SfListView.ItemTemplate>

                        <DataTemplate>

                            <ContentView>

                                <Frame HasShadow="True" CornerRadius="5" Margin="0,0,0,10" Padding="0" BackgroundColor="White">

<buttons:SfButton x:Name="cancelButton" CornerRadius="20" 

  Command="{Binding Source={RelativeSource AncestorType={x:Type ContentPage}}, Path=BindingContext.OpenFeedbackDialog}"

  CommandParameter="{StaticResource AppointmentCancelWindow}"

  WidthRequest="100" IsEnabled="{Binding IsCancelEnabled}"

  Text="Cancel"

  BackgroundColor="WhiteSmoke" BorderWidth="2"                                                          

  HorizontalOptions="FillAndExpand"

  FontSize="Small" />

                                </Frame>

                            </ContentView>

                        </DataTemplate>

                    </list:SfListView.ItemTemplate>

                </list:SfListView>

            </StackLayout>

  </ContentView.Content>

Here is my ViewModel

        public Command<SfPopupLayout> OpenFeedbackDialog { get; set; }

        public Command<SfPopupLayout> CloseFeedbackCommand { get; set; }

        public Command<SfPopupLayout> SubmittFeedbckCommand { get; set; }

             inside constructor

this.OpenFeedbackDialog = new Command<SfPopupLayout>(this.DisplayFeedbackDialog);

this.CloseFeedbackCommand = new Command<SfPopupLayout>(this.CloseFeedback);

this.SubmittFeedbckCommand = new Command<SfPopupLayout>(this.SubmittFeedback);

         private void SubmittFeedback(SfPopupLayout popup)

        {

            if(!string.IsNullOrEmpty(FeedbackComment))

            {

                popup.IsOpen = false;

                    // Here i need to change the status of cancelled item in listview

            }

        }

        private void CloseFeedback(SfPopupLayout popup)

        {

            popup.IsOpen = false;

        }

        private void DisplayFeedbackDialog(SfPopupLayout popupLayout)

        {

            popupLayout.BindingContext = this;

            popupLayout.IsOpen = true;

        }

[Sivaraman Sivagurunathan]

Hi Richy, 

Thanks for using Syncfusion controls. 

We have checked your query and prepared the sample based on your requirement. You have achieve your requirement by set the SfPopupLayout.PopupView.BindingContext as ItemData. Before open the popup layout. We have attached the sample for your reference. You can download the same from the below link. 

private void appointmentListView_ItemTapped(object sender, Syncfusion.ListView.XForms.ItemTappedEventArgs e) 

{ 

    AppointmentCancelWindow.PopupView.BindingContext = e.ItemData; 

} 

Sample Link: https://www.syncfusion.com/downloads/support/forum/159355/ze/PopupPage_(2)-2014893068 

Regards, 

Sivaraman S 

[Richy]

Thanks for the reply. But what to do if the listview item template contains other buttons also not just a single cancel button.

[Sivaraman Sivagurunathan]

Hi Richy, 

Thanks for the update. 

You have to set the SfPopupLayout.PopupView.BindingContext as ItemData. Before open the popup layout even if you have more button in SfListView Items. Because if you want to change the value of the listview item when you change property in SfPopup view. You have to set the binding context as ItemData to Popup view. Otherwise the value does not changed in ListView when you change in Popup view. 

Regards, 

Sivaraman S 

[Richy]

Hi Richy, 

Thanks for the update. 

You have to set the SfPopupLayout.PopupView.BindingContext as ItemData. Before open the popup layout even if you have more button in SfListView Items. Because if you want to change the value of the listview item when you change property in SfPopup view. You have to set the binding context as ItemData to Popup view. Otherwise the value does not changed in ListView when you change in Popup view. 

Regards, 

Sivaraman S 

Thanks. I understand that I need to set the SfPopupLayout.PopupView.BindingContext as ItemData. And as the sample provided you are setting it on the ItemTapped event of the listview. But you are opening popup layout on the SelectionChangedCommand of the listview. That is what i said, the list item has more buttons that have separate commands. 

I have a cancel button and a join  button in my itemtemplate. while on the cancel button click, i want to open the popup. And inside the popup i have the a submit button. On submit button click, i have to change the IsChanged status after doing some other action(not wanted to change IsChanged status directly using a switch as in sample).

[Richy]

Here is a sample i need to implement.

Attachment: PopupPage_3f914a46.rar

[Sivaraman Sivagurunathan]

Hi Richy, 

We have checked your query. Currently, we are validate your requirement from our side. We will validate and update you further details on or before 10^th November 2020. We appreciate your patience until then.    

Regards, 

Sivaraman S 

[Karthikraja Kalaimani]

Hi Richy,

Please refer to the below code snippet to achieve your requirement.

Code snippet :

 

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

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

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

             xmlns:local="clr-namespace:Popup_Demo" 

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

             xmlns:buttons="clr-namespace:Syncfusion.XForms.Buttons;assembly=Syncfusion.Buttons.XForms" 

             xmlns:list="clr-namespace:Syncfusion.ListView.XForms;assembly=Syncfusion.SfListView.XForms" 

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

             ios:Page.UseSafeArea="true"  

             x:Class="Popup_Demo.MainPage"> 

 

    <ContentPage.BindingContext> 

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

    </ContentPage.BindingContext> 

 

    <ContentPage.Resources> 

        <ResourceDictionary> 

            <local:BooleanToStringConverter x:Key="BoolToStringConverter"/> 

        </ResourceDictionary> 

    </ContentPage.Resources> 

 

    <ContentPage.Content> 

        <popupLayout:SfPopupLayout x:Name="AppointmentCancelWindow"  

                                   StaysOpen="True"> 

            <popupLayout:SfPopupLayout.PopupView> 

                <popupLayout:PopupView HeightRequest="230" 

                                           ShowFooter="True" 

                                           ShowCloseButton="False"> 

                    <popupLayout:PopupView.HeaderTemplate> 

                        <DataTemplate> 

                            <StackLayout BackgroundColor="WhiteSmoke" 

                                             Padding="10,0,0,0"> 

                                <Label Text="Feedback"></Label> 

                            </StackLayout> 

                        </DataTemplate> 

                    </popupLayout:PopupView.HeaderTemplate> 

                    <popupLayout:PopupView.FooterTemplate> 

                        <DataTemplate> 

                            <Grid Padding="5"> 

                                <Grid.ColumnDefinitions> 

                                    <ColumnDefinition Width="25*" /> 

                                    <ColumnDefinition Width="25*" /> 

                                    <ColumnDefinition Width="25*" /> 

                                    <ColumnDefinition Width="25*" /> 

                                </Grid.ColumnDefinitions> 

                                <StackLayout Grid.Column="1"> 

                                    <buttons:SfButton Text="Cancel" 

                                                          HorizontalOptions="CenterAndExpand" 

                                                          Command="{Binding CloseFeedbackCommand}" 

                                                      CommandParameter="{x:Reference AppointmentCancelWindow}"> 

                                        <buttons:SfButton.BindingContext> 

                                            <local:BookInfoRepository/> 

                                        </buttons:SfButton.BindingContext> 

                                    </buttons:SfButton> 

                                </StackLayout> 

                                <StackLayout Grid.Column="2"> 

                                    <buttons:SfButton Text="Submit" 

                                                          HorizontalOptions="CenterAndExpand" 

                                                          Command="{Binding SubmittFeedbckCommand}" 

                                                      CommandParameter="{x:Reference AppointmentCancelWindow}"> 

                                        <buttons:SfButton.BindingContext> 

                                            <local:BookInfoRepository/> 

                                        </buttons:SfButton.BindingContext> 

                                    </buttons:SfButton> 

                                </StackLayout> 

                            </Grid> 

                        </DataTemplate> 

                    </popupLayout:PopupView.FooterTemplate> 

                </popupLayout:PopupView> 

            </popupLayout:SfPopupLayout.PopupView> 

 

            <popupLayout:SfPopupLayout.Content> 

                <StackLayout> 

                    <list:SfListView x:Name="appointmentListView" 

                             VerticalOptions="FillAndExpand" 

                             ItemsSource="{Binding BookInfo}" 

                             Orientation="Vertical" 

                             ItemSpacing="5" 

                             AutoFitMode="Height" 

                             ListViewCachingStrategy="RecycleTemplate"> 

                        <!--SelectionChangedCommand="{Binding Path=BindingContext.OpenFeedbackDialog, Source={x:Reference appointmentListView}}" 

                                     SelectionChangedCommandParameter="{x:Reference AppointmentCancelWindow}" 

                                     ItemTapped="appointmentListView_ItemTapped">--> 

                         

                        <list:SfListView.ItemTemplate> 

                            <DataTemplate> 

                                <ContentView> 

                                    <Frame HasShadow="True" CornerRadius="5" Margin="0,0,0,10" Padding="0" BackgroundColor="White"> 

                                        <StackLayout VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand"> 

                                            <StackLayout HorizontalOptions="FillAndExpand"> 

                                                <Label Text="{Binding BookName}"/> 

                                                <Label Text="{Binding IsChanged, Converter={StaticResource BoolToStringConverter}}"/> 

                                            </StackLayout> 

                                            <StackLayout Orientation="Horizontal"> 

                                                <buttons:SfButton x:Name="cancelButton" 

                                                              CornerRadius="20"  

                                                              Text="Cancel" 

                                                              Command="{Binding Path=BindingContext.OpenFeedbackDialog, Source={x:Reference appointmentListView}}" 

                                                              CommandParameter="{x:Reference cancelButton}"                                                       

                                                              BackgroundColor="Red" 

                                                              BorderWidth="2"                                                           

                                                              HorizontalOptions="FillAndExpand" 

                                                              FontSize="Small" /> 

                                                <buttons:SfButton x:Name="joinButton" 

                                                              CornerRadius="20"  

                                                              Text="Join" 

                                                              Command="{Binding Path=BindingContext.JoinButtonCommand, Source={x:Reference appointmentListView}}" 

                                                              BackgroundColor="Blue" 

                                                              BorderWidth="2"                                                           

                                                              HorizontalOptions="FillAndExpand" 

                                                              FontSize="Small" /> 

                                            </StackLayout> 

                                        </StackLayout> 

                                    </Frame> 

                                </ContentView> 

                            </DataTemplate> 

                        </list:SfListView.ItemTemplate> 

                    </list:SfListView> 

                </StackLayout> 

            </popupLayout:SfPopupLayout.Content> 

        </popupLayout:SfPopupLayout> 

    </ContentPage.Content> 

</ContentPage> 

//ViewModel
public Command<SfButton> OpenFeedbackDialog { get; set; } 

        public Command<SfButton> CloseFeedbackCommand { get; set; } 

        public Command<SfButton> SubmittFeedbckCommand { get; set; } 

        public ICommand JoinButtonCommand { get; } 

        public ObservableCollection<BookInfo> BookInfo 

        { 

            get { return bookInfo; } 

            set  

            { 

                this.bookInfo = value; 

                OnPropertyChanged("BookInfo"); 

            } 

        } 

        public BookInfo SelectedBook 

        { 

            get { return _selectedBook; } 

            set 

            { 

                this._selectedBook = value; 

                OnPropertyChanged("SelectedBook"); 

            } 

        } 

 

        public BookInfoRepository() 

        { 

            SelectedBook = new BookInfo(); 

            GenerateBookInfo(); 

            this.OpenFeedbackDialog = new Command<SfButton>(this.DisplayFeedbackDialog); 

            this.CloseFeedbackCommand = new Command<SfButton>(this.CloseFeedback); 

            this.SubmittFeedbckCommand = new Command<SfButton>(this.SubmittFeedback); 

            this.JoinButtonCommand = new Command(async (param) => await JoinClicked(param)); 

        } 

        private void SubmittFeedback(SfButton button) 

        { 

            var popup = button.Parent.Parent.Parent.Parent.Parent.Parent.Parent.Parent.Parent.Parent; 

            (popup as SfPopupLayout).IsOpen = false; 

            SelectedBook.IsChanged = !SelectedBook.IsChanged; 

        } 

 

        private void CloseFeedback(SfButton button) 

        { 

            var popup = button.Parent.Parent.Parent.Parent.Parent.Parent.Parent.Parent.Parent.Parent; 

            (popup as SfPopupLayout).IsOpen = false; 

        } 

 

        private void DisplayFeedbackDialog(SfButton button) 

        { 

 

            var popup = button.Parent.Parent.Parent.Parent.Parent.Parent.Parent.Parent.Parent.Parent; 

            (popup as SfPopupLayout).PopupView.BindingContext = button.BindingContext; 

            (popup as SfPopupLayout).IsOpen = true; 

        } 

 

Regards,
Karthik Raja 

[Richy]

Actually, I'm using this as a ContentView so i can place it in any ContentPages as I wish...

Here in code snippet <popupLayout:SfPopupLayout> is inside <ContentPage.Content> , but in my project <popupLayout:SfPopupLayout> is inside <ContentView.Content>.

And When i place <popupLayout:SfPopupLayout> inside <ContentView.Content> the View is not appearing in my page.

        

[Sivaraman Sivagurunathan]

Hi Richy, 

Thanks for your update. 

We have checked your reported issue. Unfortunately we are unable to reproduce the reported issue from our side. It is working fine as expected. SfPopupLoad correctly when we load inside the ContentView Content. We have attached the tested sample link for your reference. You can download the same from the below link. If the issue still occurs from your side please revert us with modified sample with SfPopupLayout product version, Xamarin.Forms version with clear replication procedure. It will help us to provide the better solution.    

Sample link: https://www.syncfusion.com/downloads/support/forum/159355/ze/POPUPP~1-1118315322 

Regards, 

Sivaraman S 

[Richy]

Hi Richy, 

Thanks for your update. 

We have checked your reported issue. Unfortunately we are unable to reproduce the reported issue from our side. It is working fine as expected. SfPopupLoad correctly when we load inside the ContentView Content. We have attached the tested sample link for your reference. You can download the same from the below link. If the issue still occurs from your side please revert us with modified sample with SfPopupLayout product version, Xamarin.Forms version with clear replication procedure. It will help us to provide the better solution.    

Sample link: https://www.syncfusion.com/downloads/support/forum/159355/ze/POPUPP~1-1118315322 

Regards, 

Sivaraman S 

Popuplayout which is inside ContentView(Template) is not appearing. Here attaching a sample for your reference.

Attachment: PopupPage_6f59dd8f.rar

[Gokul Saravanan]

Hi Richy,

Thanks for the update.

We have checked your query and the attached sample. In that, you have loaded the ContentView inside a StackLayout and PopupLayout as ContentView’s content. I would let you know that you need to set VerticalOptions when loading PopupLayout inside view such as StackLayout or Grid with RowDefinition as Auto. We have modified the sample based on your requirement and attached for your reference. You can download the same from the below link.

 

    
         

                                                             VerticalOptions="FillAndExpand"

                                                             StaysOpen="True">

         

    

 

Sample link: https://www.syncfusion.com/downloads/support/forum/159355/ze/PopupPage-2033155184

Regards

Gokul S

[Richy]

Is there a way to create popup in viewmodel itself and open it from there.

The following popup in xaml to c# i mean

            <popupLayout:SfPopupLayout x:Key="AppointmentCancelWindow" x:Name="AppointmentCancelWindow"

                                       VerticalOptions="FillAndExpand" StaysOpen="True">

                <popupLayout:SfPopupLayout.PopupView>

                    <popupLayout:PopupView

                                            HeightRequest="300" ShowCloseButton="True"

                                            ShowFooter="True" HeaderTitle="{StaticResource CancelAppointment}">

                        <popupLayout:PopupView.HeaderTemplate>

                            <DataTemplate>

                                <StackLayout BackgroundColor="WhiteSmoke" Padding="10,0,0,0">

                                    <Label Text="{StaticResource CancelAppointment}" Style="{StaticResource SfPopupHeaderStyle}"></Label>

                                </StackLayout>

                            </DataTemplate>

                        </popupLayout:PopupView.HeaderTemplate>

                        <popupLayout:PopupView.ContentTemplate>

                            <DataTemplate>

                                <StackLayout VerticalOptions="FillAndExpand">

                                    <Editor x:Name="Feedbacknotes"

                                            Text="{Binding FeedbackComment, Mode=TwoWay}"

                                            MinimumHeightRequest="200" WidthRequest="260" MaxLength="2000" 

                                            AutoSize="TextChanges" BackgroundColor="{StaticResource Gray-200}"

                                            TextColor="{StaticResource BlackColor}" PlaceholderColor="{StaticResource GrayColor}"

                                            FontFamily="{StaticResource Montserrat-Regular}" FontSize="13"

                                            Placeholder="{StaticResource AppointmentCancelFeedback}"/>

                                    <Label VerticalTextAlignment="Start" VerticalOptions="Start" HorizontalOptions="Start"

                                            Text="Please provide the feedback" TextColor="Red" FontSize="Small"

                                            FontFamily="{StaticResource Montserrat-Regular}" />

                                </StackLayout>

                            </DataTemplate>

                        </popupLayout:PopupView.ContentTemplate>

                        <popupLayout:PopupView.FooterTemplate>

                            <DataTemplate>

                                <StackLayout Padding="10">

                                    <buttons:SfButton Text="{StaticResource CancelAppointment}"

                                                      HorizontalOptions="CenterAndExpand"

                                                      Style="{StaticResource SfPopupPositiveButtonStyle}"

                                                      Command="{Binding SubmittFeedbckCommand}"

                                                      CommandParameter="{x:Reference AppointmentCancelWindow}" />

                                </StackLayout>

                            </DataTemplate>

                        </popupLayout:PopupView.FooterTemplate>

                    </popupLayout:PopupView>

                </popupLayout:SfPopupLayout.PopupView>

            </popupLayout:SfPopupLayout>

[Richy]

Hi Richy,

Thanks for the update.

We have checked your query and the attached sample. In that, you have loaded the ContentView inside a StackLayout and PopupLayout as ContentView’s content. I would let you know that you need to set VerticalOptions when loading PopupLayout inside view such as StackLayout or Grid with RowDefinition as Auto. We have modified the sample based on your requirement and attached for your reference. You can download the same from the below link.

 

    
         

                                                             VerticalOptions="FillAndExpand"

                                                             StaysOpen="True">

         

    

 

Sample link: https://www.syncfusion.com/downloads/support/forum/159355/ze/PopupPage-2033155184

Regards

Gokul S

Hi But the click of the Cancel button commands that displays popup is not working

Attachment: PopupPage_1320a1b6.rar

[Gokul Saravanan]

Hi Richy, 

 

We regret for delay caused. 

 

We have checked your query and able to reproduce the issue “Command not executed when reference parameter is passed”. We are currently validating the issue and update you further details on November 25,2020. We appreciate your patience until then. 

 

Regards 

Gokul S 

[Gokul Saravanan]

Hi Richy, 

 

Sorry for the delay caused. 

 

We have checked your query “Button command not executed loaded in Popup footer”. We have checked the provided sample in the last update, you had set the PopupLayout as CommandParameter and in command button is passed as object. We have modified CommandParameter as button. The button command works fine as excepted. You can also refer the following code snippet for your reference. 

 

 

# XAML 

<StackLayout Grid.Column="2"> 

     <buttons:SfButton Text="Submit" x:Name="submitButton" 

                                                          HorizontalOptions="CenterAndExpand"  

                                                          Command="{Binding SubmittFeedbckCommand}" 

                                                      CommandParameter="{x:Reference submitButton}"> 

             <buttons:SfButton.BindingContext> 

                     <local:BookInfoRepository/> 

             </buttons:SfButton.BindingContext> 

     </buttons:SfButton> 

</StackLayout> 

 

// ViewModel.cs 

        private void SubmittFeedback(SfButton button) 

        { 

            var popup = button.Parent?.Parent?.Parent; //.Parent.Parent.Parent.Parent; 

            (popup as SfPopupLayout).IsOpen = false; 

        } 

             

 

 And you can also refer the sample for the same in below link. 

Sample Link: https://www.syncfusion.com/downloads/support/forum/159355/ze/PopupButtonCommand-1495206605 

 

# Regarding creation of Popup inside ViewModel. 

 

You can create popup inside view model and access it to add to your view using Behavior. 

 

// ViewModel.cs   

      public SfPopupLayout CreatePopup() 

        { 

            popupLayout = new SfPopupLayout(); 

            popupLayout.PopupView.HeaderTitle = "ListView"; 

            popupLayout.PopupView.HeightRequest = 350; 

 

            DataTemplate templateView = new DataTemplate(() => 

            { 

                StackLayout stackLayout = new StackLayout(); 

                Editor feedbacknotes = new Editor(); 

                Label popupContent = new Label(); 

                popupContent.Text = "This is the Customized view for SfPopupLayout"; 

                popupContent.BackgroundColor = Color.LightSkyBlue; 

                popupContent.HorizontalTextAlignment = TextAlignment.Center; 

 

 

                stackLayout.Children.Add(feedbacknotes); 

                stackLayout.Children.Add(popupContent); 

 

                return stackLayout; 

            }); 

 

            // Adding ContentTemplate of the SfPopupLayout 

            popupLayout.PopupView.ContentTemplate = templateView; 

            return popupLayout; 

        } 

 

// Write behaviour for TemplateView.XAML 

    public class TemplateViewBehaviour : Behavior<TemplateView> 

    { 

        protected override void OnAttachedTo(TemplateView bindable) 

        { 

            // Perform setup 

 

            base.OnAttachedTo(bindable); 

            var templateContentView = bindable as TemplateView; 

            templateContentView.BindingContext = (templateContentView.Parent?.Parent as ContentPage).BindingContext; 

            var viewModel = templateContentView.BindingContext as BookInfoRepository; 

            templateContentView.Content = viewModel.CreatePopup(); 

        } 

 

        protected override void OnDetachingFrom(TemplateView bindable) 

        { 

            base.OnDetachingFrom(bindable); 

            // Perform clean up 

        } 

 

        // Behavior implementation 

    } 

 

 

 

 

We hope this helps. Please let us know, if you would require any further assistance. 

 

Regards 

Gokul S 

[Richy]

How to create a generic popup where the PopupView (header, content & footer templates) can be passed as xaml? 

Need to call that popup from any page which follows MVVM and popup should have buttons commands which can close the popup after doing corresponding functions

[Gokul Saravanan]

Hi Richy, 

 

You can achieve your requirement by using SfPopupLayout as a page. To achieve it create a new XAML with SfPopupLayout  in it and use its instance to access popup. 

 

You can also refer our online user guide documentation regarding the same by the following link, 

  

UG link: https://help.syncfusion.com/xamarin/popup/mvvm#how-to-use-xamarinforms-popup-as-a-page 

 

We hope this helps. Please let us know, if you would require any further assistance. 

 

Regards 

Gokul S