Events in .NET MAUI Picker (SfPicker)

21 Jul 20267 minutes to read

Six events are available for a .NET MAUI Picker when it is in Dialog mode:

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

Opened

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

Closing

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

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

SelectionChanged

The SelectionChanged event is raised after the selected index changes 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.
  • When IsSelectionImmediate is set to true, the SelectedIndex and SelectedItem are updated immediately upon selection.
  • When IsSelectionImmediate is set to false by default, the selection is confirmed only when the OK button in the footer view is tapped.

OkButtonClicked

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

CancelButtonClicked

The CancelButtonClicked is raised after the Cancel button is 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, System.ComponentModel.CancelEventArgs e)
    {
        // Stop the close action by setting `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)
    {
        // Handle the OK button click.
    }

    private void Picker_CancelButtonClicked(object sender, EventArgs e)
    {
        // Handle the Cancel button click.
    }

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.
    }
}