Time Picker mode in .NET MAUI Time Picker (SfTimePicker)

30 Jun 20256 minutes to read

The Time picker mode is specified in the picker property enumeration, which is used to display the time picker based on the modes. It offers three modes: Default, Dialog, and RelativeDialog. The default picker mode is Default in the SfTimePicker.

Dialog Mode

The dialog mode is used to display the time picker in a pop-up by setting the Mode property to Dialog in SfTimePicker.

<picker:SfTimePicker x:Name="timePicker"
                     Mode="Dialog"/>

SfTimePicker timePicker = new SfTimePicker()
{
    Mode = PickerMode.Dialog
};

this.Content = timePicker;

The Time Picker can be opened programmatically by setting the IsOpen property to true of SfTimePicker. By default, the IsOpen property is false.

Note: This property is automatically changed to false when you close the dialog by clicking outside of it.

<Grid>
    <picker:SfTimePicker x:Name="timepicker"
                         Mode="Dialog"/>
    <Button Text="Open Picker" 
            x:Name="pickerButton"
            Clicked="Button_Clicked"
            HorizontalOptions="Center"
            VerticalOptions="Center"
            HeightRequest="50" 
            WidthRequest="150">
    </Button>
</Grid>
private void Button_Clicked(object sender, System.EventArgs e)
{
    this.timepicker.IsOpen = true;
}

Dialog mode in .NET MAUI Time picker.

Relative Dialog Mode

The relative dialog mode displays the time picker in a pop-up by setting the Mode property to RelativeDialog. It is used to align the picker in a specific position. You can set the position by setting the RelativePosition property in the SfTimePicker.

Relative position

The RelativePosition is specified in the picker property enumeration, which is used to align the picker in a specific position. It provides eight positions such as AlignTop, AlignToLeftOf, AlignToRightOf, AlignBottom, AlignTopLeft, AlignTopRight, AlignBottomLeft, and AlignBottomRight. The default relative position is AlignTop in the SfTimePicker.

The Time Picker can be opened programmatically by setting the IsOpen property to true of SfTimePicker. By default, the IsOpen property is false.

Note: This property is automatically changed to false when you close the dialog by clicking outside of it.

<Grid>
    <picker:SfTimePicker x:Name="timePicker" 
                         Mode="RelativeDialog"
                         RelativePosition="AlignTopLeft">
    </picker:SfTimePicker>
    <Button Text="Open picker" 
            x:Name="pickerButton"
            Clicked="Button_Clicked"
            HorizontalOptions="Center"
            VerticalOptions="Center"
            HeightRequest="50" 
            WidthRequest="150">
    </Button>
</Grid>
private void Button_Clicked(object sender, System.EventArgs e)
{
    this.timepicker.IsOpen = true;
}

Relative view

The RelativeView is specified in the picker’s property enumeration and is used to display the picker dialog relative to a view by setting the Mode property to RelativeDialog. You can set the position by setting the RelativePosition property in the SfTimePicker.

NOTE

It is only applicable in RelativeDialog mode. If no relative view is specified, the picker base will be set as the default relative view.

<Grid>
    <picker:SfTimePicker x:Name="timePicker" 
                         Mode="RelativeDialog"
                         RelativePosition="AlignTopLeft"
                         RelativeView = "{x:Reference pickerButton}">
    </picker:SfTimePicker>
    <Button Text="Open picker" 
            x:Name="pickerButton"
            Clicked="Button_Clicked"
            HorizontalOptions="Center"
            VerticalOptions="Center"
            HeightRequest="50" 
            WidthRequest="150">
    </Button>
</Grid>
private void Button_Clicked(object sender, System.EventArgs e)
{
    this.timepicker.IsOpen = true;
    this.timepicker.RelativeView = pickerButton;
}

Relative dialog mode in .NET MAUI Time picker.

Relative dialog mode in .NET MAUI Time picker.

Custom Popup Size

SfTimePicker allows the display of the Popup to render at any desired size by setting the PopupWidth and PopupHeight properties.

<picker:SfTimePicker x:Name="timePicker" 
                         Mode="Dialog"
                         PopupWidth="300"
                         PopupHeight="400"/>
this.timePicker.PopupWidth = 300;
this.timePicker.PopupHeight = 400;