Popup Events And Commands in Xamarin Popup (SfPopupLayout)

21 May 202113 minutes to read

There are four built-in events in the SfPopupLayout control namely:

  • Opening
  • Opened
  • Closing
  • Closed

Opening event

The SfPopupLayout.Opening event will be fired whenever opening the PopupView in the application. It can cancel popup opening with CancelEventArgs that contains the following property:

  • Cancel: Popup opening is based on this value.
<sfPopup:SfPopupLayout x:Name="popupLayout" Opening="PopupLayout_Opening"/>
public MainPage()
{
    ....
    InitializeComponent();
    popupLayout.Opening += PopupLayout_Opening;
    ....
}

private void PopupLayout_Opening(object sender, System.ComponentModel.CancelEventArgs e)
{
    e.Cancel = true;
}

Opened event

The SfPopupLayout.Opened event will be fired whenever displaying the PopupView in the application.

You can execute your own set of codes once the popup is opened, and visible in the application in its respective event handler.

<sfPopup:SfPopupLayout x:Name="popupLayout" 
Opened="PopupLayout_Opened"/>
public MainPage()
{
    ....
    InitializeComponent();
    popupLayout.Opened += PopupLayout_Opened;
    ....
}

private void PopupLayout_Opened(object sender, EventArgs e)
{
   // Codes that needs to be executed once popup is visible in the screen.
}

Closing event

The SfPopupLayout.Closing event will be fired whenever closing the PopupView in the application. It can cancel popup closing with CancelEventArgs that contains the following property:

  • Cancel: Popup opening is based on this value.
<sfPopup:SfPopupLayout x:Name="popupLayout"  Closing="PopupLayout_Closing"/>
public MainPage()
{
    ....
    InitializeComponent();
    popupLayout.Closing += PopupLayout_Closing;
    ....
}

private void PopupLayout_Closing(object sender, System.ComponentModel.CancelEventArgs e)
{
    e.Cancel = true;
}

Closed event

The SfPopupLayout.Closed event will be fired whenever dismissing the PopupView from the view.

You can execute your own set of codes once the popup is completely closed in its respective event handler.

<sfPopup:SfPopupLayout x:Name="popupLayout" Closed="PopupLayout_Closed"/>
public MainPage()
{
    ....
    InitializeComponent();
    popupLayout.Closed += PopupLayout_Closed;
    ....
}

private void PopupLayout_Closed(object sender, EventArgs e)
{
    // Codes that needs to be executed once popup is completely closed.
}

Accept command

The SfPopupLayout.PopupView.AcceptCommand will be fired when clicking the Accept button in the popup footer.

To handle the Accept button,

  • Derive a class from ICommand, and implement the ICommand interface.
  • To prevent popup from closing, return false in the CanExecute() override method and the Execute() override method will not be fired.
  • Else return true in the CanExecute() override method and do the required operations in the Execute() method.
  • Now create a property of your custom command type in the view model class and initialize it.
  • Bind the property in the view model to the SfPopupLayout.PopupView.AcceptCommand in XAML.
<?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"
             xmlns:sfPopup="clr-namespace:Syncfusion.XForms.PopupLayout;assembly=Syncfusion.SfPopupLayout.XForms"
             x:Class="Popup.MainPage">
    <ContentPage.BindingContext>
        <local:PopupViewModel/>
    </ContentPage.BindingContext>
    <sfPopup:SfPopupLayout IsOpen="{Binding PopupOpen}">
        <sfPopup:SfPopupLayout.PopupView>
            <sfPopup:PopupView AppearanceMode="TwoButton"
                          AcceptCommand="{Binding PopupAcceptCommand}"
                        DeclineCommand="{Binding PopupDeclineCommand}"   />
        </sfPopup:SfPopupLayout.PopupView>
        <sfPopup:SfPopupLayout.Content>
            <StackLayout>
                    <Button  Text="ClickToShowPopup" 
               VerticalOptions="Center"   HorizontalOptions="Center" Command="{Binding PopupCommand}" />
                </StackLayout>
            </sfPopup:SfPopupLayout.Content>
 </sfPopup:SfPopupLayout>
</ContentPage>
//PopupViewModel.cs

 class PopupViewModel : INotifyPropertyChanged
{
        bool isOpen;
        public event PropertyChangedEventHandler PropertyChanged;
        void OnPropertyChanged(string propertyName)
        {
            PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
        }
        public ICommand PopupAcceptCommand { get; set; }
        public ICommand PopupDeclineCommand { get; set; }
        public ICommand PopupCommand { get; set; }
        public bool PopupOpen {
            get { return isOpen; }
            set
            {
                isOpen = value;
                OnPropertyChanged(nameof(PopupOpen));
            } }
        public PopupViewModel()
        {
            PopupAcceptCommand = new Command(PopupAccept); //CanExecute() will be call the PopupAccept method
            PopupDeclineCommand = new Command(PopupDecline); //CanExecute() will be call the PopupDecline method
            PopupCommand = new Command(Popup);
        }

        private void Popup()
        {
            PopupOpen = true;
        }

        private void PopupAccept()
        {
             // You can write your set of codes that needs to be executed.
        }

        private void PopupDecline()
        {
            // You can write your set of codes that needs to be executed.
        }
    }

Decline command

The SfPopupLayout.PopupView.DeclineCommand will be fired when clicking the Decline button in the popup footer.

To handle the Decline button,

  • Derive a class from ICommand, and implement the ICommand interface.
  • To prevent popup from closing, return false in the CanExecute() override method and the Execute() override method will not be fired.
  • Else return true in the CanExecute() override method and do the required operations in the Execute() method.
  • Now create a property of your custom command type in the view model class and initialize it.
  • Bind the property in the view model to the SfPopupLayout.PopupView.DeclineCommand in XAML.
<?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"
             xmlns:sfPopup="clr-namespace:Syncfusion.XForms.PopupLayout;assembly=Syncfusion.SfPopupLayout.XForms"
             x:Class="Popup.MainPage">
    <ContentPage.BindingContext>
        <local:PopupViewModel/>
    </ContentPage.BindingContext>
    <sfPopup:SfPopupLayout IsOpen="{Binding PopupOpen}">
        <sfPopup:SfPopupLayout.PopupView>
            <sfPopup:PopupView AppearanceMode="TwoButton"
                          AcceptCommand="{Binding PopupAcceptCommand}"
                        DeclineCommand="{Binding PopupDeclineCommand}"   />
        </sfPopup:SfPopupLayout.PopupView>
        <sfPopup:SfPopupLayout.Content>
            <StackLayout>
                    <Button  Text="ClickToShowPopup" 
               VerticalOptions="Center"   HorizontalOptions="Center" Command="{Binding PopupCommand}" />
                </StackLayout>
            </sfPopup:SfPopupLayout.Content>
 </sfPopup:SfPopupLayout>
</ContentPage>
//PopupViewModel.cs
 
     class PopupViewModel : INotifyPropertyChanged
{
        bool isOpen;
        public event PropertyChangedEventHandler PropertyChanged;
        void OnPropertyChanged(string propertyName)
        {
            PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
        }
        public ICommand PopupAcceptCommand { get; set; }
        public ICommand PopupDeclineCommand { get; set; }
        public ICommand PopupCommand { get; set; }
        public bool PopupOpen {
            get { return isOpen; }
            set
            {
                isOpen = value;
                OnPropertyChanged(nameof(PopupOpen));
            } }
        public PopupViewModel()
        {
            PopupAcceptCommand = new Command(PopupAccept); //CanExecute() will be execute the PopupAccept method
            PopupDeclineCommand = new Command(PopupDecline); //CanExecute() will be execute the PopupDecline method
            PopupCommand = new Command(Popup);
        }

        private void Popup()
        {
            PopupOpen = true;
        }

        private void PopupAccept()
        {
             // You can write your set of codes that needs to be executed.
        }

        private void PopupDecline()
        {
            // You can write your set of codes that needs to be executed.
        }
    }