That is the continuation of the Benefits of Utilizing Syncfusion WinUI Controls over Framework Controls: Half 1 weblog. On this weblog, we are going to have a look at the options and variations of Syncfusion’s Calendar, Calendar Date Picker, Date Picker, and Time Picker controls over the WinUI framework’s native CalendarView, CalendarDatePicker, DatePicker, and TimePicker management.
Calendar
The Calendar management is used to view dates and makes it easy for customers to decide on a single date, a number of dates, or a spread of dates. Let’s see the variations between Syncfusion’s Calendar and the WinUI framework’s native CalendarView controls.
Constructed-in calendar views
Syncfusion’s WinUI Calendar offers month, 12 months, decade, and century views to rapidly navigate to the specified date, however the WinUI framework CalendarView solely has month, 12 months, and decade views.
Consult with the next code instance to show the century view.
xmlns:calendar="utilizing:Syncfusion.UI.Xaml.Calendar"
<calendar:SfCalendar DisplayMode="Century" />
Choice mode
Syncfusion’s Calendar helps single, a number of, and date vary choice modes whereas the WinUI native CalenderView solely helps single and a number of choice modes.
As well as, Syncfusion’s Calendar has assist to assist to vary the choice spotlight mode and choice form, however the WinUI framework doesn’t assist these customizations.
Consult with the next code instance of a date vary choice.
xmlns:calendar="utilizing:Syncfusion.UI.Xaml.Calendar" <calendar:SfCalendar SelectionMode="Vary" SelectionShape="Rectangle" SelectionHighlightMode="Define"/>
Navigation
Syncfusion’s WinUI Calendar helps limiting view navigation by utilizing the MinDisplayMode and MaxDisplayMode properties, and it additionally helps altering the navigation route to be both horizontal or vertical. Then again, the WinUI framework CalendarView doesn’t have these view navigation restriction and route options.
Consult with the next code instance of view navigation restriction.
xmlns:calendar="utilizing:Syncfusion.UI.Xaml.Calendar"
<calendar:SfCalendar MinDisplayMode="Month"
MaxDisplayMode="Decade"
DisplayMode="Month" NavigationDirection="Horizontal"/>
Calendar date codecs
Syncfusion’s Calendar helps setting completely different date codecs, corresponding to abbreviated or full names for a day, month, or week, in addition to for the header of a month or 12 months. The WinUI framework’s Calendar helps solely a DayOfWeekFormat property to customise dates.
Consult with the next code instance of date formatting.
xmlns:calendar="utilizing:Syncfusion.UI.Xaml.Calendar"
<calendar:SfCalendar DayFormat="{}{day.integer(2)}"
MonthFormat="{}{month.full}"
DayOfWeekFormat="{}{dayofweek.abbreviated(3)}"
MonthHeaderFormat="{}{month.abbreviated} {12 months.abbreviated}"/>
Present week quantity
Syncfusion’s Calendar helps displaying week numbers within the month view and customizing the week quantity rule and format. The WinUI framework doesn’t have week quantity rule format customization assist.
Consult with the next code instance to indicate week numbers within the month view.
xmlns:calendar="utilizing:Syncfusion.UI.Xaml.Calendar"
<calendar:SfCalendar ShowWeekNumbers="True"
WeekNumberRule="FirstFullWeek" />
Calendar Date Picker
The Syncfusion Calendar Date Picker permits customers to select a date from a calendar show. Let’s see the variations between Syncfusion’s and the WinUI framework’s controls.
Constructed-in calendar views
Syncfusion’s WinUI Calendar Date Picker offers month, 12 months, decade, and century views to rapidly navigate to the specified date, however the WinUI native management solely has month, 12 months, and decade views.
Consult with the next code instance to show the century view.
xmlns:calendar="utilizing:Syncfusion.UI.Xaml.Calendar"
<calendar:SfCalendarDatePicker DisplayMode="Century" />
Choice spotlight mode
Syncfusion’s Calendar Date Picker helps altering the choice spotlight mode and form, however the WinUI framework doesn’t.
Consult with the next code instance to customise the choice spotlight mode.
xmlns:calendar="utilizing:Syncfusion.UI.Xaml.Calendar"
<calendar:SfCalendarDatePicker
SelectionHighlightMode="Stuffed"
SelectionShape="Rectangle" />
Limit date choice
Syncfusion’s WinUI Calendar Date Picker helps limiting date choice by including blackout dates for the month view, however the WinUI framework doesn’t have this assist.
Navigation
Syncfusion’s Calendar Date Picker helps limiting view navigation by utilizing the MinDisplayMode and MaxDisplayMode properties, however the WinUI framework management doesn’t have this assist.
Consult with the next code instance to limit the view navigation.
xmlns:calendar="utilizing:Syncfusion.UI.Xaml.Calendar"
<calendar:SfCalendarDatePicker x:Title="sfCalendarDatePicker"
MinDisplayMode="Month"
MaxDisplayMode="Decade"
DisplayMode="Month"/>
Present week quantity
Syncfusion’s Calendar Date Picker helps displaying week numbers within the month view and altering the week quantity rule with format customization, however the WinUI framework doesn’t assist related customization.
Consult with the next code instance to indicate the week quantity within the month view.
xmlns:calendar="utilizing:Syncfusion.UI.Xaml.Calendar"
<calendar:SfCalendarDatePicker ShowWeekNumbers="True"
WeekNumberRule="FirstFullWeek" />
Variety of weeks in view
Syncfusion’s Calendar Date Picker helps altering the variety of weeks displayed within the month view, however the WinUI framework doesn’t have this assist.
Consult with the next code instance to vary the variety of weeks within the month view.
Xmlns:calendar=”utilizing:Syncfusion.UI.Xaml.Calendar”
<calendar:SfCalendarDatePicker NumberOfWeeksInView=”4”/>
Calendar date codecs
Syncfusion’s Calendar Date Picker helps setting completely different date codecs, corresponding to abbreviated or full names for a day, month, or week, and header names for a month and 12 months. The WinUI framework’s Calendar helps solely a DayOfWeekFormat property to customise dates.
Consult with the next code instance of date formatting.
xmlns:calendar="utilizing:Syncfusion.UI.Xaml.Calendar"
<calendar:SfCalendarDatePicker DayFormat="{}{day.integer(2)}"
MonthFormat="{}{month.full}"
DayOfWeekFormat="{}{dayofweek.abbreviated(3)}"
MonthHeaderFormat="{}{month.abbreviated} {12 months.abbreviated}" />
Customise the editor view
Syncfusion’s Calendar Date Picker helps exhibiting or hiding a clear button within the editor view and likewise helps customizing the dropdown alignment and peak.
Consult with the next code instance to vary the dropdown peak.
xmlns:calendar="utilizing:Syncfusion.UI.Xaml.Calendar"
<calendar:SfCalendarDatePicker DropDownWidth="400"
DropDownHeight="500">
Date Picker
The date picker permits the person to select the date from the spinner. Let’s see the variations between Syncfusion’s Date Picker and the WinUI framework’s native DatePicker controls.
Edit mode
Syncfusion’s Date Picker helps masks and regular edit modes, however the WinUI framework doesn’t have masks edit mode assist.
Consult with the next code instance to allow the masks edit mode.
xmlns:editors="utilizing:Syncfusion.UI.Xaml.Editors" <editors:SfDatePicker EditMode="Masks" />
Limit date choice
Syncfusion’s Date Picker helps limiting the date choice by including blackout dates, however the WinUI native management doesn’t assist this.
Consult with the next code instance so as to add blackout dates.
xmlns:editors="utilizing:Syncfusion.UI.Xaml.Editors"
<editors:SfDatePicker BlackoutDates="{Binding BlockedDates}">
<editors:SfDatePicker.DataContext>
<native:ViewModel/>
</editors:SfDatePicker.DataContext>
</editors:SfDatePicker>
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 helps minimal and most date vary restrictions, however the native WinUI management doesn’t have this assist.
Change the variety of dates to be proven
Syncfusion’s Date Picker helps customizing the variety of dates to be displayed within the spinner, however the WinUI framework doesn’t have this assist.
Consult with the next code instance to vary the variety of dates displayed.
xmlns:editors="utilizing:Syncfusion.UI.Xaml.Editors"
<editors:SfDatePicker VisibleItemsCount="5" />
Dropdown customization
Syncfusion’s Date Picker helps exhibiting or hiding the dropdown button within the editor view and likewise helps customizing the drop-down alignment and peak. However the WinUI framework’s date picker doesn’t have this assist.
Consult with the next code instance to vary the dropdown peak.
xmlns:editors="utilizing:Syncfusion.UI.Xaml.Editors" <editors:SfDatePicker DropDownHeight="200"/>
Time Picker
The Time Picker permits customers to select a time from a spinner. Let’s see the variations between Syncfusion’s Time Picker and the WinUI framework’s TimePicker management.
Edit mode
Syncfusion’s Time Picker helps masks and regular edit modes, however the WinUI framework doesn’t have masks edit assist.
Consult with the next code instance to allow the masks edit mode.
xmlns:editors="utilizing:Syncfusion.UI.Xaml.Editors"
<editors:SfTimePicker EditMode="Masks" />
Limit time choice
Syncfusion’s Time Picker helps limiting the time choice by including blackout instances, however the WinUI framework doesn’t have this assist.
Consult with the next code instance so as to add blackout instances.
<editors:SfTimePicker BlackoutTimes="{Binding BlackoutTimes}"
SelectedTime="{Binding SelectedTime}"
x:Title="sfTimePicker">
<editors:SfTimePicker.DataContext>
<native:ViewModel/>
</editors:SfTimePicker.DataContext>
</editors:SfTimePicker>
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.Yr, DateTimeOffset.Now.Month, DateTimeOffset.Now.Day, 0, 3, 0, DateTimeOffset.Now.Offset));
BlackoutTimes.Add(new DateTimeOffset(DateTimeOffset.Now.Yr, DateTimeOffset.Now.Month, DateTimeOffset.Now.Day, 0, 58, 0, DateTimeOffset.Now.Offset));
BlackoutTimes.Add(new DateTimeOffset(DateTimeOffset.Now.Yr, DateTimeOffset.Now.Month, DateTimeOffset.Now.Day, 1, 0, 0, DateTimeOffset.Now.Offset));
BlackoutTimes.Add(new DateTimeOffset(DateTimeOffset.Now.Yr, DateTimeOffset.Now.Month, DateTimeOffset.Now.Day, 3, 0, 0, DateTimeOffset.Now.Offset));
BlackoutTimes.Add(new DateTimeOffset(DateTimeOffset.Now.Yr, DateTimeOffset.Now.Month, DateTimeOffset.Now.Day, 9, 0, 0, DateTimeOffset.Now.Offset));
BlackoutTimes.Add(new DateTimeOffset(DateTimeOffset.Now.Yr, DateTimeOffset.Now.Month, DateTimeOffset.Now.Day, 10, 0, 0, DateTimeOffset.Now.Offset));
}
}
Navigation
Syncfusion’s Time Picker helps minimal and most time vary restrictions, however the native WinUI management doesn’t have this assist.
Change the variety of time cells proven within the dropdown
Syncfusion’s Time Picker helps displaying a particular variety of time cells within the spinner, however the WinUI framework management doesn’t assist this.
Consult with the next code instance to vary the variety of time cells displayed.
xmlns:editors="utilizing:Syncfusion.UI.Xaml.Editors" <editors:SfTimePicker VisibleItemsCount="5" />
Dropdown customization
Syncfusion’s Time Picker helps exhibiting and hiding the dropdown button within the editor view and likewise helps customizing the dropdown alignment and peak. The WinUI framework’s time picker doesn’t have this assist.
Consult with the next code instance to vary the dropdown peak.
xmlns:editors="utilizing:Syncfusion.UI.Xaml.Editors"
<editors:SfTimePicker DropDownHeight="200" />
Conclusion
Thanks for studying! We noticed the variations between Syncfusion’s WinUI Calendar, Calendar Date Picker, Date Picker, and Time Picker controls and their WinUI framework counterparts. To see extra of our WinUI controls’ options, you may obtain and take a look at our demo app within the Home windows Retailer.
For present Syncfusion clients, the most recent model of Important Studio is on the market from the license and downloads web page. If you’re not but a buyer, you may strive our 30-day free trial to take a look at these new options.
When you’ve got questions, contact us by way of our assist boards, suggestions portal, or assist portal. We’re at all times pleased to help you!
Associated blogs
When you appreciated this weblog, we predict you’ll take pleasure in the next articles as nicely:
