Customizing the WinUI Time Picker: A Complete Guide
Tags: winui, csharp, dotnet, desktop
Published: 2021-11-26 13:20:04

---
title: Customizing the WinUI Time Picker: A Complete Guide
published: true
date: 2021-11-26 11:47:04 UTC
tags: winui, csharp, dotnet, desktop
canonical_url: https://www.syncfusion.com/blogs/post/customizing-the-winui-time-picker-a-complete-guide.aspx
cover_image: https://www.syncfusion.com/blogs/wp-content/uploads/2021/11/Customizing-the-WinUI-Time-Picker-A-Complete-Guide-672x372.png
---

Our Syncfusion [WinUI Time Picker](https://www.syncfusion.com/winui-controls/time-picker "Link to WinUI Time Picker") control provides an intuitive, touch-friendly interface for selecting times from a drop-down spinner quickly. It supports different time formats, editing times with validation, and a watermark text display. It also allows users to select or enter a time and clear the selected time.

In this blog, we will learn how to add the WinUI Time Picker control to your application and customize its marvelous features!

## Getting started with the WinUI Time Picker

Follow these steps to manually add the WinUI Time Picker control to the XAML file of your application:

1. First, create a project using the instructions provided in the [WinUI 3 desktop app for C# and .NET 5](https://docs.microsoft.com/en-us/windows/apps/winui/winui3/get-started-winui3-for-desktop "Documentation link to Create a WinUI 3 app") documentation.
2. Then, install the [Syncfusion.Editors.WinUI](https://www.nuget.org/packages/Syncfusion.Editors.WinUI "Link to the Syncfusion.Editors.WinUI NuGet Package") NuGet package in the project.
3. Now, import the **Syncfusion.UI.Xaml.Editors** control namespace in the XAML page.
4. Finally, initialize the WinUI TimePicker control. Refer to the following code example.
```html
<Window
    x:Class="WinUI_ TimePicker.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:WinUI_TimePicker "
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:editors="using:Syncfusion.UI.Xaml.Editors"
    mc:Ignorable="d">
 
    <Grid>
        <editors:SfTimePicker x:Name=“timePicker”
            HorizontalAlignment="Center"
            VerticalAlignment="Top"
            />
    </Grid>
</Window>
```

![Adding WinUI Time Picker Control to Application](https://www.syncfusion.com/blogs/wp-content/uploads/2021/11/Adding-WinUI-Time-Picker-Control-to-Application.png)
<figcaption>Adding WinUI Time Picker Control to Application</figcaption>

Thus, we have included the Syncfusion WinUI 3 Time Picker control in the application. Now, let’s see how to customize its features.

## Limit the available time

You can restrict users to selecting time values within a minimum and maximum range using the **MinTime** and **MaxTime** properties.

By default, the value of MinTime is 1/1/1921 10:37:16 PM and MaxDate is  12/31/2121 10:37:16 PM. You can change these to limit users, for example, to selecting travel times in a day within the available time range.

Refer to the following code example.

```csharp
public sealed partial class MainWindow : Window
{
    public MainWindow()
    {
        this.InitializeComponent();
        SfTimePicker timePicker = new SfTimePicker();
        timePicker.HorizontalAlignment = HorizontalAlignment.Center;
        timePicker.VerticalAlignment = VerticalAlignment.Center;
        timePicker.MinTime = new DateTimeOffset(DateTime.Now.AddMinutes(-2));
        timePicker.MaxTime = new DateTimeOffset(DateTime.Now.AddMinutes(2)); 
        this.Content = timePicker;
    }
}
```

![Setting minimum time in WinUI Time Picker](https://www.syncfusion.com/blogs/wp-content/uploads/2021/11/Setting-minimum-time-in-WinUI-Time-Picker.png) 
![Setting maximum time in WinUI Time Picker](https://www.syncfusion.com/blogs/wp-content/uploads/2021/11/Setting-maximum-time-in-WinUI-Time-Picker.png)
<figcaption>Setting Minimum and Maximum Time in WinUI Time Picker</figcaption>

## Restrict specific times

You can restrict the users from selecting specific times using the **BlackoutTimes** collection property.

By default, the value of the **BlackoutTimes** property is null. By changing it, you can indicate the times that don’t have any transportation available.

Refer to the following code example.

```csharp
 public class ViewModel
{       
    public DateTimeOffset? SelectedTime { get; set; }
    public DateTimeOffsetCollection BlackoutTimes { get; set; }
    public ViewModel()
    {
        SelectedTime = DateTimeOffset.Now.Date;
        BlackoutTimes = new DateTimeOffsetCollection();
        BlackoutTimes.Add(new DateTimeOffset(DateTimeOffset.Now.Year, DateTimeOffset.Now.Month, DateTimeOffset.Now.Day, 0, 3, 0, DateTimeOffset.Now.Offset));
        BlackoutTimes.Add(new DateTimeOffset(DateTimeOffset.Now.Year, DateTimeOffset.Now.Month, DateTimeOffset.Now.Day, 0, 58, 0, DateTimeOffset.Now.Offset));
        BlackoutTimes.Add(new DateTimeOffset(DateTimeOffset.Now.Year, DateTimeOffset.Now.Month, DateTimeOffset.Now.Day, 1, 0, 0, DateTimeOffset.Now.Offset));
        BlackoutTimes.Add(new DateTimeOffset(DateTimeOffset.Now.Year, DateTimeOffset.Now.Month, DateTimeOffset.Now.Day, 3, 0, 0, DateTimeOffset.Now.Offset));
        BlackoutTimes.Add(new DateTimeOffset(DateTimeOffset.Now.Year, DateTimeOffset.Now.Month, DateTimeOffset.Now.Day, 9, 0, 0, DateTimeOffset.Now.Offset));
        BlackoutTimes.Add(new DateTimeOffset(DateTimeOffset.Now.Year, DateTimeOffset.Now.Month, DateTimeOffset.Now.Day, 10, 0, 0, DateTimeOffset.Now.Offset));
    }
}
```

![Setting Blackout Times in WinUI Time Picker](https://www.syncfusion.com/blogs/wp-content/uploads/2021/11/Setting-Blackout-Times-in-WinUI-Time-Picker.png)
<figcaption>Setting Blackout Times in WinUI Time Picker</figcaption>

By default, the Time Picker allows you to set an empty value in the editor using the **SelectedTime** property. You can keep users from assigning empty values by setting the value of the **AllowNull** property to false. This way, you can instruct users to fill the mandatory fields. The default value of the SelectedTime property is null and the AllowNull property is true.

## Cancel the selected time that is being changed

The WinUI Time Picker will notify you whenever you select a time in the dropdown or assign a new time value to the **SelectedTime** property by triggering the **SelectedTimeChanging** event.

Users are restricted from selecting a blackout time from a dropdown; however, users can give text input through the editor. If the currently selected time is invalid (a blockout time), then you can cancel updating the value of the **SelectedTime** property with ease using the  **SelectedTimeChanging** event.

The **SelectedTimeChanging** event contains the following properties:

- OldTime – Gets the previously selected time.
- NewTime – Gets the currently selected time.
- Cancel – Gets or sets whether to cancel the selected time value update.

**Note:** The SelectedTimeChanging event is called before the [SelectedTimeChanged](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Editors.SfTimePicker.html#Syncfusion_UI_Xaml_Editors_SfTimePicker_SelectedTimeChanged "Link to the SelectedTimeChanged event of the WinUI Time Picker") event when a time is selected.

Refer to the following code example.

```csharp
private void TimePicker_SelectedTimeChanging(object sender, TimeChangingEventArgs e)
{
    var oldTime = e.OldTime;
    var newTime = e.NewTime;

    if (oldTime > newTime)
    {
        //Cancels the selected time change.
        e.Cancel = true;
    }
}

private void TimePicker_SelectedTimeChanged(object sender, SelectedDateTimeChangedEventArgs e)
{
    var oldTime = e.OldDateTime;
    var newTime = e.NewDateTime;
}
```

## Show watermark

You can display hints or information using the **PlaceHolderText** property when no time is selected or the value of the **SelectedTime** property is null.

```html
<editors:SfTimePicker x:Name=“timePicker”
            HorizontalAlignment="Center"
            VerticalAlignment="Top"
            PlaceholderText="HH:MM"
            />
```

![WinUI Time Picker Showing Watermark](https://www.syncfusion.com/blogs/wp-content/uploads/2021/11/WinUI-Time-Picker-Showing-Watermark.png)
<figcaption>WinUI Time Picker Showing Watermark</figcaption>

## Change the clock type

You can easily change the time format used in the dropdown using the **ClockIdentifier** property. The default value of the ClockIdentifier property is 12HourClock.

Refer to the following code example. Here, we have set the 24HourClock time format to the Time Picker control.

```html
<Grid>
        <editors:SfTimePicker x:Name=“timePicker”
            HorizontalAlignment="Center"
            ClockIdentifier="24HourClock"
            VerticalAlignment="Center"
            />
 </Grid>
```

![24 Hours Time Format in WinUI Time Picker Control](https://www.syncfusion.com/blogs/wp-content/uploads/2021/11/24-Hours-Time-Format-in-WinUI-Time-Picker-Control.png)
<figcaption>24-Hour Time Format in WinUI Time Picker Control</figcaption>

## Change the language

You can also localize the Time Picker control to assist worldwide travelers speaking different languages using the **Language** property. The default value of the Language property is en-US. Also, find the distinct [languages](https://docs.microsoft.com/en-us/openspecs/office_standards/ms-oe376/6c085406-a698-4e12-9d4d-c3b0ee3dbc4a "Documentation link to the language types supported in the WinUI Time Picker") supported in the Time Picker control.

Refer to the following code example. Here, ar-SA refers to Arabic- Saudi Arabia.

```html
<Grid>
        <editors:SfTimePicker x:Name=“timePicker”
            HorizontalAlignment="Center"
            Language="ar-SA"
            VerticalAlignment="Top"
            />
</Grid>
```

![WinUI Time Picker Language Set to Arabic](https://www.syncfusion.com/blogs/wp-content/uploads/2021/11/WinUI-Time-Picker-Language-Set-to-Arabic.png)
<figcaption>WinUI Time Picker Language Set to Arabic</figcaption>

The Time Picker control updates the flow direction visually based on the applied language type. By default, the value of the FlowDirection property is LeftToRight.

Refer to the following code example.

```html
<Grid>
        <editors:SfTimePicker x:Name=“timePicker”
            HorizontalAlignment="Center"
            Language="ar-SA"
            FlowDirection="LeftToRight"
            VerticalAlignment="Center"
            />
</Grid>
```

![WinUI Time Picker Rendered With Left-to-Right Flow](https://www.syncfusion.com/blogs/wp-content/uploads/2021/11/WinUI-Time-Picker-Rendered-With-Left-to-Right-Flow-Direction.png)
<figcaption>WinUI Time Picker Rendered With Left-to-Right Flow</figcaption>

## Customize the dropdown button

You can customize the dropdown button in the WinUI Time Picker control using the **DropDownButtonTemplate** property. The default value of the **DropDownButtonTemplate** is null.

Refer to the following code example.

```html
<Grid>
    <editors:SfTimePicker x:Name=“timePicker”
            HorizontalAlignment="Center"
            VerticalAlignment="Center"
            >
        <editors:SfTimePicker.DropDownButtonTemplate>
            <DataTemplate>
                <Path Data="M30.299999,0L29.700008,2.7000046C29.700008,2.8000031,29.700008,2.9000015,29.600002,3.0999985L29.600002,3.2000046C29.500012,3.4000015,29.299999,3.7000046,29.000012,4L21.700007,11.800003 25.900005,29 23.1,32 16.1,17.599998 10.6,23.5 11.1,28 9.0000011,30.300003 6.5000006,25.099998 1.7000046,22.400002 3.9000021,20.099998 8.2000056,20.700005 13.700006,14.800003 0,7.2000046 2.7000047,4.3000031 19.1,8.9000015 26.299999,1.2000046C26.600002,0.90000153,26.900005,0.70000458,27.200008,0.59999847L27.299999,0.59999847 27.600002,0.59999847z" Stretch="Uniform" Fill="Black" Width="20" Height="20" />
            </DataTemplate>
        </editors:SfTimePicker.DropDownButtonTemplate>
    </editors:SfTimePicker>
</Grid>
```

![Customizing the WinUI Time Picker Drop-down Button](https://www.syncfusion.com/blogs/wp-content/uploads/2021/11/Customizing-the-WinUI-Time-Picker-Drop-down-Button.png)
<figcaption>Customizing the WinUI Time Picker Dropdown Button</figcaption>

Also, you can open the dropdown button programmatically by setting the value of the **IsOpen** property to true. By default, the value of the **IsOpen** property is false.

## Change dropdown alignment and height

Easily modify the position of the dropdown from the editor using the **DropDownPlacement** property. By default, the value of the **DropDownPlacement** property is Auto. The dropdown smartly shifts its alignment based on the available space in the application.

You can also change the height of the dropdown to limit the number of time values shown using the **DropDownHeight** property. The default value of the DropDownHeight property is NaN.

Refer to the following code example.

```html
<editors:SfTimePicker x:Name=“timePicker”
            DropDownPlacement="Right"
            DropDownHeight="200"
            />
```

![Customizing the Drop-down Alignment in WinUI Time Picker](https://www.syncfusion.com/blogs/wp-content/uploads/2021/11/Customizing-the-Drop-down-Alignment-in-WinUI-Time-Picker.png)
<figcaption>Customizing the Dropdown Alignment in WinUI Time Picker</figcaption>

## Customize the dropdown header

You can add hints in the drop-down header using the **DropDownHeader** property by setting the value of the **ShowDropDownHeader** property to true. Also, you can customize the header template of the dropdown using the **DropDownHeaderTemplate** property.

By default, the value of the **DropDownHeader** property is string.Empty, **ShowDropDownHeader** is false and **DropDownHeaderTemplate** is null.

Refer to the following code example.

```html
<editors:SfTimePicker x:Name=“timePicker”
            HorizontalAlignment="Center"
            VerticalAlignment="Top"
            ShowDropDownHeader="True"
            DropDownHeader="Time of departure"
            ShowColumnHeaders="True"
            >
    <editors:SfTimePicker.DropDownHeaderTemplate>
        <DataTemplate>
            <StackPanel Orientation="Horizontal">
                       <TextBlock HorizontalAlignment="Center"
                               VerticalAlignment="Center"
                               Foreground="DarkOliveGreen"
                               Text="{Binding }"
                               />

                   <Path Data="M15.131557,14.452016L12.919611,19.613015 17.016516,19.613015 20.702427,14.452016z M2.1861391,5.1610125L2.9891357,12.387015 14.450447,12.387015 22.708384,12.38701 28.387038,12.387015C29.241036,12.387015 29.935033,11.693014 29.935033,10.839014 29.935033,9.9850143 29.241036,9.2900136 28.387038,9.2900136L22.73777,9.2900136 22.709431,9.2909997 14.451491,9.2909997 14.424871,9.2900136 5.5051265,9.2900136C5.0611281,9.2900136,4.6661296,9.0060142,4.5261302,8.5850137L3.3851342,5.1610125z M12.91953,2.0650023L15.131535,7.2259973 20.703478,7.2259973 17.016518,2.0650023z M11.354611,0L17.547516,0C17.881496,-1.9915387E-07,18.19448,0.16200235,18.38747,0.43299852L23.23983,7.226013 28.387038,7.226013C30.379031,7.226013 32.000026,8.8470138 32.000026,10.839014 32.000026,12.831015 30.379031,14.452016 28.387038,14.452016L23.239108,14.452016 18.387485,21.245015C18.193489,21.516017,17.881496,21.677017,17.547503,21.677017L11.353647,21.677017C11.007655,21.677017 10.683663,21.503017 10.492668,21.214015 10.301672,20.923017 10.268673,20.558015 10.405669,20.239015L12.885867,14.452016 2.0651398,14.452016C1.5381413,14.452016,1.0971432,14.056015,1.0381432,13.533016L0.0061473846,4.2430118C-0.025852203,3.9520119 0.068146706,3.6590117 0.2631464,3.4400118 0.45914555,3.2220116 0.73914433,3.0970116 1.0321436,3.0970116L4.1291313,3.0970116C4.5741301,3.0970116,4.9681282,3.3810118,5.1081276,3.8020118L6.2491236,7.226013 12.88616,7.226013 10.405649,1.4389951C10.268567,1.1199948 10.301647,0.75399758 10.492562,0.46400441 10.6836,0.17500284 11.00757,-1.9915387E-07 11.354611,0z" 
                                Width="25"
                                Height="25"
                                Fill="DarkOliveGreen"
                                Stretch="Uniform"
                                Margin="5,5,5,5"
                                HorizontalAlignment="Center"
                                VerticalAlignment="Center"
                              />
            </StackPanel>
        </DataTemplate>
    </editors:SfTimePicker.DropDownHeaderTemplate>
</editors:SfTimePicker>
```

![WinUI Time Picker Drop-down Header Customization](https://www.syncfusion.com/blogs/wp-content/uploads/2021/11/WinUI-Time-Picker-Drop-down-Header-Customization.png)
<figcaption>WinUI Time Picker Dropdown Header Customization</figcaption>

## Hide the dropdown columns header

By default, when you open the dropdown of the WinUI Time Picker control, the headers for each field column will be displayed to represent the field names. Also, you can hide these columns’ header by setting the value of the **ShowColumnHeaders** to false. The default value of the **ShowColumnHeaders** property is true.

Refer to the following code example.

```html
<editors:SfTimePicker x:Name=“timePicker”
            HorizontalAlignment="Center"
            VerticalAlignment="Center"
            ShowColumnHeaders="False"
            />
```

![Hiding the Drop-Down Header in WinUI Time Picker](https://www.syncfusion.com/blogs/wp-content/uploads/2021/11/Hiding-the-Drop-Down-Header-in-WinUI-Time-Picker.png)
<figcaption>Hiding the Dropdown Header in WinUI Time Picker</figcaption>

## Customize the appearance of item cells in the dropdown

You can also customize the appearance of the item cells in the dropdown using the  **ItemContainerStyle** and **ItemTemplateSelector** properties. The default value of the ItemContainerStyle and ItemTemplateSelector properties is null.

Refer to the following code.

```csharp
public class TimeItemTemplateSelector : DataTemplateSelector
{
    public DataTemplate DefaultTemplate { get; set; }
    public DataTemplate AlarmTemplate { get; set; }
    public DataTemplate SleepTemplate { get; set; }
    public DataTemplate GroupMeetingTemplate { get; set; }

    protected override DataTemplate SelectTemplateCore(object item, DependencyObject container)
    {
        DateTimeFieldItemInfo dateTimeField = item as DateTimeFieldItemInfo;
        if (dateTimeField.Field == DateTimeField.Hour12)
        {
            switch (dateTimeField.DateTime.Value.Hour)
            {
                case 2:
                    return SleepTemplate as DataTemplate;
                case 5:
                    return AlarmTemplate as DataTemplate;
                case 10:
                    return GroupMeetingTemplate as DataTemplate;
                case 14:
                    return GroupMeetingTemplate as DataTemplate;
                case 17:
                    return AlarmTemplate as DataTemplate;
                case 22:
                    return SleepTemplate as DataTemplate;
            }
        }

        return base.SelectTemplateCore(item, container);
    }
}
```

![Drop-Down Item Cells Customization in WinUI Time Picker](https://www.syncfusion.com/blogs/wp-content/uploads/2021/11/Drop-Down-Item-Cells-Customization-in-WinUI-Time-Picker-1.png)
<figcaption>Drop-Down Item Cells Customization in WinUI Time Picker</figcaption>

**Note:** For more details, refer to [Customize the cell’s style in dropdown spinner](https://help.syncfusion.com/winui/time-picker/dropdown-spinner-customization#customize-the-cells-appearance-in-dropdown-spinner "Documentation link to Customize the cell’s appearance in dropdown spinner in WinUI Time Picker") documentation.

Also, customize all the field columns and item cells inside the dropdown using the **TimeFieldPrepared** event.

Refer to the following code example.

```csharp
/// <summary>
/// Get the ItemsSource for minute or second column.
/// </summary>
/// <returns>Return the ItemsSource for minute or second column.</returns>
private static ObservableCollection<string> GetMinutesOrSeconds(string pattern)
{
    ObservableCollection<string> minutes = new ObservableCollection<string>();
    NumberFormatInfo provider = new NumberFormatInfo();
    for (int i = 0; i < 60; i = i + 5)
    {
        if (i > 9 || pattern == "%s" || pattern == "{second.integer}" || pattern == "%m" || pattern == "{minute.integer}")
        {
            minutes.Add(i.ToString(provider));
        }
        else
        {
            minutes.Add("0" + i.ToString(provider));
        }
    }

    return minutes;
}

private void SfTimePicker_TimeFieldPrepared(object sender, DateTimeFieldPreparedEventArgs e)
{
    if (e.Column != null)
    {
        //Minutes interval changed as 5.
        if (e.Column.Field == DateTimeField.Minute || e.Column.Field == DateTimeField.Second)
        {
            e.Column.ItemsSource = GetMinutesOrSeconds(e.Column.Format);
        }
        if (e.Column.Field == DateTimeField.Hour12)
        {
            e.Column.Header = "Hr";
            e.Column.ItemHeight = 60;
            e.Column.ItemWidth = 100;
        }
        else if (e.Column.Field == DateTimeField.Minute)
        {
            e.Column.Header = "Min";
            e.Column.ItemHeight = 40;
            e.Column.ItemWidth = 100;
        }
        else if (e.Column.Field == DateTimeField.Meridiem)
        {
            e.Column.Header = "AM/PM";
            e.Column.ItemHeight = 60;
            e.Column.ItemWidth = 100;
        }                    
        e.Column.ShowHeader = true;
       
    }
}
```

![Customizing the Drop-down’s Field Column and Item Cells in WinUI Time Picker](https://www.syncfusion.com/blogs/wp-content/uploads/2021/11/Customizing-the-Drop-down%E2%80%99s-Field-Column-and-Item-Cells-in-WinUI-Time-Picker.png)
<figcaption>Customizing the Dropdown’s Field Column and Item Cells in WinUI Time Picker</figcaption>

## Apply custom time intervals

You can apply [custom time intervals](https://help.syncfusion.com/winui/time-picker/time-restriction#custom-time-interval "Documentation link to Custom time interval in WinUI Time Picker") to restrict the users to selecting times from specific minute or hour intervals by using the TimeFieldPrepared event.

Refer to the following code.

```csharp
/// <summary>
/// Get the ItemsSource for minute or second column.
/// </summary>
/// <returns>Return the ItemsSource for minute or second column.</returns>
private static ObservableCollection<string> GetMinutesOrSeconds(string pattern)
{
    ObservableCollection<string> minutes = new ObservableCollection<string>();
    NumberFormatInfo provider = new NumberFormatInfo();
    for (int i = 0; i < 60; i = i + 5)
    {
        if (i > 9 || pattern == "%s" || pattern == "{second.integer}" || pattern == "%m" || pattern == "{minute.integer}")
        {
            minutes.Add(i.ToString(provider));
        }
        else
        {
            minutes.Add("0" + i.ToString(provider));
        }
    }

    return minutes;
}

private void SfTimePicker_TimeFieldPrepared(object sender, DateTimeFieldPreparedEventArgs e)
{
    if (e.Column != null)
    {
        //Minutes interval changed as 5.
        if (e.Column.Field == DateTimeField.Minute || e.Column.Field == DateTimeField.Second)
        {
            e.Column.ItemsSource = GetMinutesOrSeconds(e.Column.Format);
        }
}
```

![Applying Custom Time Interval in WinUI Time Picker](https://www.syncfusion.com/blogs/wp-content/uploads/2021/11/Applying-Custom-Time-Interval-in-WinUI-Time-Picker.png)
<figcaption>Applying Custom Time Interval in WinUI Time Picker</figcaption>

## GitHub reference

For more details, refer to the [WinUI 3 Time Picker GitHub demos](https://github.com/SyncfusionExamples/syncfusion-winui-tools-timepicker-examples "Link to WinUI Time Picker demos on GitHub") and [documentation](https://help.syncfusion.com/winui/time-picker/getting-started "Documentation link to Getting Started with WinUI Time Picker").

## Conclusion

Thanks for reading! In this blog post, we have seen how to get started with the [WinUI Time Picker control](https://www.syncfusion.com/winui-controls/time-picker "Link to WinUI Time Picker") and customize its features. We hope it fits your expectations and requirements for choosing a time value. Try out our WinUI Time Picker control and leave your feedback!

You can download the other WinUI demos from [GitHub](https://github.com/syncfusion/winui-demos/tree/master/editor "Link to Syncfusion WinUI demos on GitHub") and [Microsoft Store](https://www.microsoft.com/en-us/p/syncfusion-winui-controls-gallery/9n0fp16ddc06 "Link to Syncfusion WinUI demos on the Microsoft Store").

For existing customers, the newest version of Essential Studio is available for download from the [license and downloads page](https://www.syncfusion.com/account/downloads "Link to license and download page of Essential Studio"). If you are not yet a customer, you can try our 30-day [free trial](https://www.syncfusion.com/downloads "Link to the free evaluation of the Syncfusion Essential Studio") to check out these new features.

You can also contact us through [support forums](https://www.syncfusion.com/forums "Link to the Syncfusion support forum"), [feedback portal](https://www.syncfusion.com/feedback "Link to Syncfusion Feedback Portal"), or the [Direct-Trac support system](https://www.syncfusion.com/account/login "Link to the Syncfusion support system Direct Trac"). We are always happy to assist you!

## Related blogs

- [Exploring the Calendar Types in WinUI Scheduler](https://dev.to/syncfusion/exploring-the-calendar-types-in-winui-scheduler-5epg "Link to Exploring the Calendar Types in WinUI Scheduler blog")
- [New WinUI Segmented Control Is Here!](https://dev.to/kartik110895/new-winui-segmented-control-is-here-38i-temp-slug-3162889 "Link to New WinUI Segmented Control Is Here! blog")
- [WinUI Scheduler: A Smart Tool to Handle Appointments in a Hospital](https://dev.to/karthickramasamy08/winui-scheduler-a-smart-tool-to-handle-appointments-in-a-hospital-90a-temp-slug-2163934 "Link to WinUI Scheduler: A Smart Tool to Handle Appointments in a Hospital blog")
- [Exploring Column Types in WinUI 3 DataGrid](https://dev.to/karthickramasamy08/exploring-column-types-in-winui-3-datagrid-4k9d-temp-slug-6223587 "Link to Exploring Column Types in WinUI 3 DataGrid blog")