In our Xamarin Forms, SfPicker control has multi column support. Using this we can populate Hour, Minute and Format values providing as a collection to SfPicker control.
We have demonstrated how to create CustomTimePicker using Picker control in the following steps.
Step 1: We have created custom class named as “CustomTimePicker”. This class should inherit from SfPicker control.
Step 2: After that create four ObservableCollection with object type in CustomTimePicker class.
Time Collection, Minute Collection, Hour Collection and Format Collection.
Time Collection->We have added all the three collections.
Minute Collection -> We have added minutes from 0 to 59.
Hour Collection -> We have added hours from 1 to 12.
Format Collection -> We have added two format AM and PM.
The below code demonstrates Time collection creation.
Step 3: We have defined each column headers “Hour”, “Minute” and “Format” using ColumnHeaderText property of SfPicker control. The below code demonstrates how to define header for each column of SfPicker control.
Step 4: Finally we have enabled SfPicker header, Column header and footer using ShowHeader , ShowFooter and ShowColumnHeader properties.
Step 5: We have added the CustomTimePicker control in main XAML page. Please refer the below code snippets.
Please find the below screen shot using the above codes.
We have attached TimePicker sample for your reference. Please download the sample from the following link.
|Article ID:||Published Date:||Last Revised Date:||Platform:||Control:|