1. Home
  2. Forum
  3. Xamarin.Forms
  4. PopupLayout raises Exception when Content is set

PopupLayout raises Exception when Content is set

Hi!
I get a "System.InvalidOperationException: Cannot change ObservableCollection during a CollectionChanged event." Exception when doing:

SfPopupLayout popupLayout = new SfPopupLayout();
ContentView view = new ContentView() {
  Content = new Button()
};
popupLayout.Content = view;
popupLayout.Show(this.Content);

When i change to
popupLayout.Show();
the Popup is not shown.

Regards Michael

6 Replies
SS Suhasini  Suresh Syncfusion Team March 26, 2018 07:51 AM UTC

Hi Michael, 
 
Thanks for contacting Syncfusion Support. 
 
SfPopupLayout can be used in two types:  
  
  • Type A : Set SfPopupLayout as the root view of the activity and call the SfPopupLayout.Show() method to display the popup. Set the view on which the popup should be displayed as the SfPopupLayout.Content.
  • Type B : Set any view as the root view of the activity and pass the root view, when calling SfPopupLayout.Show(rootView) to display the popup. In this case, SfPopupLayout.Content should not be set.
  
Regarding your query, 
As per the code example you have shared, you have set the SfPopupLayout.Content and passed the root view in the SfPopupLayout.Show() method, which is the wrong use case. 
 
The code snippet for displaying popup is below: 
SfPopupLayout popupLayout; 
 
public MainPage() 
{ 
    ContentView contentView = new ContentView(); 
    Button clickToShowPopup = new Button(); 
    clickToShowPopup.Text = "Click to show popup"; 
    clickToShowPopup.Clicked += ClickToShowPopup_Clicked; 
    contentView.Content = clickToShowPopup; 
    popupLayout = new SfPopupLayout(); 
    this.Content = contentView; 
} 
 
private void ClickToShowPopup_Clicked(object sender, EventArgs e) 
{ 
    popupLayout.Show(this.Content); 
} 
 
We have prepared a sample to achieve your requirement, you can download the same from the below link. In the sample, popup is displayed in Type-B.  
 
Please refer the below UG link for documentation of SfPopupLayout, where you can find the clear details on how to use the popup.  
 
Regards, 
Suhasini  


MS Michael Sandler March 26, 2018 11:46 AM UTC

Thanks for the quick response.
What i would like to do is setting a custom popup content.
I tried to do that with the ContentTemplate property.
That works.... but it seems that xaml bindings are not working.
For example: 
<Label Text="{Binding Name}"/>

& Setting BindingContext
SfPopupLayout popupLayout = new SfPopupLayout();
popupLayout.BindingContext = _viewModel;

Do you have a solution for this?

Thanks and regards
Michael

MS Michael Sandler March 26, 2018 11:55 AM UTC

Btw, Another question:
Is it possible to get the generated View from SfPopupLayout.
Reason is i want to access for example a Element from there.

Thanks and regards

DS Divakar Subramaniam Syncfusion Team March 27, 2018 01:01 PM UTC

Hi Michael, 
 
We have prepared a sample by binding a property which is in ViewModel as Label’s text (based on your requirement). Please find the code snippet below, 
 
//MainPage.Xaml.cs             
var popupLayout = new SfPopupLayout(); 
popupLayout.BindingContext= new ViewModel(); 
var label = new Label(); 
label.TextColor = Color.Black; 
label.HorizontalTextAlignment = TextAlignment.Center; 
label.VerticalTextAlignment = TextAlignment.Center; 
label.SetBinding(Label.TextProperty, new Binding() { Path = "Name", Source = popupLayout.BindingContext});     
 
//ViewModel class 
public class ViewModel : INotifyPropertyChanged 
{ 
    public ViewModel() 
    { 
        SetRow(); 
    } 
 
    private string _name; 
 
    public event PropertyChangedEventHandler PropertyChanged; 
 
    public string Name 
    { 
        get { return _name; } 
        set 
        { 
            _name = value; 
            RaisePropertyChanged("Name"); 
        } 
    } 
 
    internal void SetRow() 
    { 
        Name = "MyLabel"; 
    } 
 
    private void RaisePropertyChanged(string name) 
    { 
        if (this.PropertyChanged != null) 
            this.PropertyChanged(this, new PropertyChangedEventArgs(name)); 
    } 
 
} 
 
Please refer the sample from the below link, 
 
Regarding your second query, you can get the generated view in SfPopupLayout as below, 
var generatedView = popupLayout.PopupView; 
 
Please let us know if you need further assistance. 
 
Regards, 
Divakar. 


JZ jahanzaib zahid March 25, 2019 08:21 AM UTC

there is a problem when we used to change the content dynamic it doesnt change the popup layout content set to again set
   it is not setting the dynamic text when i used to open
top_action_menu.PopupView.PopupStyle.BorderColor = Color.Transparent;
            top_action_menu.PopupView.PopupStyle.BorderThickness = 0;
            top_action_menu.PopupView.PopupStyle.CornerRadius = 8;
            top_action_menu.PopupView.AnimationMode = AnimationMode.SlideOnTop;
            top_action_menu.PopupView.ShowFooter = false;
            top_action_menu.PopupView.ShowHeader = false;
            top_action_menu.PopupView.WidthRequest = App.ScreenWidth * 0.4;
            top_action_menu.PopupView.HeightRequest = App.ScreenHeight * 0.3;
            top_action_menu.PopupView.BackgroundColor = Color.Transparent;
            top_action_menu.PopupView.Opacity = 0.95;

            Device.BeginInvokeOnMainThread(() =>
            {
                top_action_menu.PopupView.ContentTemplate = new DataTemplate(() =>
                {
                    return new ConfirmationModal(alerttype, msg, btnmsg, top_action_menu.Dismiss).Content;
                });
            
            });  

JP Jagadeesan Pichaimuthu Syncfusion Team March 26, 2019 10:05 AM UTC

Hi  Jahanzaib Zahid, 

Thanks for your update. 

We had analyzed your sample. The issue “Old SfPopup appears each time while displaying another popup” is a known issue and had been fixed in the latest  2019 volume 1 beta release. You can overcome the issue by updating the NuGet packages. 

Please find the beta link below and update the NuGet packages. 
 
 
Let us know whether this helps also if you need any further assistance on this. 
 
Regards, 
Jagadeesan

Loader.
Up arrow icon