Events in .NET MAUI Time Picker (SfTimePicker)

21 Jul 202612 minutes to read

Selection changed event

The SelectionChanged event is raised when the time selection changes in the SfTimePicker.

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:picker="clr-namespace:Syncfusion.Maui.Picker;assembly=Syncfusion.Maui.Picker">
    <picker:SfTimePicker x:Name="picker"
                         SelectionChanged="OnTimePickerSelectionChanged">
    </picker:SfTimePicker>
</ContentPage>
using Syncfusion.Maui.Picker;
. . .

SfTimePicker picker = new SfTimePicker();
picker.SelectionChanged += this.OnTimePickerSelectionChanged;
this.Content = picker;

private void OnTimePickerSelectionChanged(object sender, TimePickerSelectionChangedEventArgs e)
{
    var oldTime = e.OldValue;
    var newTime = e.NewValue;
}

NOTE

  • In SfTimePicker, the SelectedTime is confirmed 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.
  • When IsSelectionImmediate is set to true, the SelectedTime is updated immediately upon selection.
  • When IsSelectionImmediate is set to false by default, the SelectedTime is confirmed only when the OK button in the footer view is tapped.

Events in dialog mode

In SfTimePicker, three events are used while the time picker is in Dialog mode.

Opened event

The Opened event occurs when the picker popup is opened in the SfTimePicker.

  • Sender: This contains the SfTimePicker object.

  • EventArgs: EventArgs is used for this event.

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:picker="clr-namespace:Syncfusion.Maui.Picker;assembly=Syncfusion.Maui.Picker">
    <picker:SfTimePicker x:Name="picker"
                         Opened="OnTimePickerPopUpOpened">
    </picker:SfTimePicker>
</ContentPage>
using Syncfusion.Maui.Picker;
. . .

SfTimePicker picker = new SfTimePicker();
picker.Opened += this.OnTimePickerPopUpOpened;
this.Content = picker;

private void OnTimePickerPopUpOpened(object sender, EventArgs e)
{
    // If you need to open the picker, set the IsOpen property to true.
    this.picker.IsOpen = true;
}

Closing event

The Closing event occurs when the picker popup is closing in the SfTimePicker.

  • Sender: This contains the SfTimePicker object.

  • EventArgs: CancelEventArgs is used to describe a cancelable event.

    • Cancel: Indicates whether the close operation should be canceled.
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:picker="clr-namespace:Syncfusion.Maui.Picker;assembly=Syncfusion.Maui.Picker">
    <picker:SfTimePicker x:Name="picker"
                         Closing="OnTimePickerPopUpClosing">
    </picker:SfTimePicker>
</ContentPage>
using Syncfusion.Maui.Picker;
. . .

SfTimePicker picker = new SfTimePicker();
this.picker.Closing += this.OnTimePickerPopUpClosing;
this.Content = picker;

private void OnTimePickerPopUpClosing(object sender, CancelEventArgs e)
{
    // To prevent the picker from closing, set e.Cancel to true.
    e.Cancel = true;
}

Closed event

The Closed event occurs after the picker popup is closed in the SfTimePicker.

  • Sender: This contains the SfTimePicker object.

  • EventArgs: EventArgs is used for this event.

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:picker="clr-namespace:Syncfusion.Maui.Picker;assembly=Syncfusion.Maui.Picker">
    <picker:SfTimePicker x:Name="picker"
                         Closed="OnTimePickerPopUpClosed">
    </picker:SfTimePicker>
</ContentPage>
using Syncfusion.Maui.Picker;
. . .

SfTimePicker picker = new SfTimePicker();
picker.Closed += this.OnTimePickerPopUpClosed;
this.Content = picker;

private void OnTimePickerPopUpClosed(object sender, EventArgs e)
{
    // If you need to close the picker, set the IsOpen property to false.
    this.picker.IsOpen = false;
}

The SfTimePicker footer view provides two events. These events are not raised while the footer view is not visible.

OkButtonClicked event

The OkButtonClicked event occurs when the OK button is clicked in the SfTimePicker footer view. This event is not raised when the footer view or OK button is not visible.

  • Sender: This contains the SfTimePicker object.

  • EventArgs: EventArgs is used for this event.

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:picker="clr-namespace:Syncfusion.Maui.Picker;assembly=Syncfusion.Maui.Picker">
    <picker:SfTimePicker x:Name="picker"
                         OkButtonClicked="OnTimePickerOkButtonClicked">
    </picker:SfTimePicker>
</ContentPage>
using Syncfusion.Maui.Picker;
. . .

SfTimePicker picker = new SfTimePicker();
picker.OkButtonClicked += this.OnTimePickerOkButtonClicked;
this.Content = picker;

private void OnTimePickerOkButtonClicked(object sender, EventArgs e)
{
    // Use this event to update the selected item in the Time Picker.
}

CancelButtonClicked event

The CancelButtonClicked event occurs when the cancel button is clicked in the SfTimePicker footer view. This event is not raised when the footer view is not visible.

  • Sender: This contains the SfTimePicker object.

  • EventArgs: EventArgs is used for this event.

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:picker="clr-namespace:Syncfusion.Maui.Picker;assembly=Syncfusion.Maui.Picker">
    <picker:SfTimePicker x:Name="picker"
                         CancelButtonClicked="OnTimePickerCancelButtonClicked">
    </picker:SfTimePicker>
</ContentPage>
using Syncfusion.Maui.Picker;
. . .

SfTimePicker picker = new SfTimePicker();
picker.CancelButtonClicked += this.OnTimePickerCancelButtonClicked;
this.Content = picker;

private void OnTimePickerCancelButtonClicked(object sender, EventArgs e)
{
    // This event is used to cancel the selected item in the time picker.
}

Commands

NOTE

Add using System.Windows.Input; to use the ICommand type shown in the following examples.

SelectionChangedCommand

The SfTimePicker includes a built-in event called SelectionChanged that is triggered whenever the time selection changes. This event can be invoked through the SelectionChangedCommand. The bound command does not receive any parameter.

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:picker="clr-namespace:Syncfusion.Maui.Picker;assembly=Syncfusion.Maui.Picker">
    <ContentPage.BindingContext>
        <local:ViewModel/>
    </ContentPage.BindingContext>
    <picker:SfTimePicker x:Name="picker"
                        SelectionChangedCommand="{Binding SelectionChangedCommand}">
    </picker:SfTimePicker>
</ContentPage>
using Syncfusion.Maui.Picker;
using System.Windows.Input;
. . .

SfTimePicker picker = new SfTimePicker();
this.Content = picker;
public class ViewModel
{
    public ICommand SelectionChangedCommand { get; set; }
    public ViewModel()
    {
        SelectionChangedCommand = new Command(SelectionChanged);
    }
    private void SelectionChanged()
    {
        // To do your requirement here.
    }
}

AcceptCommand

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

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:picker="clr-namespace:Syncfusion.Maui.Picker;assembly=Syncfusion.Maui.Picker">
    <ContentPage.BindingContext>
        <local:ViewModel/>
    </ContentPage.BindingContext>
    <picker:SfTimePicker x:Name="picker"
                        AcceptCommand="{Binding AcceptCommand}">
    </picker:SfTimePicker>
</ContentPage>
using Syncfusion.Maui.Picker;
using System.Windows.Input;
. . .

SfTimePicker picker = new SfTimePicker();
this.Content = picker;
public class ViewModel
{
    public ICommand AcceptCommand { get; set; }
    public ViewModel()
    {
        AcceptCommand = new Command(ActionButtonClicked);
    }
    private void ActionButtonClicked()
    {
        // To do your requirement here.
    }
}

DeclineCommand

The SfTimePicker includes a built-in event called CancelButtonClicked, which is triggered when the cancel button is tapped. This event can be invoked through the DeclineCommand. The bound command does not receive any parameter.

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:picker="clr-namespace:Syncfusion.Maui.Picker;assembly=Syncfusion.Maui.Picker">
    <ContentPage.BindingContext>
        <local:ViewModel/>
    </ContentPage.BindingContext>
    <picker:SfTimePicker x:Name="picker"
                        DeclineCommand="{Binding DeclineCommand}">
    </picker:SfTimePicker>
</ContentPage>
using Syncfusion.Maui.Picker;
using System.Windows.Input;
. . .

SfTimePicker picker = new SfTimePicker();
this.Content = picker;
public class ViewModel
{
    public ICommand DeclineCommand { get; set; }
    public ViewModel()
    {
        DeclineCommand = new Command(ActionButtonCanceled);
    }
    private void ActionButtonCanceled()
    {
        // To do your requirement here.
    }
}