Advantages of Using Syncfusion WinUI Controls over Framework Controls: Part 2

Jollen Moyani - Dec 14 '22 - - Dev Community

This is the continuation of the 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, Calendar Date Picker, Date Picker, and Time Picker controls over the WinUI framework’s native CalendarView, CalendarDatePicker, DatePicker, and TimePicker 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 and the WinUI framework’s native CalendarView 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.

xmlns:calendar="using:Syncfusion.UI.Xaml.Calendar"
        <calendar:SfCalendar DisplayMode="Century" />
Enter fullscreen mode Exit fullscreen mode

Century View in Calendar

Century View in Calendar

Selection mode

Syncfusion’s Calendar supports single, multiple, and date range 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 and selection shape, but the WinUI framework does not support these customizations.

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

xmlns:calendar="using:Syncfusion.UI.Xaml.Calendar"
  <calendar:SfCalendar SelectionMode="Range" SelectionShape="Rectangle" SelectionHighlightMode="Outline"/>
Enter fullscreen mode Exit fullscreen mode

Date Range Selection in Calendar

Date Range Selection in Calendar

Navigation

Syncfusion’s WinUI Calendar supports restricting view navigation by using the MinDisplayMode and MaxDisplayMode properties, and it also supports changing the navigation direction 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.

xmlns:calendar="using:Syncfusion.UI.Xaml.Calendar"
<calendar:SfCalendar MinDisplayMode="Month"
                     MaxDisplayMode="Decade"
                     DisplayMode="Month" NavigationDirection="Horizontal"/>
Enter fullscreen mode Exit fullscreen mode

Minimum and Maximum Display Dates in Calendar

Minimum and Maximum Display Dates in Calendar

Calendar date formats

Syncfusion’s Calendar supports setting different date formats, 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.

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}"/>
Enter fullscreen mode Exit fullscreen mode

Date Format Customization in Calendar

Date Format Customization in Calendar

Show week number

Syncfusion’s Calendar supports displaying week numbers in the month view and customizing the week number rule and format. 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.

xmlns:calendar="using:Syncfusion.UI.Xaml.Calendar"
      <calendar:SfCalendar ShowWeekNumbers="True" 
                            WeekNumberRule="FirstFullWeek" />
Enter fullscreen mode Exit fullscreen mode

Week Number Rule Format Customization in Calendar

Week Number Rule Format Customization in Calendar

Calendar Date Picker

The Syncfusion Calendar Date Picker allows users to pick a date from a calendar display. Let’s see the differences between Syncfusion’s and the WinUI framework’s 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.

Century View in Calendar Date Range Picker

Century View in Calendar Date Range Picker

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

xmlns:calendar="using:Syncfusion.UI.Xaml.Calendar"
        <calendar:SfCalendarDatePicker DisplayMode="Century" />
Enter fullscreen mode Exit fullscreen mode

Selection highlight mode

Syncfusion’s Calendar Date Picker supports changing the selection highlight mode and shape, but the WinUI framework does not.

Selection Highlight Mode in Calendar Date Range Picker

Selection Highlight Mode in Calendar Date Range Picker

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

xmlns:calendar="using:Syncfusion.UI.Xaml.Calendar"
<calendar:SfCalendarDatePicker 
                SelectionHighlightMode="Filled"
                SelectionShape="Rectangle" />
Enter fullscreen mode Exit fullscreen mode

Restrict date selection

Syncfusion’s WinUI Calendar Date Picker supports restricting date selection by adding blackout dates for the month view, but the WinUI framework does not have this support.

Restricted Date Selection in Syncfusion Calendar Date Range Picker

Restricted Date Selection in Syncfusion Calendar Date Range Picker

Navigation

Syncfusion’s Calendar Date Picker supports restricting view navigation by using the MinDisplayMode and MaxDisplayMode properties, but the WinUI framework control does not have this support.

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

xmlns:calendar="using:Syncfusion.UI.Xaml.Calendar"
<calendar:SfCalendarDatePicker x:Name="sfCalendarDatePicker"
                                 MinDisplayMode="Month"
                                 MaxDisplayMode="Decade"
                                 DisplayMode="Month"/>
Enter fullscreen mode Exit fullscreen mode

Restricted View Navigation

Restricted View Navigation

Show week number

Syncfusion’s Calendar Date Picker supports displaying week numbers in the month view and changing the week number rule with format 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.

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

  <calendar:SfCalendarDatePicker ShowWeekNumbers="True" 
                                  WeekNumberRule="FirstFullWeek" />
Enter fullscreen mode Exit fullscreen mode

Show Week Number in Calendar Date Picker

Show Week Number in Calendar Date Picker

Number of weeks in view

Syncfusion’s Calendar Date Picker supports changing the number of weeks 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.

Xmlns:calendar=”using:Syncfusion.UI.Xaml.Calendar”
        <calendar:SfCalendarDatePicker NumberOfWeeksInView=”4”/>
Enter fullscreen mode Exit fullscreen mode

Calendar Date Picker with Custom Number of Weeks

Calendar Date Picker with Custom Number of Weeks

Calendar date formats

Syncfusion’s Calendar Date Picker supports setting different date formats, 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.

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}" />
Enter fullscreen mode Exit fullscreen mode

Calendar Date Format Customization in Calendar Date Picker

Calendar Date Format Customization in Calendar Date Picker

Customize the editor view

Syncfusion’s Calendar Date Picker supports showing or hiding a clear button in the editor view and also supports customizing thedropdown alignment and height.

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

xmlns:calendar="using:Syncfusion.UI.Xaml.Calendar"
<calendar:SfCalendarDatePicker DropDownWidth="400"
                                DropDownHeight="500">
Enter fullscreen mode Exit fullscreen mode

Customize Editor View in Calendar Date Picker

Customize Editor View in Calendar Date Picker

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 and the WinUI framework’s native DatePicker controls.

Edit mode

Syncfusion’s Date Picker supports mask 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.

xmlns:editors="using:Syncfusion.UI.Xaml.Editors"
 <editors:SfDatePicker EditMode="Mask" />
Enter fullscreen mode Exit fullscreen mode

Mask Edit Mode in Date Picker

Mask Edit Mode in Date Picker

Restrict date selection

Syncfusion’s Date Picker supports restricting the date selection by adding blackout dates, but the WinUI native control does not support this.

Blackout Dates in Date Picker

Blackout Dates in Date Picker

Refer to the following code example to add blackout dates.

xmlns:editors="using:Syncfusion.UI.Xaml.Editors"

<editors:SfDatePicker BlackoutDates="{Binding BlockedDates}">
    <editors:SfDatePicker.DataContext>
         <local:ViewModel/>
    </editors:SfDatePicker.DataContext>
</editors:SfDatePicker>
Enter fullscreen mode Exit fullscreen mode 
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)));
    }
}
Enter fullscreen mode Exit fullscreen mode

Navigation

Syncfusion’s Date Picker supports minimum and maximum date range restrictions, but the native WinUI control does not have this support.

Restricted Navigation in Date Picker

Restricted Navigation in Date Picker

Change the number of dates to be shown

Syncfusion’s Date Picker supports customizing the number of dates 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.

xmlns:editors="using:Syncfusion.UI.Xaml.Editors"
        <editors:SfDatePicker VisibleItemsCount="5" />
Enter fullscreen mode Exit fullscreen mode

Change the Number of Dates Displayed in the Date Picker

Change the Number of Dates Displayed in Date Picker

Dropdown customization

Syncfusion’s Date Picker supports showing or hiding the dropdown button in the editor view and also supports customizing the drop-down alignment and height. But the WinUI framework’s date picker doesn’t have this support.

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

xmlns:editors="using:Syncfusion.UI.Xaml.Editors"
 <editors:SfDatePicker DropDownHeight="200"/>
Enter fullscreen mode Exit fullscreen mode

Customized Dropdown in Date Picker

Customized Dropdown in Date Picker

Time Picker

The Time Picker allows users to pick a time from a spinner. Let’s see the differences between Syncfusion’s Time Picker and the WinUI framework’s TimePicker control.

Edit mode

Syncfusion’s Time Picker supports mask 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.

xmlns:editors="using:Syncfusion.UI.Xaml.Editors"
        <editors:SfTimePicker EditMode="Mask" />
Enter fullscreen mode Exit fullscreen mode

Mask Edit Mode in Time Picker

Mask Edit Mode in Time Picker

Restrict time selection

Syncfusion’s Time Picker supports restricting the time selection by adding blackout times, but the WinUI framework does not have this support.

Restricted Time Selection in Time Picker

Restricted Time Selection in Time Picker

Refer to the following code example to add blackout times.

<editors:SfTimePicker BlackoutTimes="{Binding BlackoutTimes}"
                       SelectedTime="{Binding SelectedTime}" 
                       x:Name="sfTimePicker">
     <editors:SfTimePicker.DataContext>
         <local:ViewModel/>
     </editors:SfTimePicker.DataContext>
</editors:SfTimePicker>
Enter fullscreen mode Exit fullscreen mode 
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));
    }
}
Enter fullscreen mode Exit fullscreen mode

Navigation

Syncfusion’s Time Picker supports minimum and maximum time range restrictions, but the native WinUI control does not have this support.

Minimum and Maximum Time Range in Time Picker

Minimum and Maximum Time Range in Time Picker

Change the number of time cells shown in the dropdown

Syncfusion’s Time Picker supports displaying a specific number of time cells 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.

xmlns:editors="using:Syncfusion.UI.Xaml.Editors"
 <editors:SfTimePicker VisibleItemsCount="5" />
Enter fullscreen mode Exit fullscreen mode

Change the Number of Time Cells in Time Picker

Change the Number of Time Cells in Time Picker

Dropdown customization

Syncfusion’s Time Picker supports showing and hiding the dropdown button in the editor view and also supports customizing the dropdown alignment and height. The WinUI framework’s time picker doesn’t have this support.

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

xmlns:editors="using:Syncfusion.UI.Xaml.Editors"
      <editors:SfTimePicker DropDownHeight="200" />
Enter fullscreen mode Exit fullscreen mode

Dropdown Customization in Time Picker

Dropdown Customization in Time Picker

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.

For current Syncfusion customers, the newest version of Essential Studio is available from the license and downloads page. If you are not yet a customer, you can try our 30-day free trial to check out these new features.

If you have questions, contact us through our support forums, feedback portal, or 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:

Image
Cisza w Mieszkaniu: Jak Wyciszyć Przestrzeń i Osiągnąć Spokój
Image
How to Safeguard Your Crypto: Expert Tips for Avoiding Scams and Phishing Attacks

cryptocurrency, phishing, security
Image
Stopcontacten Elektriciteit
Image
Eligiendo la versión por defecto de node con nvm

node, nvm
Image
Searching For Inspiration? Look Up Mesothelioma From Asbestos Exposure
Image
Asbestos Claims Payouts: 11 Things You're Forgetting To Do
Image
What is SEO (Search Engine Optimization)?

technicalseo, seo, webdev, digitalmarketing
Image
We Were a Nation of Immigrants
Image
20 Resources That'll Make You More Successful At Drip Coffeee
Image
Mesothelioma Caused By Asbestos 101 This Is The Ultimate Guide For Beginners
Image
Cisza i Spokój: Jak Wyciszyć Mieszkanie i Osiągnąć Harmonię
Image
Elektricien Breda, Uw betrouwbare elektricien in Breda
Image
Connect to Azure SQL database in SQL Alchemy using Entra ID tokens

python, azure, aad
Image
How Self Propelled Wheelchair Ebay Became The Hottest Trend Of 2024
Image
Schoof: kortsluiting in mijn hoofd na uitlatingen over abortus
Image
Easy Logger - Controle de Logs Simplificado! 🚀

webdev, javascript, extensions, beginners
Image
Quick look on how Spring Boot supports JMS

java, springboot
Image
Ten Situations In Which You'll Want To Be Aware Of Asbestos Compensation Lawyers
Image
2501. Longest Square Streak in an Array

php, leetcode, algorithms, programming
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .