Advantages of Using Syncfusion WinUI Controls over Framework Controls: Part 2
Tags: csharp, dotnet, winui, desktop
Published: 2022-12-14 12:38:46

---
title: Advantages of Using Syncfusion WinUI Controls over Framework Controls: Part 2
published: true
date: 2022-12-08 11:55:38 UTC
tags: csharp, dotnet, winui, desktop
canonical_url: https://www.syncfusion.com/blogs/post/advantages-of-using-syncfusion-winui-controls-over-framework-controls-part-2.aspx
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/csakygpq6e76daco6azp.png
---

This is the continuation of the [Advantages of Using Syncfusion WinUI Controls over Framework Controls: Part 1](https://www.syncfusion.com/blogs/post/advantages-of-using-syncfusion-winui-controls-over-framework-controls-part-1.aspx "Blog: Advantages of Using Syncfusion WinUI Controls over Framework Controls: Part 1") blog. In this blog, we will look at the features and differences of Syncfusion’s [Calendar](https://www.syncfusion.com/winui-controls/calendar "Syncfusion WinUI Calendar control"), [Calendar Date Picker](https://www.syncfusion.com/winui-controls/calendar-date-picker "Syncfusion WinUI Calendar Date Picker Control"), [Date Picker](https://www.syncfusion.com/winui-controls/date-picker "Syncfusion WinUI Date Picker"), and [Time Picker](https://www.syncfusion.com/winui-controls/time-picker "Syncfusion WinUI Time Picker") controls over the WinUI framework’s native [CalendarView](https://docs.microsoft.com/en-us/uwp/api/windows.ui.xaml.controls.calendarview?view=winrt-22621 "WinUI CalendarView Class"), [CalendarDatePicker](https://docs.microsoft.com/en-us/uwp/api/windows.ui.xaml.controls.calendardatepicker?view=winrt-22621 "WinUI CalendarDatePicker Class"), [DatePicker](https://docs.microsoft.com/en-us/uwp/api/windows.ui.xaml.controls.datepicker?view=winrt-22621 "WinUI DatePicker Class"), and [TimePicker](https://docs.microsoft.com/en-us/uwp/api/windows.ui.xaml.controls.timepicker?view=winrt-22621 "WinUI DatePicker Class") control.

## Calendar

The Calendar control is used to view dates and makes it simple for users to choose a single date, multiple dates, or a range of dates. Let’s see the differences between Syncfusion’s [Calendar](https://www.syncfusion.com/winui-controls/calendar "Syncfusion Advanced WinUI Calendar control") and the WinUI framework’s native [CalendarView](https://docs.microsoft.com/en-us/uwp/api/windows.ui.xaml.controls.calendarview?view=winrt-22621 "WinUI CalendarView Class") controls.

### Built-in calendar views

Syncfusion’s WinUI Calendar provides month, year, decade, and century views to quickly navigate to the desired date, but the WinUI framework CalendarView only has month, year, and decade views.

Refer to the following code example to display the century view.

```xml
xmlns:calendar="using:Syncfusion.UI.Xaml.Calendar"
        <calendar:SfCalendar DisplayMode="Century" />
```

<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2022/12/Century-View-in-Calendar.png" alt="Century View in Calendar" style="width:100%">

  <figcaption>Century View in Calendar</figcaption>

</figure>

### Selection mode

Syncfusion’s Calendar supports [single](https://help.syncfusion.com/winui/calendar/selection#single-selection "Single selection mode in Syncfusion WinUI Calendar control"), [multiple](https://help.syncfusion.com/winui/calendar/selection#multiple-selection "Multiple selection mode in Syncfusion WinUI Calendar control"), and [date range](https://help.syncfusion.com/winui/calendar/selection#select-a-date-range "Select a date range in WinUI Calendar control") selection modes whereas the WinUI native **CalenderView** only supports single and multiple selection modes.

In addition, Syncfusion’s Calendar has support to support to change the [selection highlight mode](https://help.syncfusion.com/winui/calendar/selection#highlight-today-and-selected-date "Highlight today and selected date in WinUI Calendar control") and [selection shape](https://help.syncfusion.com/winui/calendar/selection#change-shape-of-today-and-selected-date "Change shape of today and selected date in WinUI Calendar control"), but the WinUI framework does not support these customizations.

Refer to the following code example of a date range selection.

```xml
xmlns:calendar="using:Syncfusion.UI.Xaml.Calendar"
  <calendar:SfCalendar SelectionMode="Range" SelectionShape="Rectangle" SelectionHighlightMode="Outline"/>
```

<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2022/12/Date-Range-Selection-in-Calendar-1.gif" alt="Date Range Selection in Calendar" style="width:100%">

  <figcaption>Date Range Selection in Calendar</figcaption>

</figure>

### Navigation

Syncfusion’s WinUI Calendar supports restricting [view navigation](https://help.syncfusion.com/winui/calendar/getting-started#navigation-between-views "Navigation between views in WinUI Calendar documentation") by using the [MinDisplayMode](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Calendar.SfCalendar.html?tabs=tabid-1#Syncfusion_UI_Xaml_Calendar_SfCalendar_MinDisplayMode "MinDisplayMode Property of WinUI Calendar") and [MaxDisplayMode](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Calendar.SfCalendar.html?tabs=tabid-1#Syncfusion_UI_Xaml_Calendar_SfCalendar_MaxDisplayMode "MaxDisplayMode Property of WinUI Calendar") properties, and it also supports changing the [navigation direction](https://help.syncfusion.com/winui/calendar/navigation#scrolling-within-a-view "Scrolling within a view in WinUI Calendar documentation") to be either horizontal or vertical. On the other hand, the WinUI framework CalendarView does not have these view navigation restriction and direction features.

Refer to the following code example of view navigation restriction.

```xml
xmlns:calendar="using:Syncfusion.UI.Xaml.Calendar"
<calendar:SfCalendar MinDisplayMode="Month"
                     MaxDisplayMode="Decade"
                     DisplayMode="Month" NavigationDirection="Horizontal"/>
```

<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2022/12/Minimum-and-Maximum-Display-Dates-in-Calendar-1.gif" alt="Minimum and Maximum Display Dates in Calendar" style="width:100%">

  <figcaption>Minimum and Maximum Display Dates in Calendar</figcaption>

</figure>

### Calendar date formats

Syncfusion’s Calendar supports setting different [date formats](https://help.syncfusion.com/winui/calendar/localization-and-formatting#change-date-display-format "Change date display format in WinUI Calendar documentation"), such as abbreviated or full names for a day, month, or week, as well as for the header of a month or year. The WinUI framework’s Calendar supports only a **DayOfWeekFormat** property to customize dates.

Refer to the following code example of date formatting.

```xml
xmlns:calendar="using:Syncfusion.UI.Xaml.Calendar" 
 <calendar:SfCalendar DayFormat="{}{day.integer(2)}"
                      MonthFormat="{}{month.full}"
                      DayOfWeekFormat="{}{dayofweek.abbreviated(3)}"
                      MonthHeaderFormat="{}{month.abbreviated} {year.abbreviated}"/>
```

<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2022/12/Date-Format-Customization-in-Calendar-1.gif" alt="Date Format Customization in Calendar" style="width:100%">

  <figcaption>Date Format Customization in Calendar</figcaption>

</figure>

### Show week number

Syncfusion’s Calendar supports displaying [week numbers](https://help.syncfusion.com/winui/calendar/week-numbers "Week number in WinUI Calendar documentation") in the month view and customizing the week number [rule](https://help.syncfusion.com/winui/calendar/week-numbers#week-rule "Week rule in WinUI Calendar documentation") and [format](https://help.syncfusion.com/winui/calendar/week-numbers#format-week-numbers "Format week numbers in WinUI Calendar documentation"). The WinUI framework does not have week number rule format customization support.

Refer to the following code example to show week numbers in the month view.

```xml
xmlns:calendar="using:Syncfusion.UI.Xaml.Calendar"
      <calendar:SfCalendar ShowWeekNumbers="True" 
                            WeekNumberRule="FirstFullWeek" />
```

<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2022/12/Week-Number-Rule-Format-Customization-in-Calendar.png" alt="Week Number Rule Format Customization in Calendar" style="width:100%">

  <figcaption>Week Number Rule Format Customization in Calendar</figcaption>

</figure>

## Calendar Date Picker

The Syncfusion [Calendar Date Picker](https://www.syncfusion.com/winui-controls/calendar-date-picker "Syncfusion WinUI Calendar Date Picker Control") allows users to pick a date from a calendar display. Let’s see the differences between Syncfusion’s and the [WinUI framework’s](https://learn.microsoft.com/en-us/uwp/api/windows.ui.xaml.controls.calendardatepicker?view=winrt-22621 "WinUI CalendarDatePicker Class") controls.

### Built-in calendar views

Syncfusion’s WinUI Calendar Date Picker provides month, year, decade, and century views to quickly navigate to the desired date, but the WinUI native control only has month, year, and decade views.

<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2022/12/Century-View-in-Calendar-Date-Range-Picker.png" alt="Century View in Calendar Date Range Picker" style="width:100%">

  <figcaption>Century View in Calendar Date Range Picker</figcaption>

</figure>

Refer to the following code example to display the century view.

```xml
xmlns:calendar="using:Syncfusion.UI.Xaml.Calendar"
        <calendar:SfCalendarDatePicker DisplayMode="Century" />
```

### Selection highlight mode

Syncfusion’s Calendar Date Picker supports changing the selection [highlight mode](https://help.syncfusion.com/winui/calendar-date-picker/date-selection-and-restriction#highlight-today-and-selected-dates "Highlight today and selected dates in WinUI Calendar documentation") and [shape](https://help.syncfusion.com/winui/calendar-date-picker/date-selection-and-restriction#change-shape-of-today-and-selected-date "Change shape of today and selected date in WinUI Calendar documentation"), but the WinUI framework does not.

<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2022/12/Selection-Highlight-Mode-in-Calendar-Date-Range-Picker.png" alt="Selection Highlight Mode in Calendar Date Range Picker" style="width:100%">

  <figcaption>Selection Highlight Mode in Calendar Date Range Picker</figcaption>

</figure>

Refer to the following code example to customize the selection highlight mode.

```xml
xmlns:calendar="using:Syncfusion.UI.Xaml.Calendar"
<calendar:SfCalendarDatePicker 
                SelectionHighlightMode="Filled"
                SelectionShape="Rectangle" />
```

### Restrict date selection

Syncfusion’s WinUI Calendar Date Picker supports restricting date selection by adding [blackout dates](https://help.syncfusion.com/winui/calendar-date-picker/date-selection-and-restriction#block-dates-using-blackoutdates "Block dates in WinUI Calendar documentation") for the month view, but the WinUI framework does not have this support.

<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2022/12/Restricted-Date-Selection-in-Syncfusion-Calendar-Date-Range-Picker.png" alt="Restricted Date Selection in Syncfusion Calendar Date Range Picker" style="width:100%">

  <figcaption>Restricted Date Selection in Syncfusion Calendar Date Range Picker</figcaption>

</figure>

### Navigation

Syncfusion’s Calendar Date Picker supports restricting [view navigation](https://help.syncfusion.com/winui/calendar-date-picker/navigation#navigate-between-views "Navigate between views in WinUI Calendar Date Picker documentation") by using the [MinDisplayMode](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Calendar.SfCalendarDatePicker.html?tabs=tabid-1#Syncfusion_UI_Xaml_Calendar_SfCalendarDatePicker_MinDisplayMode "MinDisplayMode property of WinUI Calendar Date Picker") and [MaxDisplayMode](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Calendar.SfCalendarDatePicker.html?tabs=tabid-1#Syncfusion_UI_Xaml_Calendar_SfCalendarDatePicker_MaxDisplayMode "WinUI MaxDisplayMode Property of WinUI Calendar Date Picker") properties, but the WinUI framework control does not have this support.

Refer to the following code example to restrict the view navigation.

```xml
xmlns:calendar="using:Syncfusion.UI.Xaml.Calendar"
<calendar:SfCalendarDatePicker x:Name="sfCalendarDatePicker"
                                 MinDisplayMode="Month"
                                 MaxDisplayMode="Decade"
                                 DisplayMode="Month"/>
```

<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2022/12/Restricted-View-Navigation-1.gif" alt="Restricted View Navigation" style="width:100%">

  <figcaption>Restricted View Navigation</figcaption>

</figure>

### Show week number

Syncfusion’s Calendar Date Picker supports displaying [week numbers](https://help.syncfusion.com/winui/calendar-date-picker/week-numbers "Display week numbers in the WinUI Calendar Date Picker documentation") in the month view and changing the week number [rule](https://help.syncfusion.com/winui/calendar-date-picker/week-numbers#week-rule "Week rule in WinUI Calendar Date Picker documentation") with [format](https://help.syncfusion.com/winui/calendar-date-picker/week-numbers#format-week-numbers "Format week numbers in WinUI Calendar Date Picker documentation") customization, but the WinUI framework does not support similar customization.

Refer to the following code example to show the week number in the month view.

```xml
xmlns:calendar="using:Syncfusion.UI.Xaml.Calendar"

  <calendar:SfCalendarDatePicker ShowWeekNumbers="True" 
                                  WeekNumberRule="FirstFullWeek" />
```

<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2022/12/Show-Week-Number-in-Calendar-Date-Picker.png" alt="Show Week Number in Calendar Date Picker" style="width:100%">

  <figcaption>Show Week Number in Calendar Date Picker</figcaption>

</figure>

### Number of weeks in view

Syncfusion’s Calendar Date Picker supports changing the [number of weeks](https://help.syncfusion.com/winui/calendar-date-picker/localization-and-formatting#number-of-weeks-in-a-view "Number of weeks in a view in WinUI Calendar Date Picker documentation") displayed in the month view, but the WinUI framework does not have this support.

Refer to the following code example to change the number of weeks in the month view.

```xml
Xmlns:calendar=”using:Syncfusion.UI.Xaml.Calendar”
        <calendar:SfCalendarDatePicker NumberOfWeeksInView=”4”/>
```

<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2022/12/Calendar-Date-Picker-with-Custom-Number-of-Weeks.png" alt="Calendar Date Picker with Custom Number of Weeks" style="width:100%">

  <figcaption>Calendar Date Picker with Custom Number of Weeks</figcaption>

</figure>

### Calendar date formats

Syncfusion’s Calendar Date Picker supports setting different date [formats](https://help.syncfusion.com/winui/calendar-date-picker/localization-and-formatting#change-calendar-display-format "Change calendar display format in WinUI Calendar Date Picker documentation"), such as abbreviated or full names for a day, month, or week, and header names for a month and year. The WinUI framework’s Calendar supports only a **DayOfWeekFormat** property to customize dates.

Refer to the following code example of date formatting.

```xml
xmlns:calendar="using:Syncfusion.UI.Xaml.Calendar"
<calendar:SfCalendarDatePicker DayFormat="{}{day.integer(2)}"
                               MonthFormat="{}{month.full}"
                               DayOfWeekFormat="{}{dayofweek.abbreviated(3)}"
                               MonthHeaderFormat="{}{month.abbreviated} {year.abbreviated}" />
```

<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2022/12/Calendar-Date-Format-Customization-in-Calendar-Date-Picker-1.gif" alt="Calendar Date Format Customization in Calendar Date Picker" style="width:100%">

  <figcaption>Calendar Date Format Customization in Calendar Date Picker</figcaption>

</figure>

### Customize the editor view

Syncfusion’s Calendar Date Picker supports showing or hiding a [clear button](https://help.syncfusion.com/winui/calendar-date-picker/calendar-ui-customization#hide-clear-button-in-textbox "Hide clear button in textbox of WinUI Calendar Date Picker documentation") in the editor view and also supports customizing the[dropdown alignment](https://help.syncfusion.com/winui/calendar-date-picker/calendar-ui-customization#change-drop-down-alignment "Change drop-down alignment in WinUI Calendar Date Picker documentation") and [height](https://help.syncfusion.com/winui/calendar-date-picker/calendar-ui-customization#change-drop-down-size "Change drop-down size in WinUI Calendar Date Picker documentation").

Refer to the following code example to change the dropdown height.

```xml
xmlns:calendar="using:Syncfusion.UI.Xaml.Calendar"
<calendar:SfCalendarDatePicker DropDownWidth="400"
                                DropDownHeight="500">
```

<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2022/12/Customize-Editor-View-in-Calendar-Date-Range-Picker-1.png" alt="Customize Editor View in Calendar Date Picker" style="width:100%">

  <figcaption>Customize Editor View in Calendar Date Picker</figcaption>

</figure>

## Date Picker

The date picker allows the user to pick the date from the spinner. Let’s see the differences between Syncfusion’s [Date Picker](https://www.syncfusion.com/winui-controls/date-picker "Syncfusion WinUI Date Picker") and the WinUI framework’s native [DatePicker](https://docs.microsoft.com/en-us/uwp/api/windows.ui.xaml.controls.datepicker?view=winrt-22621 "WinUI DatePicker Class") controls.

### Edit mode

Syncfusion’s Date Picker supports [mask](https://help.syncfusion.com/winui/date-picker/localization-and-formatting#edit-date-using-mask-mode "Edit date using mask mode in WinUI Date Picker documentation") and normal edit modes, but the WinUI framework does not have mask edit mode support.

Refer to the following code example to enable the mask edit mode.

```xml
xmlns:editors="using:Syncfusion.UI.Xaml.Editors"
 <editors:SfDatePicker EditMode="Mask" />
```

<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2022/12/Mask-Edit-Mode-in-Date-Picker-1.gif" alt="Mask Edit Mode in Date Picker" style="width:100%">

  <figcaption>Mask Edit Mode in Date Picker</figcaption>

</figure>

### Restrict date selection

Syncfusion’s Date Picker supports restricting the date selection by adding [blackout dates](https://help.syncfusion.com/winui/date-picker/date-restriction#disable-dates-using-blackoutdates "Blackout dates in WinUI Date Picker documentation"), but the WinUI native control does not support this.

<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2022/12/Blackout-Dates-in-Date-Picker.png" alt="Blackout Dates in Date Picker" style="width:100%">

  <figcaption>Blackout Dates in Date Picker</figcaption>

</figure>

Refer to the following code example to add blackout dates.

```xml
xmlns:editors="using:Syncfusion.UI.Xaml.Editors"
  
<editors:SfDatePicker BlackoutDates="{Binding BlockedDates}">
    <editors:SfDatePicker.DataContext>
         <local:ViewModel/>
    </editors:SfDatePicker.DataContext>
</editors:SfDatePicker>
```

```csharp
public class ViewModel
{
    public DateTimeOffsetCollection BlockedDates { get; set; }
    public ViewModel()
    {
       BlockedDates = new DateTimeOffsetCollection();
       BlockedDates.Add(new DateTimeOffset(new DateTime(2018, 1, 28)));
       BlockedDates.Add(new DateTimeOffset(new DateTime(2021, 1, 26)));
       BlockedDates.Add(new DateTimeOffset(new DateTime(2021, 1, 29)));
       BlockedDates.Add(new DateTimeOffset(new DateTime(2021, 1, 31)));
       BlockedDates.Add(new DateTimeOffset(new DateTime(2023, 1, 28)));
       BlockedDates.Add(new DateTimeOffset(new DateTime(2024, 1, 28)));
    }
}

```

### Navigation

Syncfusion’s Date Picker supports [minimum and maximum date range](https://help.syncfusion.com/winui/date-picker/date-restriction#limit-the-available-dates "Limit the available dates in WinUI Date Picker documentation") restrictions, but the native WinUI control does not have this support.

<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2022/12/Restricted-Navigation-in-Date-Picker.png" alt="Restricted Navigation in Date Picker" style="width:100%">

  <figcaption>Restricted Navigation in Date Picker</figcaption>

</figure>

### Change the number of dates to be shown

Syncfusion’s Date Picker supports customizing the [number of dates](https://help.syncfusion.com/winui/date-picker/dropdown-customization#change-the-number-of-dates-to-be-shown-in-the-dropdown "Change the number of dates to be shown in the dropdown in WinUI Date Picker documentation") to be displayed in the spinner, but the WinUI framework does not have this support.

Refer to the following code example to change the number of dates displayed.

```xml
xmlns:editors="using:Syncfusion.UI.Xaml.Editors"
        <editors:SfDatePicker VisibleItemsCount="5" />
```

<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2022/12/Change-the-Number-of-Dates-Displayed-in-Date-Picker.png" alt="Change the Number of Dates Displayed in the Date Picker" style="width:100%">

  <figcaption>Change the Number of Dates Displayed in Date Picker</figcaption>

</figure>

### Dropdown customization

Syncfusion’s Date Picker supports showing or hiding the [dropdown button](https://help.syncfusion.com/winui/date-picker/dropdown-customization#hide-dropdown-button "Hide dropdown button in WinUI Date Picker documentation") in the editor view and also supports customizing the drop-down [alignment](https://help.syncfusion.com/winui/date-picker/dropdown-customization#change-dropdown-alignment "Change dropdown alignment in WinUI Date Picker documentation") and [height](https://help.syncfusion.com/winui/date-picker/dropdown-customization#change-dropdown-height "Change dropdown height in WinUI Date Picker documentation"). But the WinUI framework’s date picker doesn’t have this support.

Refer to the following code example to change the dropdown height.

```xml
xmlns:editors="using:Syncfusion.UI.Xaml.Editors"
 <editors:SfDatePicker DropDownHeight="200"/>
```

<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2022/12/Customized-Dropdown-in-Date-Picker.png" alt="Customized Dropdown in Date Picker" style="width:100%">

  <figcaption>Customized Dropdown in Date Picker</figcaption>

</figure>

## Time Picker

The Time Picker allows users to pick a time from a spinner. Let’s see the differences between Syncfusion’s [Time Picker](https://www.syncfusion.com/winui-controls/time-picker "Syncfusion WinUI Time Picker") and the WinUI framework’s [TimePicker](https://docs.microsoft.com/en-us/uwp/api/windows.ui.xaml.controls.timepicker?view=winrt-22621 "WinUI TimePicker Class") control.

### Edit mode

Syncfusion’s Time Picker supports [mask](https://help.syncfusion.com/winui/time-picker/localization-and-formatting#edit-time-using-mask-mode "Mask mode in WinUI Time Picker documentation") and normal edit modes, but the WinUI framework does not have mask edit support.

Refer to the following code example to enable the mask edit mode.

```xml
xmlns:editors="using:Syncfusion.UI.Xaml.Editors"
        <editors:SfTimePicker EditMode="Mask" />
```
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2022/12/Mask-Edit-Mode-in-Time-Picker-1.gif" alt="Mask Edit Mode in Time Picker" style="width:100%">

  <figcaption>Mask Edit Mode in Time Picker</figcaption>

</figure>

### Restrict time selection

Syncfusion’s Time Picker supports restricting the time selection by adding [blackout times](https://help.syncfusion.com/winui/time-picker/time-restriction#disable-times-using-blackouttimes "Black out times in WinUI Time Picker documentation"), but the WinUI framework does not have this support.

<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2022/12/Restricted-Time-Selection-in-Time-Picker.png" alt="Restricted Time Selection in Time Picker" style="width:100%">

  <figcaption>Restricted Time Selection in Time Picker</figcaption>

</figure>

Refer to the following code example to add blackout times.

```xml
<editors:SfTimePicker BlackoutTimes="{Binding BlackoutTimes}"
                       SelectedTime="{Binding SelectedTime}" 
                       x:Name="sfTimePicker">
     <editors:SfTimePicker.DataContext>
         <local:ViewModel/>
     </editors:SfTimePicker.DataContext>
</editors:SfTimePicker>
```

```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));
    }
}
```

### Navigation

Syncfusion’s Time Picker supports [minimum and maximum time range](https://help.syncfusion.com/winui/time-picker/time-restriction#limit-the-available-times "Limit the available times in WinUI Time Picker documentation") restrictions, but the native WinUI control does not have this support.

<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2022/12/Restricted-Date-Selection-in-Syncfusion-Calendar-Date-Range-Picker.png" alt="Minimum and Maximum Time Range in Time Picker" style="width:100%">

  <figcaption>Minimum and Maximum Time Range in Time Picker</figcaption>

</figure>

### Change the number of time cells shown in the dropdown

Syncfusion’s  Time Picker supports displaying a specific [number of time cells](https://help.syncfusion.com/winui/time-picker/dropdown-customization#change-the-number-of-time-cells-to-be-shown-in-the-dropdown "Change the number of time cells to be shown in the dropdown in WinUI Time Picker documenatation") in the spinner, but the WinUI framework control does not support this.

Refer to the following code example to change the number of time cells displayed.

```xml
xmlns:editors="using:Syncfusion.UI.Xaml.Editors"
 <editors:SfTimePicker VisibleItemsCount="5" />
```

<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2022/12/Change-the-Number-of-Time-Cells-in-Time-Picker.png" alt="Change the Number of Time Cells in Time Picker" style="width:100%">

  <figcaption>Change the Number of Time Cells in Time Picker</figcaption>

</figure>

### Dropdown customization

Syncfusion’s Time Picker supports showing and hiding the [dropdown button](https://help.syncfusion.com/winui/time-picker/dropdown-customization#hide-dropdown-button "Hide dropdown button in WinUI Time Picker documentation") in the editor view and also supports customizing the dropdown [alignment](https://help.syncfusion.com/winui/time-picker/dropdown-customization#change-dropdown-alignment "Change dropdown alignment in WinUI Time Picker documentation") and [height](https://help.syncfusion.com/winui/time-picker/dropdown-customization#change-dropdown-height "Change dropdown height in WinUI Time Picker documentation"). The WinUI framework’s time picker doesn’t have this support.

Refer to the following code example to change the dropdown height.

```xml
xmlns:editors="using:Syncfusion.UI.Xaml.Editors"
      <editors:SfTimePicker DropDownHeight="200" />
```

<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2022/12/Dropdown-Customization-in-Time-Picker.png" alt="Dropdown Customization in Time Picker" style="width:100%">

  <figcaption>Dropdown Customization in Time Picker</figcaption>

</figure>

## Conclusion

Thanks for reading! We saw the differences between Syncfusion’s WinUI Calendar, Calendar Date Picker, Date Picker, and Time Picker controls and their WinUI framework counterparts. To see more of our WinUI controls’ features, you can download and check out [our demo app in the Windows Store](https://www.microsoft.com/en-us/p/syncfusion-winui-controls-gallery/9n0fp16ddc06 "Syncfusion WinUI Controls in the Microsoft App Store").

For current Syncfusion customers, the newest version of Essential Studio is available from the [license and downloads page](https://www.syncfusion.com/account/downloads "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 "Free evaluation of the Syncfusion Essential Studio") to check out these new features.

If you have questions, contact us through our [support forums](https://www.syncfusion.com/forums "Syncfusion Support Forum"), [feedback portal](https://www.syncfusion.com/feedback "Syncfusion Feedback Portal"), or [support portal](https://support.syncfusion.com "Syncfusion Support Portal"). We are always happy to assist you!

## Related blogs

If you liked this blog, we think you’ll enjoy the following articles as well:

- [Design a Car Dashboard Like a Pro Using the WinUI Radial Gauge](https://www.syncfusion.com/blogs/post/design-a-car-dashboard-like-a-pro-using-the-winui-radial-gauge.aspx "Blog: Design a Car Dashboard Like a Pro Using the WinUI Radial Gauge")
- [Design an Airfare Calendar to Display the Lowest Fares Using the WinUI Scheduler](https://www.syncfusion.com/blogs/post/design-an-airfare-calendar-to-display-the-lowest-fares-using-the-winui-scheduler.aspx "Blog: Design an Airfare Calendar to Display the Lowest Fares Using the WinUI Scheduler")
- [Introducing the New WinUI Shadow Control](https://www.syncfusion.com/blogs/post/introducing-the-new-winui-shadow-control.aspx "Blog: Introducing the New WinUI Shadow Control")