Events in .NET MAUI Picker (SfPicker)

22 Sep 20257 minutes to read

Three events have been used for a .NET MAUI Picker when it is in the Dialog mode. They are,

  • Opened
  • Closing
  • Closed
  • SelectionChanged
  • OkButtonClicked
  • CancelButtonClicked

Opened

The Opened event occurs when the picker pop-up is opened.

Closing event

The Closing event is raised when the picker pop-up is closing. Prevent the picker pop-up from closing by setting “e.cancel” to true.

Closed event

The Closed event is raised after the picker pop-up is closed.

SelectionChanged Event

The SelectionChanged is raised after the selected index changed on the SfPicker.

NOTE

In SfPicker, the SelectedIndex and SelectedItem properties are updated only when the OK button in the footer view is tapped. This behavior applies when the Mode is set to Dialog or RelativeDialog, the Height of the PickerFooterView is greater than zero, and ShowOkButton is enabled. This applies only when there is a single picker column.

OkButtonClicked Event

The OkButtonClicked event is raised after the ok button clicked on the SfPicker. This event is not applicable while the footer view and ok button are not visible.

CancelButtonClicked Event

The CancelButtonClicked is raised after the Cancel button clicked on the SfPicker. This event is not applicable while the footer view is not visible.

<sfPicker:SfPicker x:Name="picker" 
                            Opened="picker_Opened" 
                            Closed="picker_Closed"
                            Closing="picker_Closing"
                            SelectionChanged="picker_SelectionChanged"
                            OkButtonClicked="picker_OkButtonClicked"
                            CancelButtonClicked="picker_CancelButtonClicked">
    </sfPicker:SfPicker>
this.picker.Opened += Picker_Opened;
    this.picker.Closing += Picker_Closing;
    this.picker.Closed += Picker_Closed;
    this.picker.SelectionChanged += Picker_SelectionChanged;
    this.picker.OkButtonClicked += Picker_OkButtonClicked;
    this.picker.CancelButtonClicked += Picker_CancelButtonClicked;

    private void Picker_Opened(object sender, EventArgs e)
    {
        // Handle the open action.
    }

    private void Picker_Closing(object sender, Syncfusion.XForms.Core.CancelEventArgs e)
    {
        // Stop the close action by setting the `e.cancel` to true.
    }

    private void Picker_Closed(object sender, EventArgs e)
    {
        // Hit after the picker is closed.
    }

    private void Picker_SelectionChanged(object sender, PickerSelectionChangedEventArgs e)
    {
        // Hit after the picker selected index is changed.
    }

    private void Picker_OkButtonClicked(object sender, EventArgs e)
    {
        // Hit after the OK button is clicked.
    }

    private void Picker_CancelButtonClicked(object sender, EventArgs e)
    {
        // Hit after the Cancel button is clicked.
    }

Commands

SelectionChangedCommand

The SfPicker includes a built-in event called SelectionChanged that is triggered whenever the selection index in the picker changes. This event can be invoked through the SelectionChangedCommand, which passes the PickerSelectionChangedEventArgs as a parameter.

<picker:SfPicker x:Name="picker"
                    SelectionChangedCommand="{Binding SelectionChangedCommand}">
<ContentPage.BindingContext>
    <local:ViewModel/>
</ContentPage.BindingContext>					  
</picker:SfPicker>
public class ViewModel
{
    public ICommand SelectionChangedCommand { get; set; }
    public ViewModel()
    {
        SelectionChangedCommand = new Command(SelectionChanged);
    }
    private void SelectionChanged()
    {
        // To do your requirement here.
    }
}

AcceptCommand

The SfPicker includes a built-in event called OkButtonClicked, which is triggered when the confirm button is tapped on the picker. This event can be invoked through the AcceptCommand.

<picker:SfPicker x:Name="picker"
                    AcceptCommand="{Binding AcceptCommand}">
<ContentPage.BindingContext>
    <local:ViewModel/>
</ContentPage.BindingContext>					  
</picker:SfPicker>
public class ViewModel
{
    public ICommand AcceptCommand { get; set; }
    public ViewModel()
    {
        AcceptCommand = new Command(ActionButtonClicked);
    }
    private void ActionButtonClicked()
    {
        // To do your requirement here.
    }
}

DeclineCommand

The SfPicker includes a built-in event called CancelButtonClicked, which is triggered when the cancel button is tapped on the picker. This event can be invoked through the DeclineCommand.

<picker:SfPicker x:Name="picker"
                    DeclineCommand="{Binding DeclineCommand}">
<ContentPage.BindingContext>
    <local:ViewModel/>
</ContentPage.BindingContext>					  
</picker:SfPicker>
public class ViewModel
{
    public ICommand DeclineCommand { get; set; }
    public ViewModel()
    {
        DeclineCommand = new Command(ActionButtonCanceled);
    }
    private void ActionButtonCanceled()
    {
        // To do your requirement here.
    }
}