diff --git a/WindowsForms/Calendar/Getting-Started.md b/WindowsForms/Calendar/Getting-Started.md new file mode 100644 index 000000000..7d7854739 --- /dev/null +++ b/WindowsForms/Calendar/Getting-Started.md @@ -0,0 +1,411 @@ +--- +layout: post +title: Getting Started with Windows Forms Calendar control | Syncfusion +description: Learn here about getting started with Syncfusion Windows Forms Calendar (SfCalendar) control and more details. +platform: WindowsForms +control: SfCalendar +documentation: ug +--- + +# Getting Started with Windows Forms Calendar (SfCalendar) + +This section briefly describes how to create a new Windows Forms project in Visual Studio and add the [WinForms Calendar](https://www.syncfusion.com/winforms-ui-controls/calendar) (SfCalendar) control with its basic functionalities. + +## Assembly deployment + +Refer to the [Control Dependencies](https://help.syncfusion.com/windowsforms/control-dependencies#sfcalendar) section to get the list of assemblies or details of NuGet package that needs to be added as reference to use the control in any application. + +Refer to this [documentation](https://help.syncfusion.com/windowsforms/installation/install-nuget-packages) to find more details about installing NuGet packages in a Windows Forms application. + +## Adding the SfCalendar control via designer + +The following steps describe how to create a WinForms Calendar (SfCalendar) control via designer. + +1. Create a new Windows Forms application in Visual Studio. + +2. Add the [SfCalendar](https://help.syncfusion.com/cr/windowsforms/Syncfusion.WinForms.Input.SfCalendar.html) control to an application by dragging it from the toolbox to design view. The following dependent assemblies will be added automatically: + + * Syncfusion.Core.WinForms + * Syncfusion.SfInput.WinForms + * Syncfusion.Shared.Base + +![Drag and drop the sfcalendar to form](getting-started-images/gettingstarted.png) + +## Adding the SfCalendar control via code + +The following steps describe how to create a WinForms Calendar (SfCalendar) control programmatically: + +1. Create a C# or VB application via Visual Studio. + +2. Add the following assembly references to the project: + + * Syncfusion.Core.WinForms + * Syncfusion.SfInput.WinForms + * Syncfusion.Shared.Base + +3. Include the required namespaces. + +{% capture codesnippet1 %}​ +{% tabs %} + +{% highlight C# %} + +using Syncfusion.WinForms.Input; + +{% endhighlight %} + +{% highlight VB %} + +Imports Syncfusion.WinForms.Input + +{% endhighlight %} + +{% endtabs %} +{% endcapture %} +{{ codesnippet1 | OrderList_Indent_Level_1 }} + +4. Create an instance of the [WinForms Calendar](https://help.syncfusion.com/cr/windowsforms/Syncfusion.WinForms.Input.SfCalendar.html) (SfCalendar) control, and add it to the Form. + +{% capture codesnippet2 %}​ +{% tabs %} + +{% highlight C# %} +using Syncfusion.WinForms.Input; + +SfCalendar calendar = new SfCalendar(); + +this.Controls.Add(calendar); + +{% endhighlight %} + +{% highlight VB %} +Imports Syncfusion.WinForms.Input + +Dim calendar As SfCalendar = New SfCalendar + +Me.Controls.Add(calendar) + +{% endhighlight %} + +{% endtabs %} +{% endcapture %} +{{ codesnippet2 | OrderList_Indent_Level_1 }} + +## Select a date + +At run time, a particular date should be focused or selected using the `SelectedDate` property. This property is also used to change the current date of SfCalendar. + +{% tabs %} + +{% highlight C# %} +using Syncfusion.WinForms.Input; + +calendar.SelectedDate = new System.DateTime(2019, 08, 12); + +{% endhighlight %} + +{% highlight VB %} +Imports Syncfusion.WinForms.Input + +calendar.SelectedDate = New System.DateTime(2019, 08, 12) + +{% endhighlight %} + +{% endtabs %} + +![Select the date in WF SfCalendar](Getting-Started-images/selecteddate.png) + +### Selection change event + +The WinForms Calendar (SfCalendar) control notifies the date changes using the `SelectionChanging` and `SelectionChanged` events. You can use the `NewValue` and `OldValue` properties to get the old and new dates in the `SelectionChanged` event. In the `SelectionChanging` event, you can use the `Cancel` property in event argument to avoid the date changes or mentioned date in SfCalendar. + +{% tabs %} + +{% highlight C# %} +using Syncfusion.WinForms.Input; + +// Invoking selection changing event +calendar.SelectionChanging += Calendar_SelectionChanging; + +// Invoking selection changed event +calendar.SelectionChanged += Calendar_SelectionChanged; + +// Occurs before the selected date is changed in Calendar. +private void Calendar_SelectionChanging(Syncfusion.WinForms.Input.SfCalendar sender, Syncfusion.WinForms.Input.Events.SelectionChangingEventArgs e) +{ + var newDate = e.NewValue; + if (newDate == new System.DateTime(2019,08,13)) + e.Cancel = true; +} + +// Occurs after the selected date is changed in Calendar. +private void Calendar_SelectionChanged(Syncfusion.WinForms.Input.SfCalendar sender, Syncfusion.WinForms.Input.Events.SelectionChangedEventArgs e) +{ + var newDate = e.NewValue; + var oldDate = e.OldValue; +} + +{% endhighlight %} + +{% highlight VB %} +Imports Syncfusion.WinForms.Input + +' Invoking selection changing event +AddHandler calendar.SelectionChanging, AddressOf Calendar_SelectionChanging + +' Invoking selection changed event +AddHandler calendar.SelectionChanged, AddressOf Calendar_SelectionChanged + +' Occurs before the selected date is changed in Calendar. +Private Sub Calendar_SelectionChanging(ByVal sender As Syncfusion.WinForms.Input.SfCalendar, ByVal e As Syncfusion.WinForms.Input.Events.SelectionChangingEventArgs) + Dim newDate = e.NewValue + If newDate Is New System.DateTime(2019,08,13) Then + e.Cancel = True + End If +End Sub + +' Occurs after the selected date is changed in Calendar. +Private Sub Calendar_SelectionChanged(ByVal sender As Syncfusion.WinForms.Input.SfCalendar, ByVal e As Syncfusion.WinForms.Input.Events.SelectionChangedEventArgs) + Dim newDate = e.NewValue + Dim oldDate = e.OldValue +End Sub + +{% endhighlight %} + +{% endtabs %} + +## Date range + +The [WinForms Calendar](https://help.syncfusion.com/cr/windowsforms/Syncfusion.WinForms.Input.SfCalendar.html) (SfCalendar) prevents users from selecting dates outside the specified minimum and maximum range. To specify a range, set the start date and end date to the [MinDate](https://help.syncfusion.com/cr/windowsforms/Syncfusion.WinForms.Input.SfCalendar.html#Syncfusion_WinForms_Input_SfCalendar_MinDate) and [MaxDate](https://help.syncfusion.com/cr/windowsforms/Syncfusion.WinForms.Input.SfCalendar.html#Syncfusion_WinForms_Input_SfCalendar_MaxDate) properties, respectively. + +{% tabs %} + +{% highlight C# %} +using Syncfusion.WinForms.Input; + +// Setting the minimum and maximum dates + +SfCalendar calendar = new SfCalendar(); +this.Controls.Add(calendar); + +calendar.SelectedDate = new DateTime(2018, 1, 17); +calendar.MinDate = new DateTime(2018, 1, 05); +calendar.MaxDate = new DateTime(2018, 1, 25); + +{% endhighlight %} + +{% highlight VB %} +Imports Syncfusion.WinForms.Input + +' Setting the minimum and maximum dates + +Dim calendar As SfCalendar = New SfCalendar +Me.Controls.Add(calendar) + +calendar.SelectedDate = New DateTime(2018, 1, 17) +calendar.MinDate = New DateTime(2018, 1, 5) +calendar.MaxDate = New DateTime(2018, 1, 25) + +{% endhighlight %} + +{% endtabs %} + +![Windows Forms SfCalendar showing selected date with in range](appearance-images/minmax.png) + +## Blackout dates + +[BlackoutDates](https://help.syncfusion.com/cr/windowsforms/Syncfusion.WinForms.Input.SfCalendar.html#Syncfusion_WinForms_Input_SfCalendar_BlackoutDates) refers the disabled dates that restrict users from selecting it. A date collection can be provided to set the `BlackoutDates` for this control. + +{% tabs %} + +{% highlight C# %} +using Syncfusion.WinForms.Input; + +//Setting the blackout dates + +calendar.BlackoutDates.Add(new System.DateTime(2018, 1, 7)); +calendar.BlackoutDates.Add(new System.DateTime(2018, 1, 14)); +calendar.BlackoutDates.Add(new System.DateTime(2018, 1, 21)); +calendar.BlackoutDates.Add(new System.DateTime(2018, 1, 6)); +calendar.BlackoutDates.Add(new System.DateTime(2018, 1, 13)); +calendar.BlackoutDates.Add(new System.DateTime(2018, 1, 20)); + +{% endhighlight %} + +{% highlight VB %} +Imports Syncfusion.WinForms.Input + +'Setting the Blackout Dates + +calendar.BlackoutDates.Add(New System.DateTime(2018, 1, 7)) +calendar.BlackoutDates.Add(New System.DateTime(2018, 1, 14)) +calendar.BlackoutDates.Add(New System.DateTime(2018, 1, 21)) +calendar.BlackoutDates.Add(New System.DateTime(2018, 1, 6)) +calendar.BlackoutDates.Add(New System.DateTime(2018, 1, 13)) +calendar.BlackoutDates.Add(New System.DateTime(2018, 1, 20)) + +{% endhighlight %} + +{% endtabs %} + +![Windows Forms SfCalendar showing BlackOutDates](getting-started-images/blackoutdates.png) + +## Special dates + +The WinForms Calendar (SfCalendar) allows you to highlight special dates with icons and descriptions. Special dates can be added to the calendar using the [SpecialDates](https://help.syncfusion.com/cr/windowsforms/Syncfusion.WinForms.Input.SfCalendar.html#Syncfusion_WinForms_Input_SfCalendar_SpecialDates) collection. + +The following code sample demonstrates how to add special dates to the calendar. + +{% tabs %} + +{% highlight C# %} +using Syncfusion.WinForms.Input; + +SpecialDate specialDate1 = new SpecialDate(); +List SpecialDates = new List(); + +specialDate1.BackColor = System.Drawing.Color.White; +specialDate1.Font = new System.Drawing.Font("Segoe UI", 11.25F, System.Drawing.FontStyle.Italic, System.Drawing.GraphicsUnit.Point, ((byte)(0))); +specialDate1.ForeColor = System.Drawing.Color.Magenta; +specialDate1.Image = Properties.Resources.icons_Womens_day; +specialDate1.Description = "International Women's Day"; +specialDate1.ImageAlign = System.Drawing.ContentAlignment.MiddleCenter; +specialDate1.IsDateVisible = false; +specialDate1.TextAlign = System.Drawing.ContentAlignment.MiddleCenter; +specialDate1.TextImageRelation = System.Windows.Forms.TextImageRelation.TextBeforeImage; +specialDate1.Value = new System.DateTime(2018, 1, 15); +SpecialDates.Add(specialDate1); +calendar.SpecialDates = SpecialDates; + +{% endhighlight %} + +{% highlight VB %} +Imports Syncfusion.WinForms.Input + +Dim specialDate1 As New SpecialDate() +Dim SpecialDates As New List(Of SpecialDate)() + +specialDate1.BackColor = System.Drawing.Color.White +specialDate1.Font = New System.Drawing.Font("Segoe UI", 11.25F, System.Drawing.FontStyle.Italic, System.Drawing.GraphicsUnit.Point, (CByte(0))) +specialDate1.ForeColor = System.Drawing.Color.Magenta +specialDate1.Image = My.Resources.icons_Womens_day +specialDate1.Description = "International Women's Day" +specialDate1.ImageAlign = System.Drawing.ContentAlignment.MiddleCenter +specialDate1.IsDateVisible = False +specialDate1.TextAlign = System.Drawing.ContentAlignment.MiddleCenter +specialDate1.TextImageRelation = System.Windows.Forms.TextImageRelation.TextBeforeImage +specialDate1.Value = New System.DateTime(2018, 1, 15) +SpecialDates.Add(specialDate1) +calendar.SpecialDates = SpecialDates + +{% endhighlight %} + +{% endtabs %} + +![Windows Forms SfCalendar showing special date](cell-customization-images/specialdates.png) + +## Allow multiple selection + +The WinForms Calendar (SfCalendar) control allows you to select multiple dates by setting the [AllowMultipleSelection](https://help.syncfusion.com/cr/windowsforms/Syncfusion.WinForms.Input.SfCalendar.html#Syncfusion_WinForms_Input_SfCalendar_AllowMultipleSelection) property to true. + +{% tabs %} + +{% highlight C# %} +using Syncfusion.WinForms.Input; + +// Setting to Allow Multiple Selection +calendar.AllowMultipleSelection = true; + +{% endhighlight %} + +{% highlight VB %} +Imports Syncfusion.WinForms.Input + +' Setting to Allow Multiple Selection +calendar.AllowMultipleSelection = True + +{% endhighlight %} + +{% endtabs %} + +![Windows Forms SfCalendar showing multiple date selection](getting-started-images/multiselection.png) + +## Configure first day of week + +The first day of a week can be changed by setting the [FirstDayOfWeek](https://help.syncfusion.com/cr/windowsforms/Syncfusion.WinForms.Input.SfCalendar.html#Syncfusion_WinForms_Input_SfCalendar_FirstDayOfWeek) property. + +{% tabs %} + +{% highlight C# %} +using Syncfusion.WinForms.Input; + +//Setting the First Day Of Week +calendar.FirstDayOfWeek = DayOfWeek.Monday; + +{% endhighlight %} + +{% highlight VB %} +Imports Syncfusion.WinForms.Input + +'Setting the First Day Of Week +calendar.FirstDayOfWeek = DayOfWeek.Monday + +{% endhighlight %} + +{% endtabs %} + +![First day of week](getting-started-images/firstdayofweek.png) + +## Configure to show week number + +The week number of current week in a year can be shown in the calendar control by setting the [ShowWeekNumber](https://help.syncfusion.com/cr/windowsforms/Syncfusion.WinForms.Input.SfCalendar.html#Syncfusion_WinForms_Input_SfCalendar_ShowWeekNumbers) property to true as follows: + +{% tabs %} + +{% highlight C# %} +using Syncfusion.WinForms.Input; + +// Setting the ShowWeekNumber +calendar.ShowWeekNumber = true; + +{% endhighlight %} + +{% highlight VB %} +Imports Syncfusion.WinForms.Input + +' Setting the ShowWeekNumber +calendar.ShowWeekNumber = True + +{% endhighlight %} + +{% endtabs %} + +![SfCalendar shows week number](appearance-images/showweeknumber.png) + +## Configure the calculation of week number based on culture + +You can get the current week number in WinForms Calendar (SfCalendar) control by changing the `CalendarWeekRule` property value of date time format in `CultureInfo`. The default value of `CalendarWeekRule` property is `FirstDay`. + +{% tabs %} + +{% highlight C# %} +using Syncfusion.WinForms.Input; + +SfCalendar sfCalendar1 = new SfCalendar(); +CultureInfo info = new CultureInfo("en-EN"); +info.DateTimeFormat.CalendarWeekRule = CalendarWeekRule.FirstFullWeek; +sfCalendar1.Culture = info; + +{% endhighlight %} + +{% highlight VB %} +Imports Syncfusion.WinForms.Input + +Dim sfCalendar1 As SfCalendar = New SfCalendar() +Dim info As CultureInfo = New CultureInfo("en-EN") +info.DateTimeFormat.CalendarWeekRule = CalendarWeekRule.FirstFullWeek +sfCalendar1.Culture = info + +{% endhighlight %} + +{% endtabs %} \ No newline at end of file diff --git a/WindowsForms/Calendar/Overview.md b/WindowsForms/Calendar/Overview.md new file mode 100644 index 000000000..8e4e216e1 --- /dev/null +++ b/WindowsForms/Calendar/Overview.md @@ -0,0 +1,179 @@ +--- +layout: post +title: About Windows Forms Calendar control | Syncfusion +description: Learn here all about introduction of Syncfusion Windows Forms Calendar (SfCalendar) control and more details. +platform: WindowsForms +control: SfCalendar +documentation: ug +--- + +# Windows Forms Calendar (SfCalendar) Overview + +The **SfCalendar** is a control that allows you to select a date from calendar, and it provides various customization options for the calendar. This provides multiple views of the month, year, decade, and century, so that dates can be selected easily. The **SfCalendar** supports multiple selection and provides complete customization options to the control. + +![Overview of SfCalendar](overview_images/overview.png) + +## Key features + +**Different views** - Supports month, year, decade, and century views to quickly select a date. + +**Date-range support** - Provides maximum and minimum dates support to prevent users from selecting dates within a specified range. + +**Globalization and localization** - Supports localizing the first day of a week, localizing static text, and day names based on the culture. + +**Special dates** - Supports highlighting special dates with icons and descriptions. + +**Blackout dates** - Supports blocking certain dates from selection and user interaction. Separate styles can be applied to blackout dates. + +**Accessibility** - Provides touch, keyboard, and mouse supports to make applications available to a wide variety of users. + +**Testing** - Provides QTP add-in that contains custom libraries, which helps [QTP](https://help.syncfusion.com/windowsforms/testing/uft/supported-controls-and-methods#sfcalendar) to recognize SfCalendar. + +## Choose between different calendar controls + +Syncfusion WinForms suite comes up with following different calendars namely: + +* [SfCalendar](https://www.syncfusion.com/winforms-ui-controls/calendar) +* [MonthCalendarAdv](https://help.syncfusion.com/windowsforms/classic/month-calendar/overview) + +### SfCalendar + +The [SfCalendar](https://help.syncfusion.com/windowsforms/calendar/overview) control provides multiple views of month, year, decade, and century: the dates will be selected easily. This provides easy date selection using keyboard, mouse, and touch interactions. This also supports selecting multiple date, highlighting special dates, and complete customization options. + +### MonthCalendarAdv + +The [MonthCalendarAdv](https://help.syncfusion.com/windowsforms/classic/month-calendar/overview) control allows selecting the date at runtime and various customization options for the calendar. This also supports user interface options such as multiple selection, context menu, globalization, and more. + +### SfCalendar vs MonthCalendarAdv + +Both SfCalendar and MonthCalendarAdv controls are used for the same purposes. But, the SfCalendar control offers rich set of features over MonthCalendarAdv. When cell customization and easy navigation through year, decade, and century views are needed, use SfCalendar. + +You can see some of the specific API differences between SfCalendar and MonthCalendarAdv as follows. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+SfCalendar + +MonthCalendarAdv + +Description +
+SelectedDate + +Value + +Indicates the current date of the calendar. +
+MaxDate + +MaxValue + +Specifies the maximum selectable date by the calendar. +
+MinDate + +MinValue + +Specifies the minimum selectable date by the calendar. +
+ShowHorizontalSplitter, +ShowVerticalSplitter + +GridLines + +To change the border style of the calendar. +
+DrawCell + +DateCellQueryInfo + +To highlight or customize dates to mention the special date on-demand. +
+ +The following list of features in SfCalendar over MonthCalendarAdv are as follows. + + + + + + + + + + + + + + + + + + + + + + + + + + +
+Feature + +Description +
+Special dates + +Highlights the {{'[special date](https://help.syncfusion.com/windowsforms/calendar/cell-customization#special-dates)'| markdownify }} with icons and descriptions. Customizes the position of icon and text. + +
+Blackout dates + +Blocks certain dates from selection and user interaction. Applies separate style for {{'[Blackout dates](https://help.syncfusion.com/windowsforms/calendar/selection#disable-selection)'| markdownify }}. + +
+Cell customization + +Each individual cell appearance in SfCalendar can be {{'[customized](https://help.syncfusion.com/windowsforms/calendar/cell-customization)'| markdownify }} by changing font, background, foreground, and border color. + +
+Appearance customization + +Customizes each individual cell {{'[appearance](https://help.syncfusion.com/windowsforms/calendar/appearance)'| markdownify }}. Changes the text and appearance of a date cell on-demand. + +
+Navigation + +SfCalendar provides {{'[navigation](https://help.syncfusion.com/windowsforms/calendar/navigation)'| markdownify }} support for different set of dates and different views through scrolling, clicking or touching the calendar header. + +
diff --git a/WindowsForms/Calendar/appearance-images/abbreviateddaynames.png b/WindowsForms/Calendar/appearance-images/abbreviateddaynames.png new file mode 100644 index 000000000..c4221777c Binary files /dev/null and b/WindowsForms/Calendar/appearance-images/abbreviateddaynames.png differ diff --git a/WindowsForms/Calendar/appearance-images/cellcustomization.png b/WindowsForms/Calendar/appearance-images/cellcustomization.png new file mode 100644 index 000000000..b5a86c513 Binary files /dev/null and b/WindowsForms/Calendar/appearance-images/cellcustomization.png differ diff --git a/WindowsForms/Calendar/appearance-images/footercustomizations.png b/WindowsForms/Calendar/appearance-images/footercustomizations.png new file mode 100644 index 000000000..5fb51fbdd Binary files /dev/null and b/WindowsForms/Calendar/appearance-images/footercustomizations.png differ diff --git a/WindowsForms/Calendar/appearance-images/headercustomizations.png b/WindowsForms/Calendar/appearance-images/headercustomizations.png new file mode 100644 index 000000000..8d1ddea43 Binary files /dev/null and b/WindowsForms/Calendar/appearance-images/headercustomizations.png differ diff --git a/WindowsForms/Calendar/appearance-images/inactivedaysfalse.PNG b/WindowsForms/Calendar/appearance-images/inactivedaysfalse.PNG new file mode 100644 index 000000000..acd3ccf9f Binary files /dev/null and b/WindowsForms/Calendar/appearance-images/inactivedaysfalse.PNG differ diff --git a/WindowsForms/Calendar/appearance-images/minmax.PNG b/WindowsForms/Calendar/appearance-images/minmax.PNG new file mode 100644 index 000000000..014b855ee Binary files /dev/null and b/WindowsForms/Calendar/appearance-images/minmax.PNG differ diff --git a/WindowsForms/Calendar/appearance-images/navbuttonalignboth.png b/WindowsForms/Calendar/appearance-images/navbuttonalignboth.png new file mode 100644 index 000000000..2dbbab2e0 Binary files /dev/null and b/WindowsForms/Calendar/appearance-images/navbuttonalignboth.png differ diff --git a/WindowsForms/Calendar/appearance-images/navbuttonalignleft.png b/WindowsForms/Calendar/appearance-images/navbuttonalignleft.png new file mode 100644 index 000000000..d18a54e8e Binary files /dev/null and b/WindowsForms/Calendar/appearance-images/navbuttonalignleft.png differ diff --git a/WindowsForms/Calendar/appearance-images/navigationbuttons.png b/WindowsForms/Calendar/appearance-images/navigationbuttons.png new file mode 100644 index 000000000..14f590b69 Binary files /dev/null and b/WindowsForms/Calendar/appearance-images/navigationbuttons.png differ diff --git a/WindowsForms/Calendar/appearance-images/navigationcolor.png b/WindowsForms/Calendar/appearance-images/navigationcolor.png new file mode 100644 index 000000000..e2b10464d Binary files /dev/null and b/WindowsForms/Calendar/appearance-images/navigationcolor.png differ diff --git a/WindowsForms/Calendar/appearance-images/righttoleft.png b/WindowsForms/Calendar/appearance-images/righttoleft.png new file mode 100644 index 000000000..262fbdf6b Binary files /dev/null and b/WindowsForms/Calendar/appearance-images/righttoleft.png differ diff --git a/WindowsForms/Calendar/appearance-images/shownone.png b/WindowsForms/Calendar/appearance-images/shownone.png new file mode 100644 index 000000000..7ee9e6a58 Binary files /dev/null and b/WindowsForms/Calendar/appearance-images/shownone.png differ diff --git a/WindowsForms/Calendar/appearance-images/showtoday.png b/WindowsForms/Calendar/appearance-images/showtoday.png new file mode 100644 index 000000000..4f2efcbe1 Binary files /dev/null and b/WindowsForms/Calendar/appearance-images/showtoday.png differ diff --git a/WindowsForms/Calendar/appearance-images/showweeknumber.PNG b/WindowsForms/Calendar/appearance-images/showweeknumber.PNG new file mode 100644 index 000000000..fc39fccc3 Binary files /dev/null and b/WindowsForms/Calendar/appearance-images/showweeknumber.PNG differ diff --git a/WindowsForms/Calendar/appearance-images/splittercolor.png b/WindowsForms/Calendar/appearance-images/splittercolor.png new file mode 100644 index 000000000..a364e8290 Binary files /dev/null and b/WindowsForms/Calendar/appearance-images/splittercolor.png differ diff --git a/WindowsForms/Calendar/appearance-images/todaycell.png b/WindowsForms/Calendar/appearance-images/todaycell.png new file mode 100644 index 000000000..2d5f4ce40 Binary files /dev/null and b/WindowsForms/Calendar/appearance-images/todaycell.png differ diff --git a/WindowsForms/Calendar/appearance-images/windowsforms-calendar-office2016-colorful-theme.png b/WindowsForms/Calendar/appearance-images/windowsforms-calendar-office2016-colorful-theme.png new file mode 100644 index 000000000..8c0b23a3e Binary files /dev/null and b/WindowsForms/Calendar/appearance-images/windowsforms-calendar-office2016-colorful-theme.png differ diff --git a/WindowsForms/Calendar/appearance-images/windowsforms-calendar-office2016-dark-gray-theme.png b/WindowsForms/Calendar/appearance-images/windowsforms-calendar-office2016-dark-gray-theme.png new file mode 100644 index 000000000..eff1014cc Binary files /dev/null and b/WindowsForms/Calendar/appearance-images/windowsforms-calendar-office2016-dark-gray-theme.png differ diff --git a/WindowsForms/Calendar/appearance-images/windowsforms-calendar-office2016-white-theme.png b/WindowsForms/Calendar/appearance-images/windowsforms-calendar-office2016-white-theme.png new file mode 100644 index 000000000..87931030b Binary files /dev/null and b/WindowsForms/Calendar/appearance-images/windowsforms-calendar-office2016-white-theme.png differ diff --git a/WindowsForms/Calendar/appearance-images/windowsforms-calendar-office2016black.png b/WindowsForms/Calendar/appearance-images/windowsforms-calendar-office2016black.png new file mode 100644 index 000000000..78dace3ed Binary files /dev/null and b/WindowsForms/Calendar/appearance-images/windowsforms-calendar-office2016black.png differ diff --git a/WindowsForms/Calendar/appearance.md b/WindowsForms/Calendar/appearance.md new file mode 100644 index 000000000..5132e9318 --- /dev/null +++ b/WindowsForms/Calendar/appearance.md @@ -0,0 +1,859 @@ +--- +layout: post +title: Appearance in Windows Forms Calendar control | Syncfusion +description: Learn about Appearance support in Syncfusion Windows Forms Calendar (SfCalendar) control and more details. +platform: WindowsForms +control: SfCalendar +documentation: ug +--- + +# Appearance in Windows Forms Calendar (SfCalendar) + +This section explains how to customize the appearance of header, footer, and cells in the calendar by using [style](https://help.syncfusion.com/cr/windowsforms/Syncfusion.WinForms.Input.SfCalendar.html#Syncfusion_WinForms_Input_SfCalendar_Style) properties. + +## Customize header appearance + +The BackColor and ForeColor of each part in the calendar header can be customized. The height of the calendar header can be customized by using the [HeaderHeight](https://help.syncfusion.com/cr/windowsforms/Syncfusion.WinForms.Input.SfCalendar.html#Syncfusion_WinForms_Input_SfCalendar_HeaderHeight) property, and the width of header can be updated automatically from the calendar width. + +### Customize header text + +The header text in the calendar control displays the month and year of the selected date. The calendar header color can be customized by using the following style properties: + +* BackColor: Changes the background color of the header in the calendar. +* ForeColor: Changes the foreground color of the header text that displays the month and year in the calendar header. +* HoverForeColor: Changes the foreground color of the header text on mouse hover. +* Font: Changes the font that is used to draw the header text in the calendar. + +### Customize day names + +The calendar header contains day names of week for the month view. Day names of the calendar header can be customized by using the following properties: + +* DayNamesBackColor: Changes the background color of day names in the calendar header. +* DayNamesForeColor: Changes the foreground color of day names in the calendar header. +* DayNamesFont: Changes the font that is used to draw the day names text in the calendar. + +The following code example illustrates how to customize appearances of the calendar header: + +{% tabs %} + +{% highlight C# %} +using Syncfusion.WinForms.Input; + +// Header customizations + +// Setting header BackColor + +calendar.Style.Header.BackColor = Color.Red; + +// Setting header ForeColor + +calendar.Style.Header.ForeColor = Color.Yellow; + +// Setting header DayNames BackColor + +calendar.Style.Header.DayNamesBackColor = Color.Green; + +// Setting header DayNames ForeColor + +calendar.Style.Header.DayNamesForeColor = Color.WhiteSmoke; + +// Setting header DayNames Font + +calendar.Style.Header.DayNamesFont = new System.Drawing.Font("Calibri", 11.25F, System.Drawing.FontStyle.Regular); + +{% endhighlight %} + +{% highlight VB %} +Imports Syncfusion.WinForms.Input + +' Header customizations + +' Setting header BackColor + +calendar.Style.Header.BackColor = Color.LightGray + +' Setting header ForeColor + +calendar.Style.Header.ForeColor = Color.Blue + +' Setting header DayNames BackColor + +calendar.Style.Header.DayNamesBackColor = Color.LightSeaGreen + +' Setting header DayNames ForeColor + +calendar.Style.Header.DayNamesForeColor = Color.AliceBlue + +' Setting header DayNames Font + +calendar.Style.Header.DayNamesFont = New System.Drawing.Font("Calibri", 11.25!, System.Drawing.FontStyle.Regular) + +{% endhighlight %} + +{% endtabs %} + +![SfCalendar header customization](appearance-images/headercustomizations.png) + +## Customize navigation buttons + +Navigation buttons in the calendar header can be customized by changing the up and down icons. Icons used for navigation buttons can be changed by `UpArrowImage` and `DownArrowImage` properties of the SfCalendar. The color used to draw the default icons for up and down navigation buttons can be customized by the following properties: + +* NavigationButtonForeColor: Changes the foreground color of up and down navigation buttons. +* NavigationButtonHoverForeColor: Changes the foreground color of up and down navigation buttons on mouse hover. +* NavigationButtonDisabledForeColor: Changes the foreground color of up and down navigation buttons in disabled state. + +The following code example illustrates the same: + +{% tabs %} + +{% highlight C# %} +using Syncfusion.WinForms.Input; + +// set the Navigation Button ForeColor + +calendar.Style.Header.NavigationButtonForeColor = Color.HotPink; + +// set the Navigation Button Hover ForeColor + +calendar.Style.Header.NavigationButtonHoverForeColor = Color.Indigo; + +// set the Navigation Button disabled ForeColor + +calendar.Style.Header.NavigationButtonDisabledForeColor = Color.LightGray; + +// set the UpArrowImage + +calendar.UpArrowImage = Image.FromFile("UpArrow.png"); + +// set the DownArrowImage + +calendar.DownArrowImage = Image.FromFile("DownArrow.png"); + +{% endhighlight %} + +{% highlight VB %} +Imports Syncfusion.WinForms.Input + +' set the Navigation Button ForeColor + +calendar.Style.Header.NavigationButtonForeColor = Color.HotPink + +' set the Navigation Button Hover ForeColor + +calendar.Style.Header.NavigationButtonHoverForeColor = Color.Indigo + +' set the Navigation Button disabled ForeColor + +calendar.Style.Header.NavigationButtonDisabledForeColor = Color.LightGray + +' set the UpArrowImage + +calendar.UpArrowImage = Image.FromFile("UpArrow.png") + +' set the DownArrowImage + +calendar.DownArrowImage = Image.FromFile("DownArrow.png") + +{% endhighlight %} + +{% endtabs %} + +![Navigation button color customization](appearance-images/navigationcolor.png) + +### Visibility of navigation buttons + +Navigation buttons are used to move between views in the `SfCalendar`. The visibility of navigation buttons can be customized by the [ShowNavigationButton](https://help.syncfusion.com/cr/windowsforms/Syncfusion.WinForms.Input.SfCalendar.html#Syncfusion_WinForms_Input_SfCalendar_ShowNavigationButton) property. The following code example illustrates the same: + +{% tabs %} + +{% highlight C# %} +using Syncfusion.WinForms.Input; + +// Indicating whether show the navigation buttons which used to move between views. + +calendar.ShowNavigationButton = false; + +{% endhighlight %} + +{% highlight VB %} +Imports Syncfusion.WinForms.Input + +' Indicating whether show the navigation buttons which used to move between views. + +calendar.ShowNavigationButton = false + +{% endhighlight %} + +{% endtabs %} + +![Hide the navigation buttons](appearance-images/navigationbuttons.png) + +### Navigation buttons alignment + +Navigation buttons can be aligned in different sides relative to the calendar header. The alignment of navigation buttons can be customized by the [NavigationButtonAlignment](https://help.syncfusion.com/cr/windowsforms/Syncfusion.WinForms.Input.SfCalendar.html#Syncfusion_WinForms_Input_SfCalendar_NavigationButtonAlignment). The following code example illustrates the same: + +{% tabs %} + +{% highlight C# %} +using Syncfusion.WinForms.Input; + +// Indicating how the navigation buttons should align relative to the Calendar Header. Setting Left alignment. + +calendar.NavigationButtonAlignment = Syncfusion.WinForms.Input.Enums.NavigationButtonAlignment.Left; + +{% endhighlight %} + +{% highlight VB %} +Imports Syncfusion.WinForms.Input + +' Indicating how the navigation buttons should align relative to the Calendar Header. Setting Left alignment. + +calendar.NavigationButtonAlignment = Syncfusion.WinForms.Input.Enums.NavigationButtonAlignment.Left + +{% endhighlight %} + +{% endtabs %} + +![Navigation buttons alignment](appearance-images/navbuttonalignleft.png) + +{% tabs %} + +{% highlight C# %} +using Syncfusion.WinForms.Input; + +// Indicating how the navigation buttons should align relative to the Calendar Header. Setting Both alignment. + +calendar.NavigationButtonAlignment = Syncfusion.WinForms.Input.Enums.NavigationButtonAlignment.Both; + +{% endhighlight %} + +{% highlight VB %} +Imports Syncfusion.WinForms.Input + +' Indicating how the navigation buttons should align relative to the Calendar Header. Setting Both alignment. + +calendar.NavigationButtonAlignment = Syncfusion.WinForms.Input.Enums.NavigationButtonAlignment.Both + +{% endhighlight %} + +{% endtabs %} + +![Both navigation buttons alignment](appearance-images/navbuttonalignboth.png) + +## Customize footer appearance + +The BackColor and ForeColor of each part in the calendar footer can be customized. The height of the calendar footer can be customized by using the [FooterHeight](https://help.syncfusion.com/cr/windowsforms/Syncfusion.WinForms.Input.SfCalendar.html#Syncfusion_WinForms_Input_SfCalendar_FooterHeight) property, and the width of the footer can be updated automatically from the calendar width. The calendar control footer color can be customized by the following style properties: + +* BackColor: Changes the background color of footer in the calendar. +* ForeColor: Changes the foreground color of footer in the calendar. +* HoverBackColor: Changes the background color of footer on mouse hover. +* HoverForeColor: Changes the foreground color of footer text on mouse hover. + +The following code example illustrates how to change the background and foreground of the calendar footer: + +{% tabs %} + +{% highlight C# %} +using Syncfusion.WinForms.Input; + +// Footer customizations + +// Setting Footer BackColor + +calendar.Style.Footer.BackColor = Color.LightGreen; + +// Setting Footer ForeColor + +calendar.Style.Footer.ForeColor = Color.Green; + +// Setting Footer HoverBackColor + +calendar.Style.Footer.HoverBackColor = Color.Yellow; + +// Setting Footer HoverForeColor + +calendar.Style.Footer.HoverForeColor = Color.SpringGreen; + +{% endhighlight %} + +{% highlight VB %} +Imports Syncfusion.WinForms.Input + +' Footer customizations + +' Setting Footer BackColor + +calendar.Style.Footer.BackColor = Color.LightGreen + +' Setting Footer ForeColor + +calendar.Style.Footer.ForeColor = Color.Green + +' Setting Footer HoverBackColor + +calendar.Style.Footer.HoverBackColor = Color.Yellow + +' Setting Footer HoverForeColor + +calendar.Style.Footer.HoverForeColor = Color.SpringGreen + +{% endhighlight %} + +{% endtabs %} + +![Footer customization](appearance-images/footercustomizations.png) + +## Customize cell appearance + +BackColor, ForeColor, and BorderColor of each date cells in the calendar can be customized. Date cells in the calendar control can be customized by the following style properties: + +* CellBackColor: Changes the background color of date cells in the calendar. +* CellForeColor: Changes the foreground color of date cells in the calendar. +* CellHoverBorderColor: Changes the border color of date cells in the calendar. +* CellFont: Changes the font that is used to draw the date text of cell in the calendar. + +### Customize trailing date appearance + +Calendar control trailing (next or previous month) cells can be customized by the following properties: + +* TrailingCellBackColor: Changes the background color of the previous and following month cells that are shown in the current view of the calendar. +* TrailingCellForeColor: Changes the foreground color of the previous and following month cells that are shown in the current view of the calendar. +* TrailingCellFont: Changes the font that is used to draw the date text for the previous and following month cells that are shown in the current view of the calendar. + +### Customize selected date appearance + +The BackColor and ForeColor of the selected date cell in the calendar can customized. The following code illustrates how to customize the selected date cell appearance: + +* SelectedCellBackColor: Changes the background color of the selected date cell in the calendar. +* SelectedCellForeColor: Changes the foreground color of the selected date cell in the calendar. +* SelectedCellBorderColor: Changes the border color of the selected date cell in the calendar. +* SelectedCellHoverBorderColor: Changes the border color of the selected date cell on mouse hover. +* SelectedCellFont: Changes the font that is used to draw the date text of the selected date cell in the calendar. + +The following code example illustrates the customization of calendar cells: + +{% tabs %} + +{% highlight C# %} +using Syncfusion.WinForms.Input; + +// Setting CellBackColor + +calendarr.Style.Cell.CellBackColor = Color.LightBlue; + +// Settig CellForeColor + +calendar.Style.Cell.CellForeColor = Color.Red; + +// Setting CellHoverBorderColor + +calendar.Style.Cell.CellHoverBorderColor = Color.LightCyan; + +// Setting SelectedCellBackColor + +calendar.Style.Cell.SelectedCellBackColor = Color.Blue; + +// Setting SelectedCellForeColor + +calendar.Style.Cell.SelectedCellForeColor = Color.White; + +// Setting SelectedCellBorderColor + +calendar.Style.Cell.SelectedCellBorderColor = Color.Tomato; + +// Setting SelectedCellHoverBorderColor + +calendar.Style.Cell.SelectedCellHoverBorderColor = Color.Yellow; + +// Setting TrailingCellBackColor + +calendar.Style.Cell.TrailingCellBackColor = Color.LightGray; + +// Setting TrailingCellForeColor + +calendar.Style.Cell.TrailingCellForeColor = Color.Black; + +// Setting TrailingCellFont + +calendar.Style.Cell.TrailingCellFont = new System.Drawing.Font("Calibri", 11.25F, System.Drawing.FontStyle.Bold); + +// Setting CellFont + +calendar.Style.Cell.CellFont = new System.Drawing.Font("Calibri", 11.25F, System.Drawing.FontStyle.Bold); + +// Setting selected CellFont + +calendar.Style.Cell.SelectedCellFont = new System.Drawing.Font("Calibri", 11.25F, System.Drawing.FontStyle.Regular); + +{% endhighlight %} + +{% highlight VB %} +Imports Syncfusion.WinForms.Input + +' Setting CellBackColor + +calendar.Style.Cell.CellBackColor = Color.LightBlue + +' Setting CellForeColor + +calendar.Style.Cell.CellForeColor = Color.Red + +' Setting CellHoverBorderColor + +calendar.Style.Cell.CellHoverBorderColor = Color.LightCyan + +' Setting SelectedCellBackColor + +calendar.Style.Cell.SelectedCellBackColor = Color.Blue + +' Setting SelectedCellForeColor + +calendar.Style.Cell.SelectedCellForeColor = Color.White + +' Setting SelectedCellBorderColor + +calendar.Style.Cell.SelectedCellBorderColor = Color.Tomato + +' Setting SelectedCellHoverBorderColor + +calendar.Style.Cell.SelectedCellHoverBorderColor = Color.Yellow + +' Setting TrailingCellBackColor + +calendar.Style.Cell.TrailingCellBackColor = Color.LightGray + +' Setting TrailingCellForeColor + +calendar.Style.Cell.TrailingCellForeColor = Color.Black + +' Setting TrailingCellFont + +calendar.Style.Cell.TrailingCellFont = New System.Drawing.Font("Calibri", 11.25!, System.Drawing.FontStyle.Bold) + +' Setting CellFont + +calendar.Style.Cell.CellFont = New System.Drawing.Font("Calibri", 11.25!, System.Drawing.FontStyle.Bold) + +' Setting selected CellFont + +calendar.Style.Cell.SelectedCellFont = New System.Drawing.Font("Calibri", 11.25!, System.Drawing.FontStyle.Regular) + +{% endhighlight %} + +{% endtabs %} + +![Cell appearance](appearance-images/cellcustomization.png) + +## Themes + +SfCalendar offers four built in themes for professional representation as follows. + +* Office2016Colorful +* Office2016White +* Office2016DarkGray +* Office2016Black + +Theme can be applied to SfCalendar by following the below steps: + +1. [Load theme assembly](#load-theme-assembly) +2. [Apply theme](#apply-theme) + +### Load theme assembly + +**Syncfusion.Office2016Theme.WinForms** assembly should be added as reference to set theme for SfCalendar in any application: + +Before applying theme to SfCalendar, required theme assembly should be loaded as follows. + +{% tabs %} + +{% highlight C# %} + +using Syncfusion.WinForms.Core; +using Syncfusion.WinForms.Core.Events; + +static class Program +{ + /// + /// The main entry point for the application. + /// + + static void Main() + { + SfSkinManager.LoadAssembly(typeof(Office2016Theme).Assembly); + Application.EnableVisualStyles(); + Application.SetCompatibleTextRenderingDefault(false); + Application.Run(new Form1()); + } +} + +{% endhighlight %} + +{% highlight VB %} + +Imports Syncfusion.WinForms.Core +Imports Syncfusion.WinForms.Core.Events + +Friend Module Program +''' +''' The main entry point for the application. +''' + +Sub Main() + SfSkinManager.LoadAssembly(GetType(Office2016Theme).Assembly) + Application.EnableVisualStyles() + Application.SetCompatibleTextRenderingDefault(False) + Application.Run(New Form1()) +End Sub +End Module + +{% endhighlight %} + +{% endtabs %} + +### Apply theme + +Appearance of SfCalendar can be changed by [ThemeName](https://help.syncfusion.com/cr/windowsforms/Syncfusion.WinForms.Input.SfCalendar.html) of SfCalendar. + +#### Office2016Colorful + +This option helps to set the Office2016Colorful Theme. + +{% tabs %} + +{% highlight C# %} +using Syncfusion.WinForms.Input; + +// Office2016Colorful + +calendar.ThemeName = "Office2016Colorful"; + +{% endhighlight %} + +{% highlight VB %} +Imports Syncfusion.WinForms.Input + +' Office2016Colorful + +calendar.ThemeName = "Office2016Colorful" + +{% endhighlight %} + +{% endtabs %} + +![WindowsForms Calendar office2016 colorful theme](appearance-images/windowsforms-calendar-office2016-colorful-theme.png) + +#### Office2016White + +This option helps to set the Office2016White Theme. + +{% tabs %} +{% highlight C# %} +using Syncfusion.WinForms.Input; + +// Office2016White + + calendar.ThemeName = "Office2016White"; + +{% endhighlight %} + +{% highlight VB %} +Imports Syncfusion.WinForms.Input + +' Office2016White + +calendar.ThemeName = "Office2016White" + +{% endhighlight %} + +{% endtabs %} + +![WindowsForms Calendar office2016 white theme](appearance-images/windowsforms-calendar-office2016-white-theme.png) + +#### Office2016DarkGray + +This option helps to set the Office2016DarkGray Theme. + +{% tabs %} + +{% highlight C# %} +using Syncfusion.WinForms.Input; + +// Office2016DarkGray + + calendar.ThemeName = "Office2016DarkGray"; + +{% endhighlight %} + +{% highlight VB %} +Imports Syncfusion.WinForms.Input + +' Office2016DarkGray + +calendar.ThemeName = "Office2016DarkGray" + +{% endhighlight %} + +{% endtabs %} + +![WindowsForms Calendar office2016 dark gray theme](appearance-images/windowsforms-calendar-office2016-dark-gray-theme.png) + +#### Office2016Black + +This option helps to set the Office2016Black Theme. + +{% tabs %} + +{% highlight C# %} +using Syncfusion.WinForms.Input; + +// Office2016Black + + calendar.ThemeName = "Office2016Black"; + +{% endhighlight %} + +{% highlight VB %} +Imports Syncfusion.WinForms.Input + +' Office2016Black + +calendar.ThemeName = "Office2016Black" + +{% endhighlight %} + +{% endtabs %} + +![WindowsForms Calendar office2016 black theme](appearance-images/windowsforms-calendar-office2016black.png) + +## Hide trailing dates + +The `SfCalendar` allows you to hide the days of next month and previous month in the calendar to enhance the appearance of the calendar. This can be achieved by disabling the [TrailingDatesVisible](https://help.syncfusion.com/cr/windowsforms/Syncfusion.WinForms.Input.SfCalendar.html#Syncfusion_WinForms_Input_SfCalendar_TrailingDatesVisible) property. The following code example illustrates how to hide trailing dates in the calendar: + +{% tabs %} + +{% highlight C# %} +using Syncfusion.WinForms.Input; + +// Setting the Next and Previous Months Dates invisible + +calendar.TrailingDatesVisible = false; + +{% endhighlight %} + +{% highlight VB %} +Imports Syncfusion.WinForms.Input + +' Setting the Next and Previous Months Dates invisible + +calendar.TrailingDatesVisible = False + +{% endhighlight %} + +{% endtabs %} + +![Hide trailing dates](appearance-images/inactivedaysfalse.png) + +## Abbreviating day names + +By default, the day names are displayed in an abbreviated form in the calendar control. They can also be displayed in an expanded form by setting the [ShowAbbreviatedDayNames](https://help.syncfusion.com/cr/windowsforms/Syncfusion.WinForms.Input.SfCalendar.html#Syncfusion_WinForms_Input_SfCalendar_ShowAbbreviatedDayNames) property to false. This indicates whether the name of day is abbreviated or expanded. The following code example illustrates how to display the day names in an expanded form: + +{% tabs %} + +{% highlight C# %} +using Syncfusion.WinForms.Input; + +// Setting the Show Abbreviated Day Names + +calendar.ShowAbbreviatedDayNames = false; + +{% endhighlight %} + +{% highlight VB %} +Imports Syncfusion.WinForms.Input + +' Setting the Show Abbreviated Day Names + +calendar.ShowAbbreviatedDayNames = false + +{% endhighlight %} + +{% endtabs %} + +![Abbreviating day names](appearance-images/abbreviateddaynames.png) + +## Right-to-left + +`SfCalendar` control elements can be aligned in right-to-left layout. The `SfCalendar` control is laid out from the right to left when the `RightToLeft` value is set to `Yes`. The following code example illustrates the same: + +{% tabs %} + +{% highlight C# %} +using Syncfusion.WinForms.Input; + +//Enable the Right to Left + +calendar.RightToLeft = RightToLeft.Yes; + +{% endhighlight %} + +{% highlight VB %} +Imports Syncfusion.WinForms.Input + +'Enable the Right to Left + +calendar.RightToLeft = RightToLeft.Yes + +{% endhighlight %} + +{% endtabs %} + +![Right to left support](appearance-images/righttoleft.png) + +## Highlight today cell + +The today cell will be highlighted even the selected date differs from today in the `SfCalendar`. The highlight of today cell can be changed by the [HighlightTodayCell](https://help.syncfusion.com/cr/windowsforms/Syncfusion.WinForms.Input.SfCalendar.html#Syncfusion_WinForms_Input_SfCalendar_HighlightTodayCell) property. The today date cell can also be customized by using the following style properties. The following code snippets illustrates the same: + +{% tabs %} + +{% highlight C# %} +using Syncfusion.WinForms.Input; + +// Indicating whether Today cell highlighted even selected date is different than today + +calendar.HighlightTodayCell = true; + +{% endhighlight %} + +{% highlight VB %} +Imports Syncfusion.WinForms.Input + +' Indicating whether Today cell highlighted even selected date is different than Today + +calendar.HighlightTodayCell = true + +{% endhighlight %} + +{% endtabs %} + +![Highlight today cell](appearance-images/todaycell.png) + +### Customize today cell appearance + +The BackColor, ForeColor, and BorderColor of the today cell in the calendar can be customized. The today cell in the calendar control can be customized by using the following style properties: + +* TodayBackColor: Changes the background color of the today cell in the calendar. +* TodayForeColor: Changes the foreground color of the today cell in the calendar. +* TodayFont: Changes the font that is used to draw the date text of the today cell in the calendar. +* TodayHoverBorderColor: Changes the border color of the today cell on mouse hover. + +## Change visibility of the footer + +The visibility of the calendar footer can be customized by using the [ShowFooter](https://help.syncfusion.com/cr/windowsforms/Syncfusion.WinForms.Input.SfCalendar.html#Syncfusion_WinForms_Input_SfCalendar_ShowFooter) property which contains today and none buttons. The visibility of today and none buttons can be represented separately by [ShowToday](https://help.syncfusion.com/cr/windowsforms/Syncfusion.WinForms.Input.SfCalendar.html#Syncfusion_WinForms_Input_SfCalendar_ShowToday) and [ShowNone](https://help.syncfusion.com/cr/windowsforms/Syncfusion.WinForms.Input.SfCalendar.html#Syncfusion_WinForms_Input_SfCalendar_ShowNone) properties respectively. The following code example illustrates the same: + +{% tabs %} + +{% highlight C# %} +using Syncfusion.WinForms.Input; + +// Indicating the visibility of none button in footer + +calendar.ShowFooter = true; + +calendar.ShowNone = false; + +{% endhighlight %} + +{% highlight VB %} +Imports Syncfusion.WinForms.Input + +' Indicating the visibility of none button in footer + +calendar.ShowFooter = true + +calendar.ShowNone = false + +{% endhighlight %} + +{% endtabs %} + +![Show today button](appearance-images/showtoday.png) + +{% tabs %} + +{% highlight C# %} +using Syncfusion.WinForms.Input; + +// Indicating the visibility of today button in footer + +calendar.ShowFooter = true; + +calendar.ShowToday = false; + +{% endhighlight %} + +{% highlight VB %} +Imports Syncfusion.WinForms.Input + +' Indicating the visibility of today button in footer + +calendar.ShowFooter = true + +calendar.ShowToday = false + +{% endhighlight %} + +{% endtabs %} + +![show none button](appearance-images/shownone.png) + +## Customize splitter appearance + +The visibility of splitters in the calendar control can be customized by setting the [ShowHorizontalSplitter](https://help.syncfusion.com/cr/windowsforms/Syncfusion.WinForms.Input.SfCalendar.html#Syncfusion_WinForms_Input_SfCalendar_ShowHorizontalSplitter) and [ShowVerticalSplitter](https://help.syncfusion.com/cr/windowsforms/Syncfusion.WinForms.Input.SfCalendar.html#Syncfusion_WinForms_Input_SfCalendar_ShowVerticalSplitter) properties. The splitters color for horizontal and vertical splitters can be customized by the [HorizontalSplitterColor](https://help.syncfusion.com/cr/windowsforms/Syncfusion.WinForms.Input.Styles.CalendarVisualStyle.html#Syncfusion_WinForms_Input_Styles_CalendarVisualStyle_HorizontalSplitterColor) and [VerticalSplitterColor](https://help.syncfusion.com/cr/windowsforms/Syncfusion.WinForms.Input.Styles.CalendarVisualStyle.html#Syncfusion_WinForms_Input_Styles_CalendarVisualStyle_VerticalSplitterColor) respectively. The following code example illustrates the same: + +{% tabs %} + +{% highlight C# %} +using Syncfusion.WinForms.Input; + +// Enable Horizontal splitter + + calendar.ShowHorizontalSplitter = true; + +// Enable Vertical splitter + +calendar.ShowVerticalSplitter = true; + +// color used draw the Horizontal splitter in cell view + +calendar.Style.HorizontalSplitterColor = Color.Red; + +// color used draw the vertical splitter in cell view + +calendar.Style.VerticalSplitterColor = Color.Green; + +{% endhighlight %} + +{% highlight VB %} +Imports Syncfusion.WinForms.Input + +' Enable Horizontal splitter + +calendar.ShowHorizontalSplitter = true + +' Enable Vertical splitter + +calendar.ShowVerticalSplitter = true + +' color used draw the Horizontal splitter in cell view + +calendar.Style.HorizontalSplitterColor = Color.Red + +' color used draw the vertical splitter in cell view + +calendar.Style.VerticalSplitterColor = Color.Green + +{% endhighlight %} + +{% endtabs %} + +![Customize splitter appearance](appearance-images/splittercolor.png) diff --git a/WindowsForms/Calendar/cell-customization-images/customizedates.PNG b/WindowsForms/Calendar/cell-customization-images/customizedates.PNG new file mode 100644 index 000000000..109a99931 Binary files /dev/null and b/WindowsForms/Calendar/cell-customization-images/customizedates.PNG differ diff --git a/WindowsForms/Calendar/cell-customization-images/specialdates.PNG b/WindowsForms/Calendar/cell-customization-images/specialdates.PNG new file mode 100644 index 000000000..536358e6b Binary files /dev/null and b/WindowsForms/Calendar/cell-customization-images/specialdates.PNG differ diff --git a/WindowsForms/Calendar/cell-customization-images/windowsforms-calendar-cell-customization.png b/WindowsForms/Calendar/cell-customization-images/windowsforms-calendar-cell-customization.png new file mode 100644 index 000000000..5fc7887bc Binary files /dev/null and b/WindowsForms/Calendar/cell-customization-images/windowsforms-calendar-cell-customization.png differ diff --git a/WindowsForms/Calendar/cell-customization-images/windowsforms-calendar-tooltip-option.png b/WindowsForms/Calendar/cell-customization-images/windowsforms-calendar-tooltip-option.png new file mode 100644 index 000000000..50ec76856 Binary files /dev/null and b/WindowsForms/Calendar/cell-customization-images/windowsforms-calendar-tooltip-option.png differ diff --git a/WindowsForms/Calendar/cell-customization.md b/WindowsForms/Calendar/cell-customization.md new file mode 100644 index 000000000..05c8631f9 --- /dev/null +++ b/WindowsForms/Calendar/cell-customization.md @@ -0,0 +1,486 @@ +--- +layout: post +title: Cell customization in Windows Forms Calendar control | Syncfusion +description: Learn about Cell customization support in Syncfusion Windows Forms Calendar (SfCalendar) control and more details. +platform: WindowsForms +control: SfCalendar +documentation: ug +--- + +# Cell customization in Windows Forms Calendar (SfCalendar) + +`SfCalendar` cells can be customized for mentioning some special or important days. + +## Special dates + +The [SpecialDates](https://help.syncfusion.com/cr/windowsforms/Syncfusion.WinForms.Input.SfCalendar.html#Syncfusion_WinForms_Input_SfCalendar_SpecialDates) property holds a collection of special dates with icons and descriptions for dates that need to be highlighted. The `SpecialDates` contains the following properties to customize the cells:]() + +* **BackColor**: The background color for the special date to fill the cell. +* **Value**: The value for the special date. +* **ForeColor**: The foreground color for the special date to draw the text. +* **Image**: Image to display on special date cell. +* **Font**: The font that is used to draw the special date. +* **IsDateVisible**: A value indicates whether the date text will be visible in the special date cell or not. +* **Description**: The description for special date. +* **ImageAlign**: Aligns an image in the special date. +* **TextAlign**: Aligns the date text in the special date. +* **TextImageRelation**: Aligns the date text and the image relative to each other in the special date. + +To customize the dates, use the following code example: + +{% tabs %} + +{% highlight C# %} +using Syncfusion.WinForms.Input; + +SpecialDate specialDate1 = new SpecialDate(); + +SpecialDate specialDate2 = new SpecialDate(); + +SpecialDate specialDate3 = new SpecialDate(); + +SpecialDate specialDate4 = new SpecialDate(); + +List SpecialDates = new List(); + +specialDate1.BackColor = System.Drawing.Color.White; + +specialDate1.Font = new System.Drawing.Font("Segoe UI", 11.25F, System.Drawing.FontStyle.Italic, + System.Drawing.GraphicsUnit.Point, ((byte)(0))); + +specialDate1.ForeColor = System.Drawing.Color.Magenta; + +specialDate1.Image = Properties.Resources.icons_Womens_day; + +specialDate1.Description = "International Women’s Day"; + +specialDate1.ImageAlign = System.Drawing.ContentAlignment.MiddleCenter; + +specialDate1.IsDateVisible = false; + +specialDate1.TextAlign = System.Drawing.ContentAlignment.MiddleCenter; + +specialDate1.TextImageRelation = System.Windows.Forms.TextImageRelation.TextBeforeImage; + +specialDate1.Value = new System.DateTime(2018, 3, 8, 0, 0, 0, 0); + +specialDate2.BackColor = System.Drawing.Color.White; + +specialDate2.Font = new System.Drawing.Font("Segoe UI", 11.25F, System.Drawing.FontStyle.Italic, + System.Drawing.GraphicsUnit.Point, ((byte)(0))); + +specialDate2.ForeColor = System.Drawing.Color.Magenta; + +specialDate2.Description = "World Forestry Day"; + +specialDate2.Image = Properties.Resources.Icon_World_Forestry_Day; + +specialDate2.ImageAlign = System.Drawing.ContentAlignment.MiddleCenter; + +specialDate2.IsDateVisible = false; + +specialDate2.TextAlign = System.Drawing.ContentAlignment.MiddleCenter; + +specialDate2.TextImageRelation = System.Windows.Forms.TextImageRelation.TextBeforeImage; + +specialDate2.Value = new System.DateTime(2018, 3, 21, 0, 0, 0, 0); + +specialDate3.BackColor = System.Drawing.Color.White; + +specialDate3.Font = new System.Drawing.Font("Segoe UI", 11.25F, System.Drawing.FontStyle.Italic, + System.Drawing.GraphicsUnit.Point, ((byte)(0))); + +specialDate3.ForeColor = System.Drawing.Color.Magenta; + +specialDate3.Image = Properties.Resources.Icon_Water_day; + +specialDate3.Description = "World Day for Water"; + +specialDate3.ImageAlign = System.Drawing.ContentAlignment.MiddleCenter; + +specialDate3.IsDateVisible = false; + +specialDate3.TextAlign = System.Drawing.ContentAlignment.MiddleCenter; + +specialDate3.TextImageRelation = System.Windows.Forms.TextImageRelation.TextBeforeImage; + +specialDate3.Value = new System.DateTime(2018, 3, 24, 0, 0, 0, 0); + +specialDate4.BackColor = System.Drawing.Color.White; + +specialDate4.Font = new System.Drawing.Font("Segoe UI", 11.25F, System.Drawing.FontStyle.Italic, + System.Drawing.GraphicsUnit.Point, ((byte)(0))); + +specialDate4.ForeColor = System.Drawing.Color.Magenta; + +specialDate4.Image = Properties.Resources.Icon_Healthy_day; + +specialDate4.Description = "World Health Day"; + +specialDate4.ImageAlign = System.Drawing.ContentAlignment.MiddleCenter; + +specialDate4.IsDateVisible = false; + +specialDate4.TextAlign = System.Drawing.ContentAlignment.MiddleCenter; + +specialDate4.TextImageRelation = System.Windows.Forms.TextImageRelation.TextBeforeImage; + +specialDate4.Value = new System.DateTime(2018, 4, 7, 0, 0, 0, 0); + +SpecialDates.Add(specialDate1); + +SpecialDates.Add(specialDate2); + +SpecialDates.Add(specialDate3); + +SpecialDates.Add(specialDate4); + +this.sfCalendar.SpecialDates = SpecialDates; + +{% endhighlight %} + +{% highlight VB %} +Imports Syncfusion.WinForms.Input + + Private Sub InitializeComponent() + +Me.components = New System.ComponentModel.Container + +Dim specialDate1 As SpecialDate = New SpecialDate + +Dim specialDate2 As SpecialDate = New SpecialDate + +Dim specialDate3 As SpecialDate = New SpecialDate + +Dim specialDate4 As SpecialDate = New SpecialDate + +Dim SpecialDates As List(Of SpecialDate) = New List(Of SpecialDate) + + +specialDate1.BackColor = System.Drawing.Color.White + +specialDate1.Font = New System.Drawing.Font("Segoe UI", 11.25!, System.Drawing.FontStyle.Italic, + System.Drawing.GraphicsUnit.Point, CType(0,Byte)) + +specialDate1.ForeColor = System.Drawing.Color.Magenta + +specialDate1.Image = Properties.Resources.icons_Womens_day + +specialDate1.Description = "International Womens Day" + +specialDate1.ImageAlign = System.Drawing.ContentAlignment.MiddleCenter + +specialDate1.IsDateVisible = false + +specialDate1.TextAlign = System.Drawing.ContentAlignment.MiddleCenter + +specialDate1.TextImageRelation = System.Windows.Forms.TextImageRelation.TextBeforeImage + +specialDate1.Value = New Date(2018, 3, 8, 0, 0, 0, 0) + +specialDate2.BackColor = System.Drawing.Color.White + +specialDate2.Font = New System.Drawing.Font("Segoe UI", 11.25!, System.Drawing.FontStyle.Italic, + System.Drawing.GraphicsUnit.Point, CType(0,Byte)) + +specialDate2.ForeColor = System.Drawing.Color.Magenta + +specialDate2.Description = "World Forestry Day" + +specialDate2.Image = Properties.Resources.Icon_World_Forestry_Day + +specialDate2.ImageAlign = System.Drawing.ContentAlignment.MiddleCenter + +specialDate2.IsDateVisible = false + +specialDate2.TextAlign = System.Drawing.ContentAlignment.MiddleCenter + +specialDate2.TextImageRelation = System.Windows.Forms.TextImageRelation.TextBeforeImage + +specialDate2.Value = New Date(2018, 3, 21, 0, 0, 0, 0) + +specialDate3.BackColor = System.Drawing.Color.White + +specialDate3.Font = New System.Drawing.Font("Segoe UI", 11.25!, System.Drawing.FontStyle.Italic, + System.Drawing.GraphicsUnit.Point, CType(0,Byte)) + +specialDate3.ForeColor = System.Drawing.Color.Magenta + +specialDate3.Image = Properties.Resources.Icon_Water_day + +specialDate3.Description = "World Day for Water" + +specialDate3.ImageAlign = System.Drawing.ContentAlignment.MiddleCenter + +specialDate3.IsDateVisible = false + +specialDate3.TextAlign = System.Drawing.ContentAlignment.MiddleCenter + +specialDate3.TextImageRelation = System.Windows.Forms.TextImageRelation.TextBeforeImage + +specialDate3.Value = New Date(2018, 3, 24, 0, 0, 0, 0) + +specialDate4.BackColor = System.Drawing.Color.White + +specialDate4.Font = New System.Drawing.Font("Segoe UI", 11.25!, System.Drawing.FontStyle.Italic, + System.Drawing.GraphicsUnit.Point, CType(0,Byte)) + +specialDate4.ForeColor = System.Drawing.Color.Magenta + +specialDate4.Image = Properties.Resources.Icon_Healthy_day + +specialDate4.Description = "World Health Day" + +specialDate4.ImageAlign = System.Drawing.ContentAlignment.MiddleCenter + +specialDate4.IsDateVisible = false + +specialDate4.TextAlign = System.Drawing.ContentAlignment.MiddleCenter + +specialDate4.TextImageRelation = System.Windows.Forms.TextImageRelation.TextBeforeImage + +specialDate4.Value = New Date(2018, 4, 7, 0, 0, 0, 0) + +SpecialDates.Add(specialDate1) + +SpecialDates.Add(specialDate2) + +SpecialDates.Add(specialDate3) + +SpecialDates.Add(specialDate4) + +Me.sfCalendar.SpecialDates = SpecialDates + +End Sub + +{% endhighlight %} + +{% endtabs %} + +![Special dates](cell-customization-images/specialdates.png) + +## ToolTip + +This feature is used to display additional information such as text or image about a cell in the calendar in the form of a tooltip.The `ToolTipOpeningEventArgs` provides the following data for the [ToolTipOpening](https://help.syncfusion.com/cr/windowsforms/Syncfusion.WinForms.Input.SfCalendar.html) event of the calendar. All the [customization with tooltip](/windowsforms/tooltip/appearance) will be reflected in tooltip of cell in SfCalendar. + + +* ToolTipInfo: This option helps to set more information such as text or image about cell in calendar. + +* Value: Identifies the date value of the cell to handle tooltip in the calendar. + +* IsSpecialDate: Indicates whether the date of the cell is special date in the calendar. + +* IsTrailingDate: Indicates whether the date of cell is trailing date for the current month. + +* IsBlackoutDate: Indicates whether the date of cell is BlackoutDate. + +* ColumnIndex: Gets the column index of cell to show tooltip in the calendar. + +* RowIndex: Gets the row index of cell to show tooltip in the calendar. + +* Handled: This option is used to handle the tooltip opening event. It will restrict to visibility of tooltip, and you can set own text or image as tooltip. + +* ViewType: This option helps to represent the ViewType of calendar, whether it is month view, year view, decade view, or century view. + + +{% tabs %} + + +{% highlight C# %} +using Syncfusion.WinForms.Input; + +// Invoking the ToolTipOpening Event. + +this.sfCalendar.ToolTipOpening += SfCalendar_ToolTipOpening; + +//To show ToolTip + +private void SfCalendar_ToolTipOpening(SfCalendar sender, ToolTipOpeningEventArgs e) +{ + if (e.ViewType == CalendarViewType.Month && e.Value.Value.Date == new DateTime(2018, 02, 14)) + { + e.ToolTipInfo.Items[0].Text = "Valentine's Day"; + } + if (e.ViewType == CalendarViewType.Year && e.Value.Value.Month == DateTime.Now.Month) + { + e.ToolTipInfo.Items[0].Text = e.Value.Value.Date.ToString("MMM"); + } + if (e.ViewType == CalendarViewType.Decade && e.RowIndex == 0) + { + e.ToolTipInfo.Items[0].Text = "Decade"; + } + if (e.ViewType == CalendarViewType.Century && e.ColumnIndex == 1) + { + e.ToolTipInfo.Items[0].Text = "Century"; + } +} + +{% endhighlight %} + +{% highlight VB %} +Imports Syncfusion.WinForms.Input + +' Invoking the ToolTipOpening Event. + +AddHandler Me.sfCalendar.ToolTipOpening, AddressOf SfCalendar_ToolTipOpening + +' To show ToolTip + +Private Sub SfCalendar_ToolTipOpening(ByVal sender As SfCalendar, ByVal e As ToolTipOpeningEventArgs) + + If e.ViewType = CalendarViewType.Month AndAlso e.Value.Value.Date = New Date(2018,02,14) Then + e.ToolTipInfo.Items(0).Text = "Valentine's Day" + End If + If e.ViewType = CalendarViewType.Year AndAlso e.Value.Value.Month = Date.Now.Month Then + e.ToolTipInfo.Items(0).Text = e.Value.Value.Date.ToString("MMM") + End If + If e.ViewType = CalendarViewType.Decade AndAlso e.RowIndex = 0 Then + e.ToolTipInfo.Items(0).Text = "Decade" + End If + If e.ViewType = CalendarViewType.Century AndAlso e.ColumnIndex = 1 Then + e.ToolTipInfo.Items(0).Text = "Century" + End If + +End Sub + +{% endhighlight %} + +{% endtabs %} + + + +* **Note**: This event fires only when [ShowToolTip](https://help.syncfusion.com/cr/windowsforms/Syncfusion.WinForms.Input.SfCalendar.html#Syncfusion_WinForms_Input_SfCalendar_ShowToolTip) property value is true. + +![Tooltip option in WindowsForms Calendar](cell-customization-images/windowsforms-calendar-tooltip-option.png) + +## Render cell on-demand + +This feature is used to highlight or customize dates on-demand to mark special dates. The `DrawCellEventArgs` provides the following data for the [DrawCell](https://help.syncfusion.com/cr/windowsforms/Syncfusion.WinForms.Input.SfCalendar.html) event of the calendar. + + +* BackColor: Changes the background color of the date cell to draw in the calendar. + +* ForeColor: Changes the foreground color of the date cell to draw in the calendar. + +* Value: Identifies the date value of the cell to draw in the calendar. + +* IsSpecialDate: Indicates whether the date of the cell is special date in the calendar. + +* IsTrailingDate: Indicates whether the date of cell is trailing date for the current month. + +* IsWeekNumber: Indicates whether the value of cell is week number in the SfCalendar. + +* VerticalAlignment: Changes the vertical alignment of date text of the cell in the calendar. + +* HorizontalAlignment: Changes the horizontal alignment of the date text of the cell in the calendar. + +* ColumnIndex: Gets the column index of cell to draw in the calendar. + +* RowIndex: Gets the row index of cell to draw in the calendar. + +* CellBounds: Gets the cell bounds of the date cell to draw in the calendar. + +* Image: Changes the image for the date cell to draw in the calendar. + +* ImageBounds: Changes the image bounds of the date cell to draw in the calendar. + +* Handled: This option is used to handle the draw cell event. It will restrict to draw default text, and you can draw own text within the bounds of the cell. + +* ViewType: This option helps to represent the ViewType of calendar, whether it is month view, year view, decade view, or century view. + + +The following code example illustrates how to customize the cell on-demand: + +{% tabs %} + +{% highlight C# %} +using Syncfusion.WinForms.Input; + +// Invoking the DrawCell Event. + +this.sfCalendar1.DrawCell += SfCalendar1_DrawCell; + + +// To Draw the Cell + +private void SfCalendar1_DrawCell(SfCalendar sender, DrawCellEventArgs e) + +{ + //Image for year view cell + Image image = null; + //Month View + if (e.ViewType == CalendarViewType.Month && e.Value.Value.Date == DateTime.Now.Date) + { + e.Handled = true; + TextRenderer.DrawText(e.Graphics, e.Value.Value.ToString("dd"), new Font("Segoe UI Bold", + this.sfCalendar1.Style.Cell.CellFont.Size), e.CellBounds, Color.Green); + + e.Graphics.FillRectangle(new SolidBrush(Color.Purple), new Rectangle((e.CellBounds.X + + (e.CellBounds.Width - e.CellBounds.Width / 2)) - 15, + (e.CellBounds.Y + (e.CellBounds.Height - 20)) - 2, 12, 12)); + + e.Graphics.FillRectangle(new SolidBrush(Color.Orange), new Rectangle((e.CellBounds.X + + (e.CellBounds.Width - e.CellBounds.Width / 2)) + 5, + (e.CellBounds.Y + (e.CellBounds.Height - 20)) - 2, 12, 12)); + } + + //Year View + if (e.ViewType == CalendarViewType.Year && e.Value.Value.Month == new DateTime(2018, 02, 14).Month + && e.Value.Value.Year == new DateTime(2018, 02, 14).Year) + { + e.Handled = true; + image = Properties.Resources.Icon_Valentines_day; + e.Graphics.DrawImage(image, e.CellBounds); + } + +} + +{% endhighlight %} + +{% highlight VB %} +Imports Syncfusion.WinForms.Input + +' Invoking the DrawCell Event. + +AddHandler Me.SfCalendar1.DrawCell, AddressOf SfCalendar1_DrawCell + +' To Draw the Cell + + Private Sub SfCalendar1_DrawCell(ByVal sender As SfCalendar, ByVal e As DrawCellEventArgs) + + 'Image for year view cell + Dim image As Image = Nothing + + 'Month View + If e.ViewType = CalendarViewType.Month AndAlso e.Value.Value.Date = Date.Now.Date Then + + e.Handled = True + TextRenderer.DrawText(e.Graphics, e.Value.Value.ToString("dd"), New Font("Segoe UI Bold", + Me.sfCalendar1.Style.Cell.CellFont.Size), e.CellBounds, Color.Green) + + e.Graphics.FillRectangle(New SolidBrush(Color.Purple), New Rectangle((e.CellBounds.X + + (e.CellBounds.Width - e.CellBounds.Width \ 2)) - 15, + (e.CellBounds.Y + (e.CellBounds.Height - 20)) - 2, 12, 12)) + + e.Graphics.FillRectangle(New SolidBrush(Color.Orange), New Rectangle((e.CellBounds.X + + (e.CellBounds.Width - e.CellBounds.Width \ 2)) + 5, + (e.CellBounds.Y + (e.CellBounds.Height - 20)) - 2, 12, 12)) + + End If + + If e.ViewType = CalendarViewType.Year AndAlso e.Value.Value.Month = (New Date(2018, 02, 14)).Month + AndAlso e.Value.Value.Year = (New Date(2018, 02, 14)).Year Then + + e.Handled = True + image = My.Resources.Icon_Valentines_day + e.Graphics.DrawImage(image, e.CellBounds) + + End If + +End Sub + +{% endhighlight %} + +{% endtabs %} + +![Cell customization in WindowsForms Calendar](cell-customization-images/windowsforms-calendar-cell-customization.png) diff --git a/WindowsForms/Calendar/getting-started-images/blackoutdates.PNG b/WindowsForms/Calendar/getting-started-images/blackoutdates.PNG new file mode 100644 index 000000000..a2ffac193 Binary files /dev/null and b/WindowsForms/Calendar/getting-started-images/blackoutdates.PNG differ diff --git a/WindowsForms/Calendar/getting-started-images/firstdayofweek.PNG b/WindowsForms/Calendar/getting-started-images/firstdayofweek.PNG new file mode 100644 index 000000000..cfb9320ba Binary files /dev/null and b/WindowsForms/Calendar/getting-started-images/firstdayofweek.PNG differ diff --git a/WindowsForms/Calendar/getting-started-images/gettingstarted.png b/WindowsForms/Calendar/getting-started-images/gettingstarted.png new file mode 100644 index 000000000..b3033bc59 Binary files /dev/null and b/WindowsForms/Calendar/getting-started-images/gettingstarted.png differ diff --git a/WindowsForms/Calendar/getting-started-images/multiselection.PNG b/WindowsForms/Calendar/getting-started-images/multiselection.PNG new file mode 100644 index 000000000..8bb5ef15d Binary files /dev/null and b/WindowsForms/Calendar/getting-started-images/multiselection.PNG differ diff --git a/WindowsForms/Calendar/getting-started-images/numberofweeksinview.png b/WindowsForms/Calendar/getting-started-images/numberofweeksinview.png new file mode 100644 index 000000000..26f174c89 Binary files /dev/null and b/WindowsForms/Calendar/getting-started-images/numberofweeksinview.png differ diff --git a/WindowsForms/Calendar/getting-started-images/selecteddate.png b/WindowsForms/Calendar/getting-started-images/selecteddate.png new file mode 100644 index 000000000..e3e7374a9 Binary files /dev/null and b/WindowsForms/Calendar/getting-started-images/selecteddate.png differ diff --git a/WindowsForms/Calendar/globalization-images/Defaultrex.png b/WindowsForms/Calendar/globalization-images/Defaultrex.png new file mode 100644 index 000000000..9d9425f61 Binary files /dev/null and b/WindowsForms/Calendar/globalization-images/Defaultrex.png differ diff --git a/WindowsForms/Calendar/globalization-images/NewItem.png b/WindowsForms/Calendar/globalization-images/NewItem.png new file mode 100644 index 000000000..3050807ce Binary files /dev/null and b/WindowsForms/Calendar/globalization-images/NewItem.png differ diff --git a/WindowsForms/Calendar/globalization-images/culture.PNG b/WindowsForms/Calendar/globalization-images/culture.PNG new file mode 100644 index 000000000..68cd127fb Binary files /dev/null and b/WindowsForms/Calendar/globalization-images/culture.PNG differ diff --git a/WindowsForms/Calendar/globalization-images/localization.png b/WindowsForms/Calendar/globalization-images/localization.png new file mode 100644 index 000000000..c7ad20e72 Binary files /dev/null and b/WindowsForms/Calendar/globalization-images/localization.png differ diff --git a/WindowsForms/Calendar/globalization-images/resource.png b/WindowsForms/Calendar/globalization-images/resource.png new file mode 100644 index 000000000..fd416a815 Binary files /dev/null and b/WindowsForms/Calendar/globalization-images/resource.png differ diff --git a/WindowsForms/Calendar/globalization-images/resxfile.png b/WindowsForms/Calendar/globalization-images/resxfile.png new file mode 100644 index 000000000..dbbaf841b Binary files /dev/null and b/WindowsForms/Calendar/globalization-images/resxfile.png differ diff --git a/WindowsForms/Calendar/globalization.md b/WindowsForms/Calendar/globalization.md new file mode 100644 index 000000000..269397f37 --- /dev/null +++ b/WindowsForms/Calendar/globalization.md @@ -0,0 +1,102 @@ +--- +layout: post +title: Globalization in Windows Forms Calendar control | Syncfusion +description: Learn about Globalization support in Syncfusion Windows Forms Calendar (SfCalendar) control and more details. +platform: WindowsForms +control: SfCalendar +documentation: ug +--- + +# Globalization in Windows Forms Calendar (SfCalendar) + +The `SfCalendar` control provides globalization support to design and develop a world-ready application that supports localized interfaces and regional data for users in multiple cultures. Before beginning the design phase, determine the cultures that your application supports. + +## Change culture + +The culture information can be applied to the calendar by using the [Culture](https://help.syncfusion.com/cr/windowsforms/Syncfusion.WinForms.Input.SfCalendar.html#Syncfusion_WinForms_Input_SfCalendar_Culture) property. The following code example illustrates how to change the culture for the calendar: + +{% tabs %} + +{% highlight C# %} +using Syncfusion.WinForms.Input; + +//Setting the culture + +calendar.Culture = new CultureInfo("he-IL"); + +{% endhighlight %} + +{% highlight VB %} +Imports Syncfusion.WinForms.Input + +' Setting the culture + +calendar.Culture = New CultureInfo("he-IL") + +{% endhighlight %} + +{% endtabs %} + +![Culture customization](globalization-images/Culture.png) + +## Localization + +The `SfCalendar` control allows you to localize the static text used in the calendar footer such as today button and none button contents based on application requirement. The following steps are used to override the default resource files from the application resource files and change the static text: + +* **Step 1**: Add the Resources folder to the application. + +* **Step 2**: Add the default resource file of SfCalender into Resources folder. You can download the `Syncfusion.SfInput.WinForms.resx` [here](https://www.syncfusion.com/downloads/support/directtrac/general/ze/Syncfusion.SfInput.WinForms-110589688.zip). + +![Add resx file in application](globalization-images/Defaultrex.png) + +* **Step 3**: Right-click on the Resources folder, select Add and then NewItem. + +* **Step 4**: In Add New Item wizard, select the Resource File option and name the filename as Syncfusion.SfInput.WinForms.<culture name>.resx. For example, have to give name as Syncfusion.SfInput.WinForms.de-DE.resx for German culture. + +![Add resource file in application](globalization-images/NewItem.png) + +* **Step 5**: The culture name indicates the name of the language and country. + +* **Step 6**: Now, select Add option to add the resource file in the Resources folder. + +![Add culture resource file in application](globalization-images/resource.png) + +* **Step 7**: Add the required text to the `NoneButtonText` and `TodayButtonText` fields. + +![Add attribute values](globalization-images/resxfile.png) + +{% tabs %} + +{% highlight C# %} + +//Setting the Localization for Today and None Button + +Thread.CurrentThread.CurrentCulture = new System.Globalization.CultureInfo("de-DE"); + +Thread.CurrentThread.CurrentUICulture = new System.Globalization.CultureInfo("de-DE"); + +// To retrieve Localization resources from target application. + +InputLocalizationResource.SetResources(typeof(Form1).Assembly,"GettingStarted_2015.Resources.Syncfusion.SfInput.WinForms"); + +{% endhighlight %} + +{% highlight VB %} + +' Setting the Localization for Today and None Button + +Thread.CurrentThread.CurrentCulture = New System.Globalization.CultureInfo("de-DE") + +Thread.CurrentThread.CurrentUICulture = New System.Globalization.CultureInfo("de-DE") + +' To retrieve Localization resources from target application. + +InputLocalizationResource.SetResources(GetType(Form1).Assembly, "GettingStarted_2015.Resources.Syncfusion.SfInput.WinForms") + +{% endhighlight %} + +{% endtabs %} + +![Globalization](globalization-images/localization.png) + +N> Refer to the following sample [link](https://www.syncfusion.com/downloads/support/directtrac/general/ze/Localization1520034310.zip) that demonstrates the localization support in SfCalender. diff --git a/WindowsForms/Calendar/navigation-images/allview.png b/WindowsForms/Calendar/navigation-images/allview.png new file mode 100644 index 000000000..6ab98ccff Binary files /dev/null and b/WindowsForms/Calendar/navigation-images/allview.png differ diff --git a/WindowsForms/Calendar/navigation-images/allview1.png b/WindowsForms/Calendar/navigation-images/allview1.png new file mode 100644 index 000000000..116fc0b25 Binary files /dev/null and b/WindowsForms/Calendar/navigation-images/allview1.png differ diff --git a/WindowsForms/Calendar/navigation.md b/WindowsForms/Calendar/navigation.md new file mode 100644 index 000000000..63be0922c --- /dev/null +++ b/WindowsForms/Calendar/navigation.md @@ -0,0 +1,186 @@ +--- +layout: post +title: Navigation in Windows Forms Calendar control | Syncfusion +description: Learn about Navigation support in Syncfusion Windows Forms Calendar (SfCalendar) control and more details. +platform: WindowsForms +control: SfCalendar +documentation: ug +--- + +# Navigation in Windows Forms Calendar (SfCalendar) + +By default, the calendar displays the month view. You can move from current month to previous or next month in the calendar control by clicking navigation buttons in the header, and also you can move from month view to other views (year, decade, century) to select the dates from other year or decade by clicking the header text of the calendar. + +## Different views + +Calendar supports month, year, decade, and century views and provides an intuitive interface through which you can navigate and quickly select dates. + +![Navigation view](navigation-images/allview.png) + +![Navigation view](navigation-images/allview1.png) + +You can choose the required view options in the calendar by the [ViewMode](https://help.syncfusion.com/cr/windowsforms/Syncfusion.WinForms.Input.SfCalendar.html#Syncfusion_WinForms_Input_SfCalendar_ViewMode) property. The following code illustrates how to show year and decade views in the calendar. + +{% tabs %} + +{% highlight C# %} +using Syncfusion.WinForms.Input; + +// setting Year and decade mode to display year and decade view + +calendar.ViewMode = Syncfusion.WinForms.Input.Enums.CalendarViewType.Year | Syncfusion.WinForms.Input.Enums.CalendarViewType.Decade; + +{% endhighlight %} + +{% highlight VB %} +Imports Syncfusion.WinForms.Input + +' setting Year and decade mode to display year and decade view + +calendar.ViewMode = Syncfusion.WinForms.Input.Enums.CalendarViewType.Year Or Syncfusion.WinForms.Input.Enums.CalendarViewType.Decade + +{% endhighlight %} + +{% endtabs %} + +## Navigation through mouse + +The navigation between the next and previous ranges of dates for the current view in the calendar can be done by clicking up and down navigation buttons in the calendar header. The `SfCalendar` control allows you to navigate from one view to other view by clicking the header text of the calendar and selecting the cell from the view to navigate back to the next available view in the `ViewMode`. + +## Navigation through keyboard + +The `SfCalendar` control allows you to navigate from one view to other view by pressing the `CTRL + UP` keys in backward direction or `CTRL + DOWN` keys in forward direction. The SfCalendar allows you to navigate between different cells in the same view by pressing navigation arrows. `CTRL + LEFT` and `CTRL + RIGHT` arrow keys are pressed to navigate to previous or next month of the calendar respectively. + +## Navigation through touch + +The navigation between the next and previous ranges of dates for the current view in the calendar can be done by panning on the calendar view. The `SfCalendar` control allows you to navigate from one view to other view by tapping the header of the calendar. Tapping the cell in view navigates back to the next available view in the `ViewMode`. + +## Handle view change + +The [ViewChanging](https://help.syncfusion.com/cr/windowsforms/Syncfusion.WinForms.Input.SfCalendar.html) event occurs when the calendar header text is clicked to change the calendar from one view to another. The change of view can be restricted on-demand by handling the [ViewChanging](https://help.syncfusion.com/cr/windowsforms/Syncfusion.WinForms.Input.SfCalendar.html) event. The `ViewChangingEventArgs` provides information about the old and new `ViewType`. This helps to restrict the view change in specific scenarios only. The following code example illustrates the same: + +{% tabs %} + +{% highlight C# %} +using Syncfusion.WinForms.Input; + +// Invoked when the view changed. + + calendar.ViewChanging += SfCalendar_ViewChanging; + + private void SfCalendar_ViewChanging(Syncfusion.WinForms.Input.SfCalendar sender, Syncfusion.WinForms.Input.Events.ViewChangingEventArgs args) + + { + + if(args.NewViewType == Syncfusion.WinForms.Input.Enums.CalendarViewType.Year) + + { + + args.Cancel = true; + + } + + } + +{% endhighlight %} + +{% highlight VB %} +Imports Syncfusion.WinForms.Input + +' Invoked when the view changed. + +AddHandler calendar.ViewChanging, AddressOf SfCalendar_ViewChanging + + Private Sub SfCalendar_ViewChanging(ByVal sender As + Syncfusion.WinForms.Input.SfCalendar, ByVal args As Syncfusion.WinForms.Input.Events.ViewChangingEventArgs) + + If (args.NewViewType = Syncfusion.WinForms.Input.Enums.CalendarViewType.Year) Then + + args.Cancel = true + + End If + + End Sub + +{% endhighlight %} + +{% endtabs %} + + +## Handle navigation + +The [Navigating](https://help.syncfusion.com/cr/windowsforms/Syncfusion.WinForms.Input.SfCalendar.html) event occurs when navigating between current range of dates to next or previous range of dates in the calendar. The navigation between the same views can be restricted by handling the [Navigating](https://help.syncfusion.com/cr/windowsforms/Syncfusion.WinForms.Input.SfCalendar.html) event. The `NavigatingEventArgs` provides information about the old and new ranges of dates. This helps to restrict navigation in specific scenarios only. The following code example illustrates the same: + +{% tabs %} + +{% highlight C# %} +using Syncfusion.WinForms.Input; + +// Invoked the Navigating event. + +this.sfCalendar.Navigating += SfCalendar_Navigating; + +private void SfCalendar_Navigating(SfCalendar sender, Syncfusion.WinForms.Input.Events.NavigatingEventArgs args) + +{ + + if (args.NewValue.Start <= new DateTime(2018, 04, 01) && args.NewValue.End >= new DateTime(2018, 04, 30)) + + { + + args.Cancel = true; + + } + +} + +{% endhighlight %} + +{% highlight VB %} +Imports Syncfusion.WinForms.Input + +' Invoked the Navigating event. + +AddHandler Me.sfCalendar.Navigating, AddressOf SfCalendar_Navigating + + Private Sub SfCalendar_Navigating(ByVal sender As SfCalendar, ByVal args As Syncfusion.WinForms.Input.Events.NavigatingEventArgs) + + If ((args.NewValue.Start <= New DateTime(2018, 4, 1)) _ + + AndAlso (args.NewValue.End >= New DateTime(2018, 4, 30))) Then + + args.Cancel = true + + End If + +End Sub + +{% endhighlight %} + +{% endtabs %} + +## Disable animation on navigation + +The SfCalendar animates the content while navigating between different sets of date ranges or moving from one view to another view. This animation can be disabled by setting the [EnableAnimation](https://help.syncfusion.com/cr/windowsforms/Syncfusion.WinForms.Input.SfCalendar.html#Syncfusion_WinForms_Input_SfCalendar_EnableAnimation) to false. The following code example illustrates the same: + +{% tabs %} + +{% highlight C# %} +using Syncfusion.WinForms.Input; + +// Disabling the animation + +calendar.EnableAnimation = false; + +{% endhighlight %} + +{% highlight VB %} +Imports Syncfusion.WinForms.Input + +' Disabling the animation + +calendar.EnableAnimation = False + +{% endhighlight %} + +{% endtabs %} diff --git a/WindowsForms/Calendar/overview_images/overview.png b/WindowsForms/Calendar/overview_images/overview.png new file mode 100644 index 000000000..9be184dac Binary files /dev/null and b/WindowsForms/Calendar/overview_images/overview.png differ diff --git a/WindowsForms/Calendar/selection-images/disable_Weekends.png b/WindowsForms/Calendar/selection-images/disable_Weekends.png new file mode 100644 index 000000000..1e9446659 Binary files /dev/null and b/WindowsForms/Calendar/selection-images/disable_Weekends.png differ diff --git a/WindowsForms/Calendar/selection-images/multiselection.PNG b/WindowsForms/Calendar/selection-images/multiselection.PNG new file mode 100644 index 000000000..ef437d74c Binary files /dev/null and b/WindowsForms/Calendar/selection-images/multiselection.PNG differ diff --git a/WindowsForms/Calendar/selection-images/selection.png b/WindowsForms/Calendar/selection-images/selection.png new file mode 100644 index 000000000..e0706624d Binary files /dev/null and b/WindowsForms/Calendar/selection-images/selection.png differ diff --git a/WindowsForms/Calendar/selection.md b/WindowsForms/Calendar/selection.md new file mode 100644 index 000000000..73f049929 --- /dev/null +++ b/WindowsForms/Calendar/selection.md @@ -0,0 +1,490 @@ +--- +layout: post +title: Selection in Windows Forms Calendar control | Syncfusion +description: Learn about Selection support in Syncfusion Windows Forms Calendar (SfCalendar) control and more details. +platform: WindowsForms +control: SfCalendar +documentation: ug +--- + +# Selection in Windows Forms Calendar (SfCalendar) + +The SfCalendar allows you to select one or more dates. The selected date in the calendar can be changed by the mouse, keyboard, and touch interaction. + +## Change selection + +The `SfCalendar` control allows you to change the selection by clicking a specific date. + +### Change selection through keyboard + +The selected date of the `SfCalendar` control can be changed by the keyboard. `Up/Down` and `Left/Right` arrow keys help you to change the selection according to the keyboard interaction. + +### Change selection programmatically + +The selection of the calendar control can be changed programmatically by setting the [SelectedDate](https://help.syncfusion.com/cr/windowsforms/Syncfusion.WinForms.Input.SfCalendar.html#Syncfusion_WinForms_Input_SfCalendar_SelectedDate) property. The [GoToDate](https://help.syncfusion.com/cr/windowsforms/Syncfusion.WinForms.Input.SfCalendar.html#Syncfusion_WinForms_Input_SfCalendar_GoToDate_System_DateTime_) method is used to validate and move the current view to the view which contains the date value passed as argument for [GoToDate](https://help.syncfusion.com/cr/windowsforms/Syncfusion.WinForms.Input.SfCalendar.html#Syncfusion_WinForms_Input_SfCalendar_GoToDate_System_DateTime_) method. If the date value is not fall between minimum and maximum ranges or blackout dates contains the date, it returns `false`. The following code example illustrates the same: + +{% tabs %} + +{% highlight C# %} +using Syncfusion.WinForms.Input; + +// Move the current view to the date based on given value. Return value as false when the date is not fall within min max range or Blackout dates contains the date. + +if (calendar.GoToDate(new DateTime(2018,02,02))) +{ + calendar.SelectedDate = new DateTime(2018,02,02); +} + +{% endhighlight %} + +{% highlight VB %} +Imports Syncfusion.WinForms.Input + +' Move the current view to the date based on given value. Return value as false when the date is not fall within min max range or Blackout dates contains the date. + +If calendar.GoToDate(New DateTime(2018, 2, 2)) Then + + calendar.SelectedDate = New DateTime(2018, 2, 2) + +End If + +{% endhighlight %} + +{% endtabs %} + +### CellClick event + +The [CellClick](https://help.syncfusion.com/cr/windowsforms/Syncfusion.WinForms.Input.SfCalendar.html) event occurs when clicking a calendar cell. + +#### Event data + +The event handler receives an argument of [CalendarCellEventArgs](https://help.syncfusion.com/cr/windowsforms/Syncfusion.WinForms.Input.Events.CalendarCellEventArgs.html) type that contains data related to this event. The following CalendarCellEventArgs members provide information specific to this event. + + + + + + + + + + + + + + + + + + +
+Members +Description
+{{ '[IsSpecialDate](https://help.syncfusion.com/cr/windowsforms/Syncfusion.WinForms.Input.Events.CalendarCellEventArgs.html#Syncfusion_WinForms_Input_Events_CalendarCellEventArgs_IsSpecialDate)' | markdownify }} +Gets a value that indicates whether the date of cell is SpecialDate in SfCalendar.
+{{ '[ViewType](https://help.syncfusion.com/cr/windowsforms/Syncfusion.WinForms.Input.Events.CalendarCellEventArgs.html#Syncfusion_WinForms_Input_Events_CalendarCellEventArgs_ViewType)' | markdownify }} +Gets the CalendarViewType of the cell to draw in SfCalendar; whether it is month, year, decade or century view in SfCalendar.
+{{ '[IsBlackoutDate](https://help.syncfusion.com/cr/windowsforms/Syncfusion.WinForms.Input.Events.CalendarCellEventArgs.html#Syncfusion_WinForms_Input_Events_CalendarCellEventArgs_IsBlackoutDate)' | markdownify }} +Gets a value that indicates whether the date of cell is BlackoutDate in SfCalendar.
+{{ '[DateRange](https://help.syncfusion.com/cr/windowsforms/Syncfusion.WinForms.Input.Events.CalendarCellEventArgs.html#Syncfusion_WinForms_Input_Events_CalendarCellEventArgs_DateRange)' | markdownify }} +Gets the StartDate and EndDate range values of the clicked cell.
+{{ '[IsWeekNumber](https://help.syncfusion.com/cr/windowsforms/Syncfusion.WinForms.Input.Events.CalendarCellEventArgs.html#Syncfusion_WinForms_Input_Events_CalendarCellEventArgs_IsWeekNumber)' | markdownify }} +Gets a value that indicates whether the date of cell is WeekNumber in SfCalendar.
+{{ '[Value](https://help.syncfusion.com/cr/windowsforms/Syncfusion.WinForms.Input.Events.CalendarCellEventArgs.html#Syncfusion_WinForms_Input_Events_CalendarCellEventArgs_Value)' | markdownify }} +Gets the value of the clicked cell date value.
+{{ '[Text](https://help.syncfusion.com/cr/windowsforms/Syncfusion.WinForms.Input.Events.CalendarCellEventArgs.html#Syncfusion_WinForms_Input_Events_CalendarCellEventArgs_Text)' | markdownify }} +Gets the value of the clicked cell text.
+ +{% tabs %} + +{% highlight C# %} +using Syncfusion.WinForms.Input; + +// Invoking the CellClick event. + +this.sfCalendar1.CellClick += SfCalendar1_CellClick; + +private void SfCalendar1_CellClick(object sender, Syncfusion.WinForms.Input.Events.CalendarCellEventArgs e) +{ + // e.DateRange - Start and end range value of clicked cell + // e.IsBlackoutDate - Indicate whether the date cell is BlackoutDate + // e.IsSpecialDate - Indicate whether the date cell is SpecialDate + // e.IsWeekNumber - Indicate whether the date cell is WeekNumber + // e.Text - Value of clicked cell text + // e.Value - Clicked cell date value + // e.ViewType - Specifies the calendar viewtype +} + +{% endhighlight %} + +{% highlight VB %} +Imports Syncfusion.WinForms.Input + +' Invoking the CellClick event. + +AddHandler Me.sfCalendar1.CellClick, AddressOf SfCalendar1_CellClick + +Private Sub SfCalendar1_CellClick(ByVal sender As Object, ByVal e As Syncfusion.WinForms.Input.Events.CalendarCellEventArgs) + ' e.DateRange - Start and end range value of clicked cell + ' e.IsBlackoutDate - Indicate whether the date cell is BlackoutDate + ' e.IsSpecialDate - Indicate whether the date cell is SpecialDate + ' e.IsWeekNumber - Indicate whether the date cell is WeekNumber + ' e.Text - Value of clicked cell text + ' e.Value - Clicked cell date value + ' e.ViewType - Specifies the calendar viewtype +End Sub + +{% endhighlight %} + +{% endtabs %} + +## Multiple selection + +The `SfCalendar` control allows you to select multiple dates when the [AllowMultipleSelection](https://help.syncfusion.com/cr/windowsforms/Syncfusion.WinForms.Input.SfCalendar.html#Syncfusion_WinForms_Input_SfCalendar_AllowMultipleSelection) property is true. The following code example illustrates how to configure the calendar control to allow multiple date selection: + +{% tabs %} + +{% highlight C# %} +using Syncfusion.WinForms.Input; + +// Setting to Allow Multiple Selection + +calendar.AllowMultipleSelection = true; + +{% endhighlight %} + +{% highlight VB %} +Imports Syncfusion.WinForms.Input + +' Setting to Allow Multiple Selection + +calendar.AllowMultipleSelection = true + +{% endhighlight %} + +{% endtabs %} + + +### Multiple selection through mouse + +The `SfCalendar` allows you to select multiple dates through the mouse interaction by selecting separate cells while pressing the `Ctrl`. + +The specific range of dates can be selected by pressing the `Shift`. Select a date to set the start date of the range selection and select an end date when pressing the `Shift`. + +### Multiple selection through keyboard + +The `SfCalendar` allows you to select multiple dates through the keyboard by selecting the cells while pressing `Shift + UP/DOWN/LEFT/RIGHT` and `Shift + HOME/END` arrow keys. + +* Shift + UP: Selects the dates in the previous week from the selected date. + +* Shift + DOWN: Selects the dates in the next week from the selected date. + +* Shift + RIGHT: Selects the next date from the selected date. + +* Shift + LEFT: Selects the previous date from the selected date. + +* Shift + HOME: Selects the date range from the first day of the month to the current selected date. + +* Shift + END: Selects the date range from the current selected date to the last date of a month. + + +### Multiple selection programmatically + +Multiple dates in the calendar control can be selected programmatically by adding dates to the [SelectedDates](https://help.syncfusion.com/cr/windowsforms/Syncfusion.WinForms.Input.SfCalendar.html#Syncfusion_WinForms_Input_SfCalendar_SelectedDates) collection. If the date which passed for adding with selected dates is not fall within minimum or maximum ranges or present in blackout dates, it will not be added to selected dates. The following code example illustrates how to add the selected dates programmatically. In the below code example, blackout dates contain the first date that is added to selected dates. So, except that first added date, other dates are added to selected dates. + +{% tabs %} + +{% highlight C# %} +using Syncfusion.WinForms.Input; + +calendar.AllowMultipleSelection = true; + +calendar.BlackoutDates.Add(new DateTime(2018, 02, 12)); + +calendar.SelectedDates.Add(new DateTime(2018, 02, 12)); + +calendar.SelectedDates.Add(new DateTime(2018, 02, 13)); + +calendar.SelectedDates.Add(new DateTime(2018, 02, 14)); + +calendar.SelectedDates.Add(new DateTime(2018, 02, 15)); + +calendar.SelectedDates.Add(new DateTime(2018, 02, 16)); + +calendar.SelectedDates.Add(new DateTime(2018, 02, 17)); + +calendar.SelectedDates.Add(new DateTime(2018, 02, 18)); + +{% endhighlight %} + +{% highlight VB %} +Imports Syncfusion.WinForms.Input + +calendar.AllowMultipleSelection = True + +calendar.BlackoutDates.Add(New DateTime(2018, 02, 12)) + +calendar.SelectedDates.Add(New DateTime(2018, 02, 12)) + +calendar.SelectedDates.Add(New DateTime(2018, 02, 13)) + +calendar.SelectedDates.Add(New DateTime(2018, 02, 14)) + +calendar.SelectedDates.Add(New DateTime(2018, 02, 15)) + +calendar.SelectedDates.Add(New DateTime(2018, 02, 16)) + +calendar.SelectedDates.Add(New DateTime(2018, 02, 17)) + +calendar.SelectedDates.Add(New DateTime(2018, 02, 18)) + +{% endhighlight %} + +{% endtabs %} + +![Multiple date selection](selection-images/multiselection.png) + +## Disable selection + +The `BlackoutDates` refers the disabled dates that restrict the user from selecting it. List of dates can be provided to set the [BlackoutDates](https://help.syncfusion.com/cr/windowsforms/Syncfusion.WinForms.Input.SfCalendar.html#Syncfusion_WinForms_Input_SfCalendar_BlackoutDates) for the SfCalendar. The following code example illustrates how to set the `BlackoutDates`: + +{% tabs %} + +{% highlight C# %} +using Syncfusion.WinForms.Input; + +//Setting the Blackout Dates + +var weekends = GetDaysBetween(minDateTimeEdit.Value.Value, maxDateTimeEdit.Value.Value).Where(d => d.DayOfWeek == DayOfWeek.Saturday || d.DayOfWeek == DayOfWeek.Sunday); + +List time = new List(); + +time = weekends.ToList(); + +calendar.BlackoutDates = time; + + +{% endhighlight %} + +{% highlight VB %} +Imports Syncfusion.WinForms.Input + +'Setting the Blackout Dates + +Dim weekends = GetDaysBetween(minDateTimeEdit.Value.Value, maxDateTimeEdit.Value.Value).Where(Function(d) d.DayOfWeek = DayOfWeek.Saturday OrElse d.DayOfWeek = DayOfWeek.Sunday) + +Dim time As List(Of DateTime) = New List(Of DateTime) + +time = weekends.ToList + +calendar.BlackoutDates = time + +{% endhighlight %} + +{% endtabs %} + +![Disable dates](getting-started-images/blackoutdates.png) + +## Minimum datetime + +[MinDate](https://help.syncfusion.com/cr/windowsforms/Syncfusion.WinForms.Input.SfCalendar.html#Syncfusion_WinForms_Input_SfCalendar_MinDate) helps you to restrict the `SelectedDate` of calendar falling lesser than the specific date. If the `SelectedDate` of calendar is less than the `MinDate`, then the `SelectedDate` property will be reset to `MinDate`. If the new `MinDate` value is greater than the `MaxDate`, then the `MaxDate` will be reset to the `MinDate`. + +## Maximum datetime + +[MaxDate](https://help.syncfusion.com/cr/windowsforms/Syncfusion.WinForms.Input.SfCalendar.html#Syncfusion_WinForms_Input_SfCalendar_MaxDate) helps you to restrict the [SelectedDate](https://help.syncfusion.com/cr/windowsforms/Syncfusion.WinForms.Input.SfCalendar.html#Syncfusion_WinForms_Input_SfCalendar_SelectedDate) of calendar falling greater than the specific date. If the `SelectedDate` of calendar is greater than `MaxDate`, then the `SelectedDate` property will be reset to `MaxDate`. When the `MaxDate` is set, if the `MinDate` property is greater than the new `MaxDate`, then the `MinDate` will be reset to the `MaxDate`. + +Sometimes, the value should be restricted between some date ranges. In that scenario, the `MinDate` and `MaxDate` help you to select only the dates between these range, and dates other than this range will not be displayed in the calendar. + +{% tabs %} + +{% highlight C# %} +using Syncfusion.WinForms.Input; + +// Setting the Minimum and Maximum date + +Syncfusion.WinForms.Input.SfCalendar calendar = new Syncfusion.WinForms.Input.SfCalendar(); + +calendar.SelectedDate = new DateTime(2018, 1, 12); + +calendar.MinDate = new DateTime(2018, 1, 05); + +calendar.MaxDate = new DateTime(2018, 1, 25); + +{% endhighlight %} + +{% highlight VB %} +Imports Syncfusion.WinForms.Input + +' Setting the Minimum and Maximum date + +Dim calendar As New Syncfusion.WinForms.Input.SfCalendar () + +calendar.SelectedDate = New DateTime(2018, 1, 12) + +calendar.MinDate = New DateTime(2018, 1, 05) + +calendar.MaxDate = New DateTime(2018, 1, 25) + +{% endhighlight %} + +{% endtabs %} + +![Maximum and mimimum datetime](appearance-images/minmax.png) + +## Handle selection change + + Restricts setting the selected date to handle on-demand. While changing the selection, user can restrict the selection change based on the new selected date by handling the `SelectionChanging` event. + + The [SelectionChanging](https://help.syncfusion.com/cr/windowsforms/Syncfusion.WinForms.Input.SfCalendar.html) event is invoked before the selected date is changed in the calendar. The `SelectionChangingEventArgs` provides the following properties for the `SelectionChanging` event: + +* OldValue: Old selected date of the SfCalendar. +* NewValue: New selected date of the SfCalendar. + +The [SelectionChanged](https://help.syncfusion.com/cr/windowsforms/Syncfusion.WinForms.Input.SfCalendar.html) event is invoked after the selected date is changed in the calendar. The `SelectionChangedEventArgs` provides the following properties for the `SelectionChanged` event: + +* OldValue: Old selected date of the SfCalendar. +* NewValue: New selected date of the SfCalendar. +* IsMultipleDatesSelected: Indicates whether multiples dates are selected in the calendar or not. + +The following code example illustrates how to restrict the selection change on-demand: + +{% tabs %} + +{% highlight C# %} +using Syncfusion.WinForms.Input; + +// Invoking selection changing event + +calendar.SelectionChanging += SfCalendar_SelectionChanging; + +// Invoking selection changed event + +calendar.SelectionChanged += SfCalendar_SelectionChanged; + +// Occurs before the selected date changed in Calendar. + +private void SfCalendar_SelectionChanging(SfCalendar sender, Syncfusion.WinForms.Input.Events.SelectionChangingEventArgs args) + +{ + if(args.NewValue == new DateTime(2018, 1, 16)) + + args.Cancel = true; +} + + +// Occurs after the selected date changed in Calendar. + +private void SfCalendar_SelectionChanged(object sender, EventArgs e) + +{ + + MessageBox.Show("Selection changed"); + +} + +{% endhighlight %} + +{% highlight VB %} +Imports Syncfusion.WinForms.Input + +' Invoking selection changing event + +AddHandler calendar.SelectionChanging, AddressOf SfCalendar_SelectionChanging + +' Invoking selection changed event + +AddHandler calendar.SelectionChanged, AddressOf SfCalendar_SelectionChanged + +' Occurs before the selected date changed in Calendar. + +Private Sub SfCalendar_SelectionChanging(ByVal sender As SfCalendar, ByVal args As Syncfusion.WinForms.Input.Events.SelectionChangingEventArgs) + + args.Cancel = true + +End Sub + +' Occurs after the selected date changed in Calendar. + +Private Sub SfCalendar_SelectionChanged(ByVal sender As Object, ByVal e As EventArgs) + + MessageBox.Show("Selection changed") + +End Sub + +{% endhighlight %} + +{% endtabs %} + +## Clear Selection + +Selected dates of the calendar control will be cleared when the single date is selected. The calendar control also provides support to remove single date from the selected dates by selecting the already selected date while pressing the `CTRL` key. + +### Clear selected dates programmatically + +Selected dates of the calendar control can be removed from the selection by programmatically. The SfCalendar provides [ClearSelection](https://help.syncfusion.com/cr/windowsforms/Syncfusion.WinForms.Input.SfCalendar.html#Syncfusion_WinForms_Input_SfCalendar_ClearSelection_System_DateTime_) method that helps to remove already selected dates and also provides options to select the new date. The following code example illustrates how to remove the selected dates and select new date: + +{% tabs %} + +{% highlight C# %} +using Syncfusion.WinForms.Input; + +// Clear the selected dates and set the new date as selected date + +calendar.ClearSelection(new DateTime(2018, 02, 16)); + +{% endhighlight %} + +{% highlight VB %} +Imports Syncfusion.WinForms.Input + +' Clear the selected dates and set the new date as selected date + +calendar.ClearSelection(New DateTime(2018, 02, 16)) + +{% endhighlight %} + +{% endtabs %} + +![Clear selection dates](selection-images/selection.png) + +## Disable weekends from selection + +Weekends of the calendar can be disabled by providing the Date collection to [BlackoutDates](https://help.syncfusion.com/cr/windowsforms/Syncfusion.WinForms.Input.SfCalendar.html#Syncfusion_WinForms_Input_SfCalendar_BlackoutDates). The following code snippet illustrates how to disable weekends from selection: + +{% tabs %} + +{% highlight C# %} +using Syncfusion.WinForms.Input; + +// disabling the weekends + +sfCalendar1.MinDate = new DateTime(2000, 1, 05); +sfCalendar1.MaxDate = new DateTime(2500, 1, 25); +for (var date = sfCalendar1.MinDate; date <= sfCalendar1.MaxDate; date = date.AddDays(1)) + { + if (date.DayOfWeek == DayOfWeek.Sunday || date.DayOfWeek == DayOfWeek.Saturday) + sfCalendar1.BlackoutDates.Add(date); + } + +{% endhighlight %} + +{% highlight VB %} +Imports Syncfusion.WinForms.Input + +' disabling the weekends + +sfCalendar1.MinDate = New DateTime(2000, 1, 5) +sfCalendar1.MaxDate = New DateTime(2500, 1, 25) +Dim [date] As DateTime = sfCalendar1.MinDate +While [date] <= sfCalendar1.MaxDate + If [date].DayOfWeek = DayOfWeek.Sunday OrElse [date].DayOfWeek = DayOfWeek.Saturday Then + sfCalendar1.BlackoutDates.Add([date]) + End If + [date] = [date].AddDays(1) +End While + +{% endhighlight %} + +{% endtabs %} + +![Disable Weekends](selection-images/disable_Weekends.png) diff --git a/WindowsForms/DateTimePicker/Appearance.md b/WindowsForms/DateTimePicker/Appearance.md new file mode 100644 index 000000000..5b172080f --- /dev/null +++ b/WindowsForms/DateTimePicker/Appearance.md @@ -0,0 +1,495 @@ +--- +layout: post +title: Customization of SfDateTimeEdit | Windows Forms | Syncfusion +description: Customize the visibility of UpDown Button, Key Navigation Support and DropDown Popup alignment support +platform: windowsforms +control: SfDateTimeEdit +documentation: ug +--- + +# Customization of DateTimeEdit + +The appearance of each and every part in the DateTimeEdit can be customized. The SfDateTimeEdit allows you to customize the drop-down icon, calendar, and up-down buttons by using [Style](https://help.syncfusion.com/cr/windowsforms/Syncfusion.WinForms.Input.SfDateTimeEdit.html#Syncfusion_WinForms_Input_SfDateTimeEdit_Style) properties. + +## Customize DateTimeEdit appearance + +The BackColor, ForeColor, and BorderColor of the control can be customized by using the following [Style](https://help.syncfusion.com/cr/windowsforms/Syncfusion.WinForms.Input.SfDateTimeEdit.html#Syncfusion_WinForms_Input_SfDateTimeEdit_Style) properties of the SfDateTimeEdit. The up-down and drop-down buttons of the SfDateTimeEdit control can also be customized using the [Style](https://help.syncfusion.com/cr/windowsforms/Syncfusion.WinForms.Input.SfDateTimeEdit.html#Syncfusion_WinForms_Input_SfDateTimeEdit_Style). + +* BackColor - To change the background color of DateTimeEdit. +* ForeColor - To change the foreground color of date-time text in DateTimeEdit. +* WatermarkForeColor - To change the color to draw the Watermark Text that displays in DateTimeEdit when the Value is null. +* BorderColor - To change the border color of DateTimeEdit. +* DisabledBackColor - To change the background color of DateTimeEdit in disabled or readonly state. +* DisabledForeColor - To change the foreground color of date-time text in disabled or readonly state. +* FocusedBorderColor - To change the border color of DateTimeEdit in focused state. +* HoverBorderColor - To change the border color of DateTimeEdit in mouse hover state. + +The following code snippets illustrates the customization. + +{% tabs %} + +{% highlight C# %} +using Syncfusion.WinForms.Input; + +sfDateTimeEdit1.Style.BorderColor = Color.Red; + +{% endhighlight %} + +{% highlight VB %} +Imports Syncfusion.WinForms.Input + +sfDateTimeEdit1.Style.BorderColor = Color.Red + +{% endhighlight %} + +{% endtabs %} + +![Border color customization](appearance-images/bordercolor.png) + +## Customize drop-down appearance + +The BackColor and ForeColor of drop-down icon to open the calendar can be customized by the following `DropDown` style properties. The following `style` properties of `DropDown` are used to change the color of drop-down icon in different states. + +* BackColor - To change the background color of dropdown icon in DateTimeEdit. +* HoverBackColor - To change the background color of dropdown icon in mouse hover state. +* PressedBackColor - To change the background color of dropdown icon in pressed state. +* ForeColor - To change the foreground color of dropdown icon in DateTimeEdit. +* HoverForeColor - To change the foreground color of dropdown icon in mouse hover state. +* PressedForeColor - To change the foreground color of dropdown icon in pressed state. + +The following code snippets illustrate the same. + +{% tabs %} + +{% highlight C# %} +using Syncfusion.WinForms.Input; + +//Setting the DropDown Fore color + +this.dateTimeEdit.Style.DropDown.ForeColor = Color.Purple; +this.dateTimeEdit.Style.DropDown.HoverForeColor = Color.Yellow; +this.dateTimeEdit.Style.DropDown.PressedForeColor = Color.Green; + +//Setting the DropDown Back color + +this.sfDateTimeEdit1.Style.DropDown.BackColor = Color.Aqua; +this.sfDateTimeEdit1.Style.DropDown.HoverBackColor = Color.Gray; +this.sfDateTimeEdit1.Style.DropDown.PressedBackColor = Color.Orange; + +{% endhighlight %} + +{% highlight VB %} +Imports Syncfusion.WinForms.Input + +'Setting the DropDown Fore color + +Me.dateTimeEdit.Style.DropDown.ForeColor = Color.Purple +Me.dateTimeEdit.Style.DropDown.HoverForeColor = Color.Yellow +Me.dateTimeEdit.Style.DropDown.PressedForeColor = Color.Green + +'Setting the DropDown Back color + +Me.sfDateTimeEdit1.Style.DropDown.BackColor = Color.Aqua +Me.sfDateTimeEdit1.Style.DropDown.HoverBackColor = Color.Gray +Me.sfDateTimeEdit1.Style.DropDown.PressedBackColor = Color.Orange + +{% endhighlight %} + +{% endtabs %} + +![Customize the drop down](appearance-images/dropdownforecolor.png) + +![Customize the drop down](appearance-images/drodownbackcolor.png) + +## Customize default calendar Icon in drop-down button + +The [DateTimeIcon](https://help.syncfusion.com/cr/windowsforms/Syncfusion.WinForms.Input.SfDateTimeEdit.html#Syncfusion_WinForms_Input_SfDateTimeEdit_DateTimeIcon) property in the SfDateTimeEdit control allows you to customize the calendar icon displayed in the drop-down button. By setting this property, you can replace the default icon with your own image, helping to match the design of your application. + +Note: The recommended size for the custom image is 16x16 pixels. If the image is larger than this size, it will be automatically resized to 16x16 pixels. + +{% tabs %} + +{% highlight C# %} +using Syncfusion.WinForms.Input; + +this.dateTimeEdit.DateTimeIcon = Image.FromFile(@"Images/calendar.png"); + +{% endhighlight %} + +{% highlight VB %} +Imports Syncfusion.WinForms.Input + +Me.dateTimeEdit.DateTimeIcon = Image.FromFile(@"Images/calendar.png"); + +{% endhighlight %} + +{% endtabs %} + +![Customize drop-down calendar appearance](appearance-images/CalendarIconCustomization.png) + +### Change visibility of drop-down button + +The drop-down button in the SfDateTimeEdit allows you to open the pop-up calendar by using the mouse interaction. The visibility of drop-down button can be changed by the [ShowDropDown](https://help.syncfusion.com/cr/windowsforms/Syncfusion.WinForms.Input.SfDateTimeEdit.html#Syncfusion_WinForms_Input_SfDateTimeEdit_ShowDropDown) property. + +{% tabs %} + +{% highlight C# %} +using Syncfusion.WinForms.Input; + +//Enable the DropDown Button + +this.dateTimeEdit.ShowDropDown = true; + +//Disable the DropDown Button + +this.dateTimeEdit.ShowDropDown = false; + +{% endhighlight %} + +{% highlight VB %} +Imports Syncfusion.WinForms.Input + +'Enable the DropDown Button + +Me.dateTimeEdit.ShowDropDown = true + +'Disable the DropDown Button + +Me.dateTimeEdit.ShowDropDown = false + +{% endhighlight %} + +{% endtabs %} + +![Hide the dropdown button](appearance-images/showdropdown.png) + +## Customize up-down appearance + +The ForeColor of up-down icon in the `SfDateTimeEdit` can be customized by the following `Style` properties. The following `style` properties of the SfDateTimeEdit can be used to change the color of up-down icon in different states: + +* UpDownForeColor - To change the foreground color of up-down icon in DateTimeEdit. +* UpDownHoverForeColor - To change the foreground color of up-down icon in mouse hover state. +* UpDownBackColor - To change the background color of up-down icon in DateTimeEdit. +* UpDownHoverBackColor - To change the background color of up-down icon in mouse hover state. + +The following code snippets illustrate the same. + +{% tabs %} + +{% highlight C# %} +using Syncfusion.WinForms.Input; + +//Setting the UpDown Fore color + +this.dateTimeEdit.Style.UpDownForeColor = Color.HotPink; +this.dateTimeEdit.Style.UpDownHoverForeColor = Color.Blue; +this.dateTimeEdit.Style.UpDownBackColor = Color.LightGray; +this.dateTimeEdit.Style.UpDownHoverBackColor = Color.Yellow; + +{% endhighlight %} + +{% highlight VB %} +Imports Syncfusion.WinForms.Input + +'Setting the UpDown Fore color + +Me.dateTimeEdit.Style.UpDownForeColor = Color.HotPink +Me.dateTimeEdit.Style.UpDownHoverForeColor = Color.Blue +Me.dateTimeEdit.Style.UpDownBackColor = Color.LightGray +Me.dateTimeEdit.Style.UpDownHoverBackColor = Color.Yellow + +{% endhighlight %} + +{% endtabs %} + +![Up down button customization ](appearance-images/updowncolor.png) + +### Change visibility of up-down + +The up-down allows you to change the value by increment or decrement of values of the date, month, and year based on the selected field. The value change by up and down buttons are only applicable when the [DateTimeEditingMode](https://help.syncfusion.com/cr/windowsforms/Syncfusion.WinForms.Input.SfDateTimeEdit.html#Syncfusion_WinForms_Input_SfDateTimeEdit_DateTimeEditingMode) is mask. The visibility of up-down buttons can be changed by the [ShowUpDown](https://help.syncfusion.com/cr/windowsforms/Syncfusion.WinForms.Input.SfDateTimeEdit.html#Syncfusion_WinForms_Input_SfDateTimeEdit_ShowUpDown) property. + +{% tabs %} + +{% highlight C# %} +using Syncfusion.WinForms.Input; + +//Enable the UpDown Button + +this.dateTimeEdit.ShowUpDown = true; + +//Disable the UpDown Button + +this.dateTimeEdit.ShowUpDown = false; + +{% endhighlight %} + +{% highlight VB %} +Imports Syncfusion.WinForms.Input + +'Enable the UpDown Button + +Me.dateTimeEdit.ShowUpDown = true + +'Disable the UpDown Button + +Me.dateTimeEdit.ShowUpDown = false + +{% endhighlight %} + +{% endtabs %} + +![Customize the visibility of up down](appearance-images/showupdown.png) + +## Customize drop-down calendar appearance + +The drop-down calendar of the SfDateTimeEdit can be obtained from the [MonthCalendar](https://help.syncfusion.com/cr/windowsforms/Syncfusion.WinForms.Input.SfDateTimeEdit.html#Syncfusion_WinForms_Input_SfDateTimeEdit_MonthCalendar) property. All the [customization with calendar](/windowsforms/calendar/appearance) will be reflected in drop-down calendar of the SfDateTimeEdit. The following code snippets illustrate how to change the visibility of footer in the drop-down calendar of the SfDateTimeEdit: + +{% tabs %} + +{% highlight C# %} +using Syncfusion.WinForms.Input; + +dateTimeEdit.MonthCalendar.ShowFooter = false; + +{% endhighlight %} + +{% highlight VB %} +Imports Syncfusion.WinForms.Input + +dateTimeEdit.MonthCalendar.ShowFooter = false + +{% endhighlight %} + +{% endtabs %} + +![Customize drop-down calendar appearance](appearance-images/footer.png) + +## Drop-down calendar size customization + +The size of the drop-down calendar can be customized by using the [DropDownSize](https://help.syncfusion.com/cr/windowsforms/Syncfusion.WinForms.Input.SfDateTimeEdit.html#Syncfusion_WinForms_Input_SfDateTimeEdit_DropDownSize) property. + +{% tabs %} + +{% highlight C# %} +using Syncfusion.WinForms.Input; + +//Setting DropDownSize + +this.dateTimeEdit.DropDownSize = new Size(294, 293); +this.dateTimeEdit.Width = 294; + +{% endhighlight %} + +{% highlight VB %} +Imports Syncfusion.WinForms.Input + +'Setting DropDownSize + +Me.dateTimeEdit.DropDownSize = New Size(294, 293) +Me.dateTimeEdit.Width = 294 + +{% endhighlight %} + +{% endtabs %} + +![Drop-down calendar size customization](appearance-images/dropdownsize.png) + +## Show Week Numbers + +Week numbers can be displayed by setting [ShowWeekNumbers](https://help.syncfusion.com/cr/windowsforms/Syncfusion.WinForms.Input.SfCalendar.html#Syncfusion_WinForms_Input_SfCalendar_ShowWeekNumbers) property as `true`. + +{% tabs %} + +{% highlight C# %} +using Syncfusion.WinForms.Input; + +//Setting ShowWeekNumbers + +sfDateTimeEdit1.MonthCalendar.ShowWeekNumbers = true; + +{% endhighlight %} + +{% endtabs %} + +![Display Week Numbers](appearance-images/showweeknumbers.png) + +## Themes + +SfDateTimeEdit offers four built-in themes for professional representation as follows. + +* Office2016Colorful +* Office2016White +* Office2016DarkGray +* Office2016Black + +Theme can be applied to SfDateTimeEdit by following the below steps: + +1. [Load theme assembly](#load-theme-assembly) +2. [Apply theme](#apply-theme) + +### Load theme assembly + +**Syncfusion.Office2016Theme.WinForms** assembly should be added as reference to set theme for SfDateTimeEdit in any application: + +Before applying theme to SfDateTimeEdit, required theme assembly should be loaded as follows. + +{% tabs %} + +{% highlight C# %} +using Syncfusion.WinForms.Input; +using Syncfusion.WinForms.Controls; + +static class Program +{ + /// + /// The main entry point for the application. + /// + + static void Main() + { + SfSkinManager.LoadAssembly(typeof(Office2016Theme).Assembly); + Application.EnableVisualStyles(); + Application.SetCompatibleTextRenderingDefault(false); + Application.Run(new Form1()); + } +} + +{% endhighlight %} + +{% highlight VB %} +Imports Syncfusion.WinForms.Input +Imports Syncfusion.WinForms.Controls + +Friend Module Program + ''' + ''' The main entry point for the application. + ''' + Sub Main() + SfSkinManager.LoadAssembly(GetType(Office2016Theme).Assembly) + Application.EnableVisualStyles() + Application.SetCompatibleTextRenderingDefault(False) + Application.Run(New Form1()) + End Sub +End Module + +{% endhighlight %} + +{% endtabs %} + +### Apply theme + +Appearance of SfDateTimeEdit can be changed by [ThemeName](https://help.syncfusion.com/cr/windowsforms/Syncfusion.WinForms.Input.SfDateTimeEdit.html) of SfDateTimeEdit. + +#### Office2016Colorful + +This option helps to set the Office2016Colorful Theme. + +{% tabs %} + +{% highlight C# %} +using Syncfusion.WinForms.Input; + +// Office2016Colorful + +this.dateTimeEdit.ThemeName = "Office2016Colorful"; + +{% endhighlight %} + +{% highlight VB %} +Imports Syncfusion.WinForms.Input + +' Office2016Colorful + +Me.dateTimeEdit.ThemeName = "Office2016Colorful" + +{% endhighlight %} + +{% endtabs %} + +![SfDateTimeEdit Office2016Colorful appearance](appearance-images/Office2016Colorful.png) + +#### Office2016White + +This option helps to set the Office2016White Theme. + +{% tabs %} + +{% highlight C# %} +using Syncfusion.WinForms.Input; + +// Office2016White + +this.dateTimeEdit.ThemeName = "Office2016White"; + +{% endhighlight %} + +{% highlight VB %} +Imports Syncfusion.WinForms.Input + +' Office2016White + +Me.dateTimeEdit.ThemeName = "Office2016White" + +{% endhighlight %} + +{% endtabs %} + +![SfDateTimeEdit Office2016White appearance](appearance-images/Office2016White.png) + +#### Office2016DarkGray + +This option helps to set the Office2016DarkGray Theme. + +{% tabs %} + +{% highlight C# %} +using Syncfusion.WinForms.Input; + +// Office2016DarkGray + +this.dateTimeEdit.ThemeName = "Office2016DarkGray"; + +{% endhighlight %} + +{% highlight VB %} +Imports Syncfusion.WinForms.Input + +' Office2016DarkGray + +Me.dateTimeEdit.ThemeName = "Office2016DarkGray" + +{% endhighlight %} + +{% endtabs %} + +![SfDateTimeEdit Office2016DarkGray appearance](appearance-images/Office2016DarkGray.png) + +#### Office2016Black + +This option helps to set the Office2016Black Theme. + +{% tabs %} + +{% highlight C# %} +using Syncfusion.WinForms.Input; + +// Office2016Black + +this.dateTimeEdit.ThemeName = "Office2016Black"; + +{% endhighlight %} + +{% highlight VB %} +Imports Syncfusion.WinForms.Input + +' Office2016Black + +Me.dateTimeEdit.ThemeName = "Office2016Black" + +{% endhighlight %} + +{% endtabs %} + +![SfDateTimeEdit Office2016Black appearance](appearance-images/Office2016Black.png) + + diff --git a/WindowsForms/DateTimePicker/DateRange.md b/WindowsForms/DateTimePicker/DateRange.md new file mode 100644 index 000000000..b53640ccb --- /dev/null +++ b/WindowsForms/DateTimePicker/DateRange.md @@ -0,0 +1,97 @@ +--- +layout: post +title: Minimum and Maximum value | SfDateTimeEdit | WindowsForms | Syncfusion +description: Learn here all about Date range feature of Syncfusion Windows Forms DateTimePicker (SfDateTimeEdit) control and more. +platform: WindowsForms +control: SfDateTimeEdit +documentation: ug +--- + +# DateRange in Windows Forms DateTimePicker (SfDateTimeEdit) + +The user can be prevented from setting a date and time outside a specified range by using the [MinDateTime](https://help.syncfusion.com/cr/windowsforms/Syncfusion.WinForms.Input.SfDateTimeEdit.html#Syncfusion_WinForms_Input_SfDateTimeEdit_MinDateTime) and [MaxDateTime](https://help.syncfusion.com/cr/windowsforms/Syncfusion.WinForms.Input.SfDateTimeEdit.html#Syncfusion_WinForms_Input_SfDateTimeEdit_MaxDateTime) properties of the SfDateTimeEdit. + +## Change the value + +The date and time of the SfDateTimeEdit can be changed by the [Value](https://help.syncfusion.com/cr/windowsforms/Syncfusion.WinForms.Input.SfDateTimeEdit.html#Syncfusion_WinForms_Input_SfDateTimeEdit_Value) property. The value can be set to null when the [AllowNull](https://help.syncfusion.com/cr/windowsforms/Syncfusion.WinForms.Input.SfDateTimeEdit.html#Syncfusion_WinForms_Input_SfDateTimeEdit_AllowNull) is true. The default mode of the DateTimeEditing only allows you to change the selected value to null; the mask mode will not allow you to change the value to null. The value can also be edited by selecting the `DateTimeField` and editing the value. This value will be validated when the control lost its focus or the enter key is pressed. + +The [ValueChanged](https://help.syncfusion.com/cr/windowsforms/Syncfusion.WinForms.Input.SfDateTimeEdit.html) event will be invoked when the change is occurred in the `Value` property of the SfDateTimeEdit. If you need to do any custom actions while the value changes, that can be done at the ValueChanged event. + +### Change value by DateTimeText + +The value of the SfDateTimeEdit can also be changed by the [DateTimeText](https://help.syncfusion.com/cr/windowsforms/Syncfusion.WinForms.Input.SfDateTimeEdit.html#Syncfusion_WinForms_Input_SfDateTimeEdit_DateTimeText). The DateTimeText should be provided in the same pattern as [DateTimePattern](https://help.syncfusion.com/cr/windowsforms/Syncfusion.WinForms.Input.SfDateTimeEdit.html#Syncfusion_WinForms_Input_SfDateTimeEdit_DateTimePattern). + +## Minimum DateTime + +The [MinDateTime](https://help.syncfusion.com/cr/windowsforms/Syncfusion.WinForms.Input.SfDateTimeEdit.html#Syncfusion_WinForms_Input_SfDateTimeEdit_MinDateTime) helps you to restrict the DateTime value which is lesser than the specific DateTime value. If the `Value` of SfDateTimeEdit is less than `MinDateTime`, then the `Value` property will be reset to MinDateTime. The `MinDateTime` should be lesser than the `MaxDateTime` of the SfDateTimeEdit. When the MinDateTime is set, if the new `MinDateTime` value is greater than the `MaxDateTime`, then the MaxDateTime will be reset to the MinDateTime. + +## Maximum DateTime + +The [MaxDateTime](https://help.syncfusion.com/cr/windowsforms/Syncfusion.WinForms.Input.SfDateTimeEdit.html#Syncfusion_WinForms_Input_SfDateTimeEdit_MaxDateTime) helps you to restrict the DateTime value that is set greater than the specific DateTime value. If the `Value` of SfDateTimeEdit is greater than `MaxDateTime`, then the `Value` property will be reset to MaxDateTime. The `MaxDateTime` should be greater than `MinDateTime` of the SfDateTimeEdit. When the MaxDateTime is set, if the `MinDateTime` property is greater than the new `MaxDateTime`, then the MinDateTime will be reset to the MaxDateTime. + +Sometimes, the value should be restricted in between some particular date range. For example, consider a project for the hotel reservation system. The “In DateTime” has to be lesser than the “Out DateTime” and vice versa. So “In DateTime” has to be set as minimum DateTime and “Out DateTime” has to be set as maximum DateTime in the `SfDateTimeEdit` control. + +{% tabs %} + +{% highlight C# %} +using Syncfusion.WinForms.Input; + +Syncfusion.WinForms.Input.SfDateTimeEdit dateTimeEdit = new Syncfusion.WinForms.Input.SfDateTimeEdit(); + +this.Controls.Add(dateTimeEdit); + +dateTimeEdit.Value = new DateTime(2018, 2, 1); + +dateTimeEdit.MinDateTime = new DateTime(2018, 2, 3); + +dateTimeEdit.MaxDateTime = new DateTime(2018, 2, 22); + +{% endhighlight %} + +{% highlight VB %} +Imports Syncfusion.WinForms.Input + +Dim dateTimeEdit As Syncfusion.WinForms.Input.SfDateTimeEdit = New Syncfusion.WinForms.Input.SfDateTimeEdit + +Me.Controls.Add(dateTimeEdit) + +dateTimeEdit.Value = New DateTime(2018, 2, 1) + +dateTimeEdit.MinDateTime = New DateTime(2018, 2, 3) + +dateTimeEdit.MaxDateTime = New DateTime(2018, 2, 22) + +{% endhighlight %} + +{% endtabs %} + +![Date range](daterange-images/minmax.png) + +## Detect the value change + +The [Value](https://help.syncfusion.com/cr/windowsforms/Syncfusion.WinForms.Input.SfDateTimeEdit.html#Syncfusion_WinForms_Input_SfDateTimeEdit_Value) property is used to set the current selected DateTime of the `SfDateTimeEdit`. The value change can be detected by handling the [ValueChanged](https://help.syncfusion.com/cr/windowsforms/Syncfusion.WinForms.Input.SfDateTimeEdit.html) event. + +{% tabs %} + +{% highlight C# %} +using Syncfusion.WinForms.Input; + +private void DateTimeEdit_ValueChanged(object sender, EventArgs e) +{ + MessageBox.Show("SfDateTimeEdit value has been changed"); +} + +{% endhighlight %} + +{% highlight VB %} +Imports Syncfusion.WinForms.Input + +Private Sub DateTimeEdit_ValueChanged(ByVal sender As Object, ByVal e As EventArgs) + +MessageBox.Show("SfDateTimeEdit value has been changed") + +End Sub + +{% endhighlight %} + +{% endtabs %} diff --git a/WindowsForms/DateTimePicker/DateTimeDisplayPattern.md b/WindowsForms/DateTimePicker/DateTimeDisplayPattern.md new file mode 100644 index 000000000..76dfbd15c --- /dev/null +++ b/WindowsForms/DateTimePicker/DateTimeDisplayPattern.md @@ -0,0 +1,124 @@ +--- +layout: post +title: Display Pattern in Windows Forms DateTimePicker | Syncfusion +description: Learn about Display Pattern support in Syncfusion Windows Forms DateTimePicker (SfDateTimeEdit) control and more. +platform: WindowsForms +control: SfDateTimeEdit +documentation: ug +--- + +# Display Pattern in Windows Forms DateTimePicker (SfDateTimeEdit) + +The [DateTimePattern](https://help.syncfusion.com/cr/windowsforms/Syncfusion.WinForms.Input.SfDateTimeEdit.html#Syncfusion_WinForms_Input_SfDateTimeEdit_DateTimePattern) helps you to specify the date-time display pattern for the SfDateTimeEdit. The display format of the date in the `SfDateTimeEdit` control can be customized by the pattern and custom display pattern properties. + +## DateTime format + +The `SfDateTimeEdit` control supports the following DateTime format: + +* LongDate +* LongTime +* ShortDate +* ShortTime +* FullDateTime +* MonthDay +* Custom +* SortableDateTime +* UniversalSortableDateTime +* RFC1123 +* YearMonth + +![date time edit pattern](datetimepattern-images/allpattern.png) + +The different display formats of the DateTime can be set by using the [DateTimePattern](https://help.syncfusion.com/cr/windowsforms/Syncfusion.WinForms.Input.SfDateTimeEdit.html#Syncfusion_WinForms_Input_SfDateTimeEdit_DateTimePattern) property. The following code snippet illustrates how to set the format as LongDate: + +{% tabs %} + +{% highlight C# %} +using Syncfusion.WinForms.Input; + +Syncfusion.WinForms.Input.SfDateTimeEdit dateTimeEdit = new Syncfusion.WinForms.Input.SfDateTimeEdit(); + +this.Controls.Add(dateTimeEdit); + +dateTimeEdit.Value = new DateTime(2017, 07, 05); + +dateTimeEdit.DateTimePattern = DateTimePattern.LongDate; + +{% endhighlight %} + +{% highlight VB %} +Imports Syncfusion.WinForms.Input + +Dim dateTimeEdit As Syncfusion.WinForms.Input.SfDateTimeEdit = New Syncfusion.WinForms.Input.SfDateTimeEdit + +Me.Controls.Add(dateTimeEdit) + +dateTimeEdit.Value = New DateTime(2017, 7, 5) + +dateTimeEdit.DateTimePattern = DateTimePattern.LongDate + +{% endhighlight %} + +{% endtabs %} + +![DateTimeEdit pattern](datetimepattern-images/datetimepattern_longdate.png) + +## Custom display pattern + +The custom pattern can be displayed in the `SfDateTimeEdit` control by using the [Format](https://help.syncfusion.com/cr/windowsforms/Syncfusion.WinForms.Input.SfDateTimeEdit.html#Syncfusion_WinForms_Input_SfDateTimeEdit_Format) property. Refer to the following list to create the custom format for the `SfDateTimeEdit`: + +* d: Day of the month. +* ddd: Abbreviated day of the week name. +* dddd: Full name of day of the week. +* M: The month, from 1 to 12. +* MMM: Short name of month. +* MMMM: Long name of the month. +* yy: Last two digits of the year. +* yyyy: Full year. +* hh: Hour. +* mm: Minutes. +* ss: Seconds. +* tt: The AM/PM indicator. + +{% tabs %} + +{% highlight C# %} +using Syncfusion.WinForms.Input; + +Syncfusion.WinForms.Input.SfDateTimeEdit dateTimeEdit = new Syncfusion.WinForms.Input.SfDateTimeEdit(); + +this.Controls.Add(dateTimeEdit); + +dateTimeEdit.Value = new DateTime(2017, 07, 05); + +dateTimeEdit.DateTimePattern = DateTimePattern.Custom; + +//Setting Custom Pattern + +dateTimeEdit.Format = "MM/dd/yy hh:mm:ss"; + +{% endhighlight %} + +{% highlight VB %} +Imports Syncfusion.WinForms.Input + +Dim dateTimeEdit As Syncfusion.WinForms.Input.SfDateTimeEdit = New Syncfusion.WinForms.Input.SfDateTimeEdit + +Me.Controls.Add(dateTimeEdit) + +dateTimeEdit.Value = New DateTime(2017, 7, 5) + +dateTimeEdit.DateTimePattern = DateTimePattern.Custom + +'Setting Custom Pattern + +dateTimeEdit.Format = "MM/dd/yy hh:mm:ss" + +{% endhighlight %} + +{% endtabs %} + + +![Custom date time pattern](datetimepattern-images/datetimepattern_custom.png) + +N> The CustomPattern support can be enabled by setting the `DateTimePattern` to the `Custom`. diff --git a/WindowsForms/DateTimePicker/Editing-Support.md b/WindowsForms/DateTimePicker/Editing-Support.md new file mode 100644 index 000000000..de722fc97 --- /dev/null +++ b/WindowsForms/DateTimePicker/Editing-Support.md @@ -0,0 +1,115 @@ +--- +layout: post +title: DateTime Editing in Windows Forms DateTimePicker | Syncfusion +description: Editing mode supports default text editing and mask mode that helps to restrict the date input in formatted values based on a date-time pattern. +platform: WindowsForms +control: SfDateTimeEdit +documentation: ug +--- + +# DateTime Editing in Windows Forms DateTimePicker (SfDateTimeEdit) + +The DateTime value of the `SfDateTimeEdit` control can be updated by editing the text in the control. The [DateTimeEditingMode](https://help.syncfusion.com/cr/windowsforms/Syncfusion.WinForms.Input.SfDateTimeEdit.html#Syncfusion_WinForms_Input_SfDateTimeEdit_DateTimeEditingMode) decides how to insert the input values for the SfDateTimeEdit from the keyboard. The DateTimeText can be edited by two ways as follows: + +* Default editing +* Mask editing + +## Default editing + +The DateTime can be edited in the textbox of the `SfDateTimeEdit` control when the [DateTimeEditingMode](https://help.syncfusion.com/cr/windowsforms/Syncfusion.WinForms.Input.SfDateTimeEdit.html#Syncfusion_WinForms_Input_SfDateTimeEdit_DateTimeEditingMode) is default. In default editing mode, the value can be assigned in any valid format. Even if the text box text is not in the correct pattern, the SfDateTimeEdit control automatically updates the value in the correct pattern on lost focus. i.e., if the date time pattern is LongDate with pattern "dddd, MMMM dd, yyyy" and date is entered as "Mar 28 2017" in the editing text box, the DateTimeText will be automatically converted according to the LongDate pattern while pressing the Enter key or on lost focus of the control. + +{% tabs %} + +{% highlight C# %} +using Syncfusion.WinForms.Input; + +Syncfusion.WinForms.Input.SfDateTimeEdit dateTimeEdit = new Syncfusion.WinForms.Input.SfDateTimeEdit(); + +this.Controls.Add(dateTimeEdit); + +dateTimeEdit.Value = new DateTime(2017, 6, 27); + +dateTimeEdit.DateTimeEditingMode = DateTimeEditingMode.Default; + +{% endhighlight %} + +{% highlight VB %} +Imports Syncfusion.WinForms.Input + +Dim dateTimeEdit As Syncfusion.WinForms.Input.SfDateTimeEdit = New Syncfusion.WinForms.Input.SfDateTimeEdit + +Me.Controls.Add(dateTimeEdit) + +dateTimeEdit.Value = New DateTime(2017, 6, 27) + +dateTimeEdit.DateTimeEditingMode = DateTimeEditingMode.Default + +{% endhighlight %} + +{% endtabs %} + +![Default editing](editing-support-images/default.png) + +## Mask editing + +The mask edit mode provides an easy and reliable way of collecting user input and displaying standard data in a specific format. In mask editing mode, the date will be separated into different fields such as date, month, year, minutes, hours, and seconds. The field can be updated by selecting the field and pressing the up or down arrow to increment or decrease the selected field, respectively. + +{% tabs %} + +{% highlight C# %} +using Syncfusion.WinForms.Input; + +Syncfusion.WinForms.Input.SfDateTimeEdit dateTimeEdit = new Syncfusion.WinForms.Input.SfDateTimeEdit(); + +this.Controls.Add(dateTimeEdit); + +dateTimeEdit.Value = new DateTime(2018, 2, 01); + +dateTimeEdit.DateTimeEditingMode = DateTimeEditingMode.Mask; + +{% endhighlight %} + +{% highlight VB %} +Imports Syncfusion.WinForms.Input + +Dim dateTimeEdit As Syncfusion.WinForms.Input.SfDateTimeEdit = New Syncfusion.WinForms.Input.SfDateTimeEdit + +Me.Controls.Add(dateTimeEdit) + +dateTimeEdit.Value = New DateTime(2018, 2, 1) + +dateTimeEdit.DateTimeEditingMode = DateTimeEditingMode.Mask + +{% endhighlight %} + +{% endtabs %} + +![Mask editing](editing-support-images/mask.png) + +## ReadOnly + +This control supports `ReadOnly` which is used to restrict editing of date and time fields in the `SfDateTimeEdit`. By setting the [ReadOnly](https://help.syncfusion.com/cr/windowsforms/Syncfusion.WinForms.Input.SfDateTimeEdit.html#Syncfusion_WinForms_Input_SfDateTimeEdit_ReadOnly) to **true**, you can restrict the text editing in the `SfDateTimeEdit` and you can change the value only by clicking the up-down buttons or picking the date from the drop-down `SfCalendar`. + +{% tabs %} + +{% highlight C# %} +using Syncfusion.WinForms.Input; + +//Enable the ReadOnly to restrict editing + +this.dateTimeEdit.ReadOnly = true; + +{% endhighlight %} + +{% highlight VB %} +Imports Syncfusion.WinForms.Input + +'Enable the ReadOnly to restrict editing + +Me.dateTimeEdit.ReadOnly = true + +{% endhighlight %} + +{% endtabs %} + +![Read only support](editing-support-images/readonly.png) diff --git a/WindowsForms/DateTimePicker/Getting-Started.md b/WindowsForms/DateTimePicker/Getting-Started.md new file mode 100644 index 000000000..c10ad3c84 --- /dev/null +++ b/WindowsForms/DateTimePicker/Getting-Started.md @@ -0,0 +1,285 @@ +--- +layout: post +title: Getting Started with Windows Forms DateTimePicker | Syncfusion +description: Learn here about getting started with Syncfusion Windows Forms DateTimePicker (SfDateTimeEdit) control, its elements, and more. +platform: WindowsForms +control: SfDateTimeEdit +documentation: ug +--- + +# Getting Started with Windows Forms DateTimePicker (SfDateTimeEdit) + +This section briefly describes how to create a new Windows Forms project in Visual Studio and add the **SfDateTimeEdit** control with its basic functionalities. + +## Assembly deployment + +Refer to the [Control Dependencies](https://help.syncfusion.com/windowsforms/control-dependencies#sfdatetimeedit) section to get the list of assemblies or details of NuGet package that needs to be added as reference to use the control in any application. + +Refer to this [documentation](https://help.syncfusion.com/windowsforms/installation/install-nuget-packages) to find more details about installing NuGet packages in a Windows Forms application. + +## Adding the SfDateTimeEdit control via designer + +The following steps describe how to create an **SfDateTimeEdit** control via designer. + +1. Create a new Windows Forms application in Visual Studio. + +2. Add the [SfDateTimeEdit](https://help.syncfusion.com/cr/windowsforms/Syncfusion.WinForms.Input.SfDateTimeEdit.html) control to an application by dragging it from the toolbox to design view. The following dependent assemblies will be added automatically: + + * Syncfusion.Core.WinForms + * Syncfusion.SfInput.WinForms + * Syncfusion.Shared.Base + +![Drag and drop the SfDateTimeEdit control to form](getting-started-images/toolbox.png) + +## Adding SfDateTimeEdit control via code + +The following steps describe how to create an **SfDateTimeEdit** control programmatically: + +1. Create a C# or VB application via Visual Studio. + +2. Add the following assembly references to the project: + + * Syncfusion.Core.WinForms + * Syncfusion.SfInput.WinForms + * Syncfusion.Shared.Base + +3. Include the required namespace. + +{% capture codesnippet1 %}​ +{% tabs %} + +{% highlight C# %} +using Syncfusion.WinForms.Input; + +using Syncfusion.WinForms.Input; + +{% endhighlight %} + +{% highlight VB %} +Imports Syncfusion.WinForms.Input + +{% endhighlight %} + +{% endtabs %} +{% endcapture %} +{{ codesnippet1 | OrderList_Indent_Level_1 }} + +4. Create an instance of the [SfDateTimeEdit](https://help.syncfusion.com/cr/windowsforms/Syncfusion.WinForms.Input.SfDateTimeEdit.html) control, and then add it to the form. + +{% capture codesnippet2 %}​ +{% tabs %} + +{% highlight C# %} +using Syncfusion.WinForms.Input; + +SfDateTimeEdit sfDateTimeEdit = new SfDateTimeEdit(); + +this.Controls.Add(sfDateTimeEdit); + +{% endhighlight %} + +{% highlight VB %} +Imports Syncfusion.WinForms.Input + +Dim sfDateTimeEdit As New SfDateTimeEdit() + +Me.Controls.Add(sfDateTimeEdit) + +{% endhighlight %} + +{% endtabs %} +{% endcapture %} +{{ codesnippet2 | OrderList_Indent_Level_1 }} + +## Date range + +In a real-time appointment scenario, the appointment is open only for a limited number of days. You have to select a date and time within given range using the [MinDateTime](https://help.syncfusion.com/cr/windowsforms/Syncfusion.WinForms.Input.SfDateTimeEdit.html#Syncfusion_WinForms_Input_SfDateTimeEdit_MinDateTime) and [MaxDateTime](https://help.syncfusion.com/cr/windowsforms/Syncfusion.WinForms.Input.SfDateTimeEdit.html#Syncfusion_WinForms_Input_SfDateTimeEdit_MaxDateTime) properties, which enable specified date range in the SfDateTimeEdit control. + +{% tabs %} + +{% highlight C# %} +using Syncfusion.WinForms.Input; + +Syncfusion.WinForms.Input.SfDateTimeEdit dateTimeEdit = new Syncfusion.WinForms.Input.SfDateTimeEdit(); + +this.Controls.Add(dateTimeEdit); + +dateTimeEdit.Value = new DateTime(2018, 2, 16); + +dateTimeEdit.MinDateTime = new DateTime(2018, 2, 3); + +dateTimeEdit.MaxDateTime = new DateTime(2018, 2, 27); + +{% endhighlight %} + +{% highlight VB %} +Imports Syncfusion.WinForms.Input + +Dim dateTimeEdit As New Syncfusion.WinForms.Input.SfDateTimeEdit() + +Me.Controls.Add(dateTimeEdit) + +dateTimeEdit.Value = New DateTime(2018, 2, 16) + +dateTimeEdit.MinDateTime = New DateTime(2018, 2, 3) + +dateTimeEdit.MaxDateTime = New DateTime(2018, 2, 27) + +{% endhighlight %} + +{% endtabs %} + +![SfDateTimeEdit control](getting-started-images/minmax.png) + +## Editing mode + +The date-time value in the DateTimeEdit can be edited in two ways as follows. + +* Default Editing +* Mask Editing + +Editing modes can be changed using the [DateTimeEditingMode](https://help.syncfusion.com/cr/windowsforms/Syncfusion.WinForms.Input.SfDateTimeEdit.html#Syncfusion_WinForms_Input_SfDateTimeEdit_DateTimeEditingMode) property of SfDateTimeEdit. The following code example demonstrates how to change the date-time editing mode. + +{% tabs %} + +{% highlight C# %} +using Syncfusion.WinForms.Input; + +dateTimeEdit.DateTimeEditingMode = DateTimeEditingMode.Mask; + +{% endhighlight %} + +{% highlight VB %} +Imports Syncfusion.WinForms.Input + +dateTimeEdit.DateTimeEditingMode = DateTimeEditingMode.Mask + +{% endhighlight %} + +{% endtabs %} + +![Editing mode](editing-support-images/mask.png) + +## Allow null value + +The **SfDateTimeEdit** allows you to set [Value](https://help.syncfusion.com/cr/windowsforms/Syncfusion.WinForms.Input.SfDateTimeEdit.html#Syncfusion_WinForms_Input_SfDateTimeEdit_Value) to null in the mask mode of DateTimeEditing when [AllowNull](https://help.syncfusion.com/cr/windowsforms/Syncfusion.WinForms.Input.SfDateTimeEdit.html#Syncfusion_WinForms_Input_SfDateTimeEdit_AllowNull) is set to true. + +{% tabs %} + +{% highlight C# %} +using Syncfusion.WinForms.Input; + +dateTimeEdit.DateTimeEditingMode = DateTimeEditingMode.Mask; + +dateTimeEdit.AllowNull = true; + +dateTimeEdit.Watermark = "Choose a date"; + +{% endhighlight %} + +{% highlight VB %} +Imports Syncfusion.WinForms.Input + +dateTimeEdit.DateTimeEditingMode = DateTimeEditingMode.Mask + +dateTimeEdit.AllowNull = true + +dateTimeEdit.Watermark = "Choose a date" + +{% endhighlight %} + +{% endtabs %} + +![SfDateTimeEdit allows null value](watermark-images/watermark.png) + +## Custom format + +The custom pattern can be displayed in the **SfDateTimeEdit** control using the [Format](https://help.syncfusion.com/cr/windowsforms/Syncfusion.WinForms.Input.SfDateTimeEdit.html#Syncfusion_WinForms_Input_SfDateTimeEdit_Format) property when [DateTimePattern](https://help.syncfusion.com/cr/windowsforms/Syncfusion.WinForms.Input.SfDateTimeEdit.html#Syncfusion_WinForms_Input_SfDateTimeEdit_DateTimePattern) is set to custom. + +{% tabs %} + +{% highlight C# %} +using Syncfusion.WinForms.Input; + +dateTimeEdit.Value = new DateTime(2018, 2, 5); + +dateTimeEdit.DateTimePattern = DateTimePattern.Custom; + +//Setting Custom Pattern + +dateTimeEdit.Format = "MM/dd/yy hh:mm:ss"; + +{% endhighlight %} + +{% highlight VB %} +Imports Syncfusion.WinForms.Input + +dateTimeEdit.Value = New DateTime(2018, 2, 5) + +dateTimeEdit.DateTimePattern = DateTimePattern.Custom + +'Setting Custom Pattern + +dateTimeEdit.Format = "MM/dd/yy hh:mm:ss" + +{% endhighlight %} + +{% endtabs %} + +![Custom format](getting-started-images/customformat.png) + +## Configure up-down + +You can edit the value of DateTimeEdit using the up-down button by setting the [ShowUpDown](https://help.syncfusion.com/cr/windowsforms/Syncfusion.WinForms.Input.SfDateTimeEdit.html#Syncfusion_WinForms_Input_SfDateTimeEdit_ShowUpDown) property to `true`. The up-down button appears only when [DateTimeEditingMode](https://help.syncfusion.com/cr/windowsforms/Syncfusion.WinForms.Input.SfDateTimeEdit.html#Syncfusion_WinForms_Input_SfDateTimeEdit_DateTimeEditingMode) is set to mask. + +{% tabs %} + +{% highlight C# %} +using Syncfusion.WinForms.Input; + +//Enable the UpDown Button + +this.dateTimeEdit.ShowUpDown = true; + +{% endhighlight %} + +{% highlight VB %} +Imports Syncfusion.WinForms.Input + +'Enable the UpDown Button + +Me.dateTimeEdit.ShowUpDown = true + +{% endhighlight %} + +{% endtabs %} + +![Up down DateTimeEdit](getting-started-images/daterange.png) + +## Configure the calculation of week number based on culture + +You can get the current week number in `SfDateTimeEdit` control by changing the `CalendarWeekRule` property value of date time format in `CultureInfo`. The default value of `CalendarWeekRule` property is `FirstDay`. + +{% tabs %} + +{% highlight C# %} +using Syncfusion.WinForms.Input; + +SfDateTimeEdit sfdateTimeEdit1 = new SfDateTimeEdit(); +CultureInfo info = new CultureInfo("en-EN"); +info.DateTimeFormat.CalendarWeekRule = CalendarWeekRule.FirstFullWeek; +sfdateTimeEdit1.Culture = info; + +{% endhighlight %} + +{% highlight VB %} +Imports Syncfusion.WinForms.Input + +Dim sfdateTimeEdit1 As SfDateTimeEdit = New SfDateTimeEdit() +Dim info As CultureInfo = New CultureInfo("en-EN") +info.DateTimeFormat.CalendarWeekRule = CalendarWeekRule.FirstFullWeek +sfdateTimeEdit1.Culture = info + +{% endhighlight %} + +{% endtabs %} diff --git a/WindowsForms/DateTimePicker/Globalization.md b/WindowsForms/DateTimePicker/Globalization.md new file mode 100644 index 000000000..80e5a25b3 --- /dev/null +++ b/WindowsForms/DateTimePicker/Globalization.md @@ -0,0 +1,102 @@ +--- +layout: post +title: Globalization in Windows Forms DateTimePicker Control | Syncfusion +description: Learn here all about globalization feature of Syncfusion Windows Forms DateTimePicker (SfDateTimeEdit) control and more. +platform: WindowsForms +control: SfDateTimeEdit +documentation: ug +--- + +# Globalization in Windows Forms DateTimePicker (SfDateTimeEdit) + +The `SfDateTimeEdit` control provides globalization support that allows you to design and develop a world-ready application that supports localized interfaces and regional data for users in multiple cultures. Before beginning the design phase, determine the cultures that your application supports. + +{% tabs %} + +{% highlight C# %} +using Syncfusion.WinForms.Input; + +System.Threading.Thread.CurrentThread.CurrentCulture = new System.Globalization.CultureInfo("pt-BR"); + +System.Threading.Thread.CurrentThread.CurrentUICulture = new System.Globalization.CultureInfo("pt-BR"); + +{% endhighlight %} + +{% highlight VB %} +Imports Syncfusion.WinForms.Input + +System.Threading.Thread.CurrentThread.CurrentCulture = New System.Globalization.CultureInfo("pt-BR") + +System.Threading.Thread.CurrentThread.CurrentUICulture = New System.Globalization.CultureInfo("pt-BR") + +{% endhighlight %} + +{% endtabs %} + +## Change culture + +By default, the `SfDateTimeEdit` supports the system's current culture. The culture of the `SfDateTimeEdit` can be changed by using the [Culture](https://help.syncfusion.com/cr/windowsforms/Syncfusion.WinForms.Input.SfDateTimeEdit.html#Syncfusion_WinForms_Input_SfDateTimeEdit_Culture) property. The date and time information displayed in the `SfDateTimeEdit` can be changed based on culture changes. + +{% tabs %} + +{% highlight C# %} +using Syncfusion.WinForms.Input; + +Syncfusion.WinForms.Input.SfDateTimeEdit dateTimeEdit = new Syncfusion.WinForms.Input.SfDateTimeEdit(); + +dateTimeEdit.Value = new DateTime(2010, 07, 05); + +dateTimeEdit.DateTimePattern = DateTimePattern.LongDate; + +dateTimeEdit.Culture = new CultureInfo("en-US"); + +{% endhighlight %} + +{% highlight VB %} +Imports Syncfusion.WinForms.Input + +Dim dateTimeEdit As Syncfusion.WinForms.Input.SfDateTimeEdit = New Syncfusion.WinForms.Input.SfDateTimeEdit + +dateTimeEdit.Value = New DateTime(2010, 7, 5) + +dateTimeEdit.DateTimePattern = DateTimePattern.LongDate + +dateTimeEdit.Culture = New CultureInfo("en-US") + +{% endhighlight %} + +{% endtabs %} + +![SfDateTimeEdit control](globalization-images/culture-us.png) + +{% tabs %} + +{% highlight C# %} +using Syncfusion.WinForms.Input; + +Syncfusion.WinForms.Input.SfDateTimeEdit dateTimeEdit = new Syncfusion.WinForms.Input.SfDateTimeEdit(); + +dateTimeEdit.Value = new DateTime(2010, 07, 05); + +dateTimeEdit.DateTimePattern = DateTimePattern.LongDate; + +dateTimeEdit.Culture = new CultureInfo("fr-FR"); + +{% endhighlight %} + +{% highlight VB %} +Imports Syncfusion.WinForms.Input + +Dim dateTimeEdit As New Syncfusion.WinForms.Input.SfDateTimeEdit() + +dateTimeEdit.Value = New DateTime(2010, 7, 5) + +dateTimeEdit.DateTimePattern = DateTimePattern.LongDate + +dateTimeEdit.Culture = New CultureInfo("fr-FR") + +{% endhighlight %} + +{% endtabs %} + +![SfDateTimeEdit globalization](globalization-images/culture-fr.png) diff --git a/WindowsForms/DateTimePicker/Overview.md b/WindowsForms/DateTimePicker/Overview.md new file mode 100644 index 000000000..cc239b462 --- /dev/null +++ b/WindowsForms/DateTimePicker/Overview.md @@ -0,0 +1,158 @@ +--- +layout: post +title: Overview of SfDateTimeEdit control | Windows Forms | Syncfusion +description: SfDateTimeEdit allows the user to edit the DateTime in the text with the support of minimum and maximum value validation, watermark, etc., +platform: WindowsForms +control: SfDateTimeEdit +documentation: ug +--- + +# Windows Forms DateTimePicker (SfDateTimeEdit) Overview + +The **SfDateTimeEdit** is a control that allows you to edit DateTime in the text or mask format with the support of minimum and maximum values validation, watermark, and globalization. It provides flexible options to display the date-time according to the required format. + +![Overview of SfDateTimeEdit](overview_images/overview.png) + +## Key Features + +**Editing mode** - Supports the default text editing and mask mode that restricts date input to formatted values based on a date-time pattern. + +**Date-range support** - Supports the maximum and minimum dates to prevent users from setting a date or time outside a specified range. + +**Globalization** - Supports different date-time formats and patterns based on cultures. + +**Date validation** - Supports date validation and error messages due to invalid dates or when date range constraints are violated. + +**Accessibility** - Provides touch, keyboard, and mouse support to make applications available to a wide variety of users. + +**Watermark** - Supports to display watermark text when a selected date is null. + +**Testing** - Provides QTP add-in that contains custom libraries, which helps [QTP](https://help.syncfusion.com/windowsforms/testing/uft/supported-controls-and-methods#sfdatetimeedit) to recognize SfDateTimeEdit. + + +## Choose between different DateTime controls + +Syncfusion WinForms suite comes up with the following different DateTime controls: + +* [SfDateTimeEdit](https://help.syncfusion.com/windowsforms/datetimepicker/overview) +* [DateTimePickerAdv](https://help.syncfusion.com/windowsforms/classic/datetimepicker/overview) + +### SfDateTimeEdit + +The [SfDateTimeEdit](https://help.syncfusion.com/windowsforms/datetimepicker/overview) control allows you to edit date-time in the text or mask format with minimum and maximum values validation, watermark, and globalization support. It provides flexible options to display the date-time according to the required format. + +### DateTimePickerAdv + +[DateTimePickerAdv](https://help.syncfusion.com/windowsforms/classic/datetimepicker/overview) is an advanced DateTimePicker control. It provides an easy way to implement a culture based DateTimePicker in an application. It displays a string when no specific date is selected. + +### SfDateTimeEdit vs DateTimePickerAdv + +Both SfDateTimeEdit and DateTimePickerAdv controls are used for the same purpose. But, the SfDateTimeEdit control offers a rich set of features over DateTimePickerAdv. To customize the updown and dropdown buttons, use DateTimePickerAdv. For date range support, watermark, navigation, and date validation, use SfDateTimeEdit. + +The list of some of the specific API differences between SfDateTimeEdit and DateTimePickerAdv is as follows. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+SfDateTimeEdit + +DateTimePickerAdv + +Description +
+AllowNull + +EnableNullDate + +Sets the value to null in mask mode. +
+Watermark + +NullString + +Specifies the text visible when the date is not selected. +
+MinDateTime + +MinValue + +Sets the minimum selectable date-time. +
+MaxDateTime + +MaxValue + +Sets the maximum selectable date-time. +
+DateTimePattern + +Format + +Displays the format of the date-time. +
+ +The list of features in SfDateTimeEdit over DateTimePickerAdv is as follows. + + + + + + + + + + + + + + + + + + +
+Feature + +Description +
+DateTimeEditingMode + +Support for free style editing with different {{'[mode](https://help.syncfusion.com/windowsforms/datetimepicker/editing-support)'| markdownify }} (mask and default text edit modes). +
+Date validation + +Shows error messages on the invalid dates or when date-range constraints are violated. To learn more about date validation in SfDateTimeEdit, refer to {{'[here](https://help.syncfusion.com/windowsforms/datetimepicker/validation)'| markdownify }}. +
+Value change by mouse wheel + +Changes the value by mouse wheel action. To learn more about value changes by mouse wheel in SfDateTimeEdit, refer to {{'[here](https://help.syncfusion.com/windowsforms/datetimepicker/navigation#change-value-by-mouse)'| markdownify }}. +
\ No newline at end of file diff --git a/WindowsForms/DateTimePicker/appearance-images/CalendarIconCustomization.png b/WindowsForms/DateTimePicker/appearance-images/CalendarIconCustomization.png new file mode 100644 index 000000000..566eedeae Binary files /dev/null and b/WindowsForms/DateTimePicker/appearance-images/CalendarIconCustomization.png differ diff --git a/WindowsForms/DateTimePicker/appearance-images/Office2016Black.png b/WindowsForms/DateTimePicker/appearance-images/Office2016Black.png new file mode 100644 index 000000000..d2a640599 Binary files /dev/null and b/WindowsForms/DateTimePicker/appearance-images/Office2016Black.png differ diff --git a/WindowsForms/DateTimePicker/appearance-images/Office2016Colorful.png b/WindowsForms/DateTimePicker/appearance-images/Office2016Colorful.png new file mode 100644 index 000000000..1bf27505d Binary files /dev/null and b/WindowsForms/DateTimePicker/appearance-images/Office2016Colorful.png differ diff --git a/WindowsForms/DateTimePicker/appearance-images/Office2016DarkGray.png b/WindowsForms/DateTimePicker/appearance-images/Office2016DarkGray.png new file mode 100644 index 000000000..3784ef141 Binary files /dev/null and b/WindowsForms/DateTimePicker/appearance-images/Office2016DarkGray.png differ diff --git a/WindowsForms/DateTimePicker/appearance-images/Office2016White.png b/WindowsForms/DateTimePicker/appearance-images/Office2016White.png new file mode 100644 index 000000000..701d933a4 Binary files /dev/null and b/WindowsForms/DateTimePicker/appearance-images/Office2016White.png differ diff --git a/WindowsForms/DateTimePicker/appearance-images/bordercolor.png b/WindowsForms/DateTimePicker/appearance-images/bordercolor.png new file mode 100644 index 000000000..6147568e8 Binary files /dev/null and b/WindowsForms/DateTimePicker/appearance-images/bordercolor.png differ diff --git a/WindowsForms/DateTimePicker/appearance-images/drodownbackcolor.png b/WindowsForms/DateTimePicker/appearance-images/drodownbackcolor.png new file mode 100644 index 000000000..d3749e45a Binary files /dev/null and b/WindowsForms/DateTimePicker/appearance-images/drodownbackcolor.png differ diff --git a/WindowsForms/DateTimePicker/appearance-images/dropdownforecolor.png b/WindowsForms/DateTimePicker/appearance-images/dropdownforecolor.png new file mode 100644 index 000000000..d64e5a3be Binary files /dev/null and b/WindowsForms/DateTimePicker/appearance-images/dropdownforecolor.png differ diff --git a/WindowsForms/DateTimePicker/appearance-images/dropdownsize.png b/WindowsForms/DateTimePicker/appearance-images/dropdownsize.png new file mode 100644 index 000000000..6251c7cfb Binary files /dev/null and b/WindowsForms/DateTimePicker/appearance-images/dropdownsize.png differ diff --git a/WindowsForms/DateTimePicker/appearance-images/footer.png b/WindowsForms/DateTimePicker/appearance-images/footer.png new file mode 100644 index 000000000..96125a699 Binary files /dev/null and b/WindowsForms/DateTimePicker/appearance-images/footer.png differ diff --git a/WindowsForms/DateTimePicker/appearance-images/keynavigation.PNG b/WindowsForms/DateTimePicker/appearance-images/keynavigation.PNG new file mode 100644 index 000000000..1870378f0 Binary files /dev/null and b/WindowsForms/DateTimePicker/appearance-images/keynavigation.PNG differ diff --git a/WindowsForms/DateTimePicker/appearance-images/popupalignment.png b/WindowsForms/DateTimePicker/appearance-images/popupalignment.png new file mode 100644 index 000000000..a75fc3fef Binary files /dev/null and b/WindowsForms/DateTimePicker/appearance-images/popupalignment.png differ diff --git a/WindowsForms/DateTimePicker/appearance-images/showdropdown.png b/WindowsForms/DateTimePicker/appearance-images/showdropdown.png new file mode 100644 index 000000000..33bf81649 Binary files /dev/null and b/WindowsForms/DateTimePicker/appearance-images/showdropdown.png differ diff --git a/WindowsForms/DateTimePicker/appearance-images/showupdown.PNG b/WindowsForms/DateTimePicker/appearance-images/showupdown.PNG new file mode 100644 index 000000000..1aa8071bc Binary files /dev/null and b/WindowsForms/DateTimePicker/appearance-images/showupdown.PNG differ diff --git a/WindowsForms/DateTimePicker/appearance-images/showweeknumbers.png b/WindowsForms/DateTimePicker/appearance-images/showweeknumbers.png new file mode 100644 index 000000000..1b3ab2afe Binary files /dev/null and b/WindowsForms/DateTimePicker/appearance-images/showweeknumbers.png differ diff --git a/WindowsForms/DateTimePicker/appearance-images/updowncolor.png b/WindowsForms/DateTimePicker/appearance-images/updowncolor.png new file mode 100644 index 000000000..c42c8c889 Binary files /dev/null and b/WindowsForms/DateTimePicker/appearance-images/updowncolor.png differ diff --git a/WindowsForms/DateTimePicker/daterange-images/minmax.png b/WindowsForms/DateTimePicker/daterange-images/minmax.png new file mode 100644 index 000000000..348050b8e Binary files /dev/null and b/WindowsForms/DateTimePicker/daterange-images/minmax.png differ diff --git a/WindowsForms/DateTimePicker/datetimepattern-images/allpattern.png b/WindowsForms/DateTimePicker/datetimepattern-images/allpattern.png new file mode 100644 index 000000000..263a5a628 Binary files /dev/null and b/WindowsForms/DateTimePicker/datetimepattern-images/allpattern.png differ diff --git a/WindowsForms/DateTimePicker/datetimepattern-images/datetimepattern_custom.png b/WindowsForms/DateTimePicker/datetimepattern-images/datetimepattern_custom.png new file mode 100644 index 000000000..f2d60f4c8 Binary files /dev/null and b/WindowsForms/DateTimePicker/datetimepattern-images/datetimepattern_custom.png differ diff --git a/WindowsForms/DateTimePicker/datetimepattern-images/datetimepattern_longdate.png b/WindowsForms/DateTimePicker/datetimepattern-images/datetimepattern_longdate.png new file mode 100644 index 000000000..8150b6841 Binary files /dev/null and b/WindowsForms/DateTimePicker/datetimepattern-images/datetimepattern_longdate.png differ diff --git a/WindowsForms/DateTimePicker/editing-support-images/default.png b/WindowsForms/DateTimePicker/editing-support-images/default.png new file mode 100644 index 000000000..8b8b25060 Binary files /dev/null and b/WindowsForms/DateTimePicker/editing-support-images/default.png differ diff --git a/WindowsForms/DateTimePicker/editing-support-images/mask.png b/WindowsForms/DateTimePicker/editing-support-images/mask.png new file mode 100644 index 000000000..20380486d Binary files /dev/null and b/WindowsForms/DateTimePicker/editing-support-images/mask.png differ diff --git a/WindowsForms/DateTimePicker/editing-support-images/readonly.png b/WindowsForms/DateTimePicker/editing-support-images/readonly.png new file mode 100644 index 000000000..1a6ff2488 Binary files /dev/null and b/WindowsForms/DateTimePicker/editing-support-images/readonly.png differ diff --git a/WindowsForms/DateTimePicker/getting-started-images/customformat.png b/WindowsForms/DateTimePicker/getting-started-images/customformat.png new file mode 100644 index 000000000..d16d888f4 Binary files /dev/null and b/WindowsForms/DateTimePicker/getting-started-images/customformat.png differ diff --git a/WindowsForms/DateTimePicker/getting-started-images/daterange.png b/WindowsForms/DateTimePicker/getting-started-images/daterange.png new file mode 100644 index 000000000..acf6831a7 Binary files /dev/null and b/WindowsForms/DateTimePicker/getting-started-images/daterange.png differ diff --git a/WindowsForms/DateTimePicker/getting-started-images/minmax.png b/WindowsForms/DateTimePicker/getting-started-images/minmax.png new file mode 100644 index 000000000..3dbfd6f2f Binary files /dev/null and b/WindowsForms/DateTimePicker/getting-started-images/minmax.png differ diff --git a/WindowsForms/DateTimePicker/getting-started-images/toolbox.png b/WindowsForms/DateTimePicker/getting-started-images/toolbox.png new file mode 100644 index 000000000..9b1b9bde7 Binary files /dev/null and b/WindowsForms/DateTimePicker/getting-started-images/toolbox.png differ diff --git a/WindowsForms/DateTimePicker/globalization-images/culture-fr.png b/WindowsForms/DateTimePicker/globalization-images/culture-fr.png new file mode 100644 index 000000000..8e50312bf Binary files /dev/null and b/WindowsForms/DateTimePicker/globalization-images/culture-fr.png differ diff --git a/WindowsForms/DateTimePicker/globalization-images/culture-us.png b/WindowsForms/DateTimePicker/globalization-images/culture-us.png new file mode 100644 index 000000000..667083b64 Binary files /dev/null and b/WindowsForms/DateTimePicker/globalization-images/culture-us.png differ diff --git a/WindowsForms/DateTimePicker/navigation-images/mask.png b/WindowsForms/DateTimePicker/navigation-images/mask.png new file mode 100644 index 000000000..c63c6989b Binary files /dev/null and b/WindowsForms/DateTimePicker/navigation-images/mask.png differ diff --git a/WindowsForms/DateTimePicker/navigation.md b/WindowsForms/DateTimePicker/navigation.md new file mode 100644 index 000000000..2848c7211 --- /dev/null +++ b/WindowsForms/DateTimePicker/navigation.md @@ -0,0 +1,108 @@ +--- +layout: post +title: Keyboard and Mouse interaction | SfDateTimeEdit | Syncfusion +description: SfDateTimeEdit control provides functionality for navigation and value changes through the keyboard and mouse interaction. +platform: WindowsForms +control: SfDateTimeEdit +documentation: ug +--- + +# Navigation in Windows Forms DateTimePicker (SfDateTimeEdit) + +The `SfDateTimeEdit` provides navigation and `Value` changes through the keyboard and mouse interaction in mask mode of the `DateTimeEditingMode`, and also provides free style text editing support for date and time information. The `SfDateTimeEdit` allows you to change the [SelectedField](https://help.syncfusion.com/cr/windowsforms/Syncfusion.WinForms.Input.SfDateTimeEdit.html#Syncfusion_WinForms_Input_SfDateTimeEdit_SelectedField) by using Right and Left arrows through keyboard interaction and this can be restricted by setting the [InterceptArrowKeys](https://help.syncfusion.com/cr/windowsforms/Syncfusion.WinForms.Input.SfDateTimeEdit.html#Syncfusion_WinForms_Input_SfDateTimeEdit_InterceptArrowKeys) to `false`. + +## Navigate to drop-down calendar + +The drop-down calendar control to pick the date `Value` for `SfDateTimeEdit` can be opened by Alt+Down arrow combinations. The drop-down calendar can be closed by Alt+Up and Alt+Down key combinations if the drop-down calendar is already opened. The state of drop-down calendar can be obtained from [ShowDropDown](https://help.syncfusion.com/cr/windowsforms/Syncfusion.WinForms.Input.SfDateTimeEdit.html#Syncfusion_WinForms_Input_SfDateTimeEdit_ShowDropDown) of the SfDateTimeEdit. + +The drop-down calendar provides keyboard support to change the selected date by using the keyboard. The date from a different month, year, or decade can be selected by navigating to the next view on pressing Ctrl+Up and navigate back to the old view on pressing Ctrl+Down key combinations. The selection in views can be changed by Right and Left arrows. + +### Handle drop-down calendar programmatically + +The drop-down calendar can be opened by [ShowPopup](https://help.syncfusion.com/cr/windowsforms/Syncfusion.WinForms.Input.SfDateTimeEdit.html#Syncfusion_WinForms_Input_SfDateTimeEdit_ShowPopup) method of the SfDateTimeEdit. The following code illustrates how to open the drop-down calendar programmatically: + +{% tabs %} + +{% highlight C# %} +using Syncfusion.WinForms.Input; + +dateTimeEdit.ShowPopup(); + +{% endhighlight %} + +{% highlight VB %} +Imports Syncfusion.WinForms.Input + +dateTimeEdit.ShowPopup() + +{% endhighlight %} + +{% endtabs %} + +The drop-down calendar can be closed by the [ClosePopup](https://help.syncfusion.com/cr/windowsforms/Syncfusion.WinForms.Input.SfDateTimeEdit.html#Syncfusion_WinForms_Input_SfDateTimeEdit_ClosePopup) method of the SfDateTimeEdit. The following code illustrates how to close the drop-down calendar programmatically: + +{% tabs %} + +{% highlight C# %} +using Syncfusion.WinForms.Input; + +dateTimeEdit.ClosePopup(); + +{% endhighlight %} + +{% highlight VB %} +Imports Syncfusion.WinForms.Input + +dateTimeEdit.ClosePopup() + +{% endhighlight %} + +{% endtabs %} + +## Change value by keyboard + +In `Mask` edit mode, the `Value` of `SfDateTimeEdit` can be changed through Up and Down arrows. The `SfDateTimeEdit` spins the value of [SelectedField](https://help.syncfusion.com/cr/windowsforms/Syncfusion.WinForms.Input.SfDateTimeEdit.html#Syncfusion_WinForms_Input_SfDateTimeEdit_SelectedField) (month, day, year, hour, second, and minute) to one step up or down based on the pressed arrows. Changing the value by Up and Down arrows can be applicable for `Mask` mode only, because the control does not aware of `SelectedField` of the SfDateTimeEdit in `Default` editing mode. This value change by Up and Down arrows can be restricted by setting the [InterceptArrowKeys](https://help.syncfusion.com/cr/windowsforms/Syncfusion.WinForms.Input.SfDateTimeEdit.html#Syncfusion_WinForms_Input_SfDateTimeEdit_InterceptArrowKeys) to `false`. + +## Change value by mouse + +In `Mask` edit mode, the `Value` of `SfDateTimeEdit` can be changed through up and down buttons. To make the DateTimeEdit an up-down control, set the `ShowUpDown` to `true`, and the DateTimeEdit control can be used as up-down only when the `DateTimeEditingMode` is `Mask`. The SfDateTimeEdit spins the value of [SelectedField](https://help.syncfusion.com/cr/windowsforms/Syncfusion.WinForms.Input.SfDateTimeEdit.html#Syncfusion_WinForms_Input_SfDateTimeEdit_SelectedField) (month, day, year, hour, second, and minute) to one step up or down based on the up and down buttons press. The `SelectedField` of SfDateTimeEdit provides the information about FieldType and FieldValue. The `FieldType` of SelectedField in the SfDateTimeEdit indicates the type of selected `DateTimeField`, and the `FieldValue` of SelectedField in the SfDateTimeEdit provides the text in the selected `DateTimeField`. + +The `SfDateTimeEdit` allows you to change the `Value` by mouse wheel action. But this mouse wheel changing of value can be applicable only in mask mode `DateTimeEditing`. This value change by mouse wheel can be restricted by setting the [AllowValueChangeOnMouseWheel](https://help.syncfusion.com/cr/windowsforms/Syncfusion.WinForms.Input.SfDateTimeEdit.html#Syncfusion_WinForms_Input_SfDateTimeEdit_AllowValueChangeOnMouseWheel) to `false`. + +{% tabs %} + +{% highlight C# %} +using Syncfusion.WinForms.Input; + +Syncfusion.WinForms.Input.SfDateTimeEdit dateTimeEdit = new Syncfusion.WinForms.Input.SfDateTimeEdit(); + +this.Controls.Add(dateTimeEdit); + +dateTimeEdit.Value = new DateTime(2017, 07, 05); + +dateTimeEdit.DateTimePattern = DateTimePattern.LongDate; + +dateTimeEdit.AllowValueChangeOnMouseWheel = true; + +{% endhighlight %} + +{% highlight VB %} +Imports Syncfusion.WinForms.Input + +Dim dateTimeEdit As New Syncfusion.WinForms.Input.SfDateTimeEdit() + +Me.Controls.Add(dateTimeEdit) + +dateTimeEdit.Value = New DateTime(2017, 7, 5) + +dateTimeEdit.DateTimePattern = DateTimePattern.LongDate + +dateTimeEdit.AllowValueChangeOnMouseWheel = True + +{% endhighlight %} + +{% endtabs %} + +After selecting any part in the DateTime value by pressing the Up and Down arrows (or scrolling the mouse up or down), the selected value will change automatically. + +![Navigation support](navigation-images/Mask.png) diff --git a/WindowsForms/DateTimePicker/overview_images/overview.png b/WindowsForms/DateTimePicker/overview_images/overview.png new file mode 100644 index 000000000..b46603c8e Binary files /dev/null and b/WindowsForms/DateTimePicker/overview_images/overview.png differ diff --git a/WindowsForms/DateTimePicker/righttoleft-images/lefttoright.PNG b/WindowsForms/DateTimePicker/righttoleft-images/lefttoright.PNG new file mode 100644 index 000000000..63c5b26e9 Binary files /dev/null and b/WindowsForms/DateTimePicker/righttoleft-images/lefttoright.PNG differ diff --git a/WindowsForms/DateTimePicker/righttoleft.md b/WindowsForms/DateTimePicker/righttoleft.md new file mode 100644 index 000000000..2fb4a78ea --- /dev/null +++ b/WindowsForms/DateTimePicker/righttoleft.md @@ -0,0 +1,72 @@ +--- +layout: post +title: Right-To-Left Support | SfDateTimeEdit | WindowsForms | Syncfusion +description: Learn here all about Right-To-Left feature of Syncfusion Windows Forms DateTimePicker (SfDateTimeEdit) control and more. +platform: WindowsForms +control: SfDateTimeEdit +documentation: ug +--- + +# Right-to-left in Windows Forms DateTimePicker (SfDateTimeEdit) + +`SfDateTimeEdit` control elements can be aligned in right-to-left layout. This control can be laid out from right to left when the [RightToLeft](https://help.syncfusion.com/cr/windowsforms/Syncfusion.WinForms.Input.SfDateTimeEdit.html#Syncfusion_WinForms_Input_SfDateTimeEdit_RightToLeft) value is set to `Yes`. + +{% tabs %} + +{% highlight C# %} +using Syncfusion.WinForms.Input; + +//Enable the Right to Left + +this.dateTimeEdit.RightToLeft = RightToLeft.Yes; + +{% endhighlight %} + +{% highlight VB %} +Imports Syncfusion.WinForms.Input + +'Enable the Right to Left + +Me.dateTimeEdit.RightToLeft = RightToLeft.Yes + +{% endhighlight %} + +{% endtabs %} + +![Right to left support](righttoleft-images/lefttoright.png) + +## Change drop-down calendar alignment + +The `SfDateTimeEdit` allows you to change the drop-down opening side of the calendar relative to the control. The [DropDownPopupAlignment](https://help.syncfusion.com/cr/windowsforms/Syncfusion.WinForms.Input.SfDateTimeEdit.html#Syncfusion_WinForms_Input_SfDateTimeEdit_DropDownPopupAlignment) of the SfDateTimeEdit can be used to change the alignment of the calendar. + +{% tabs %} + +{% highlight C# %} +using Syncfusion.WinForms.Input; + +//Setting Left Popup alignment + +this.dateTimeEdit.DropDownPopupAlignment = DropDownPopupAlignment.Left; + +//Setting Right Popup alignment + +this.dateTimeEdit.DropDownPopupAlignment = DropDownPopupAlignment.Right; + +{% endhighlight %} + +{% highlight VB %} +Imports Syncfusion.WinForms.Input + +'Setting Left Popup alignment + +Me.dateTimeEdit.DropDownPopupAlignment = DropDownPopupAlignment.Left + +'Setting Right Popup alignment + +Me.dateTimeEdit.DropDownPopupAlignment = DropDownPopupAlignment.Right + +{% endhighlight %} + +{% endtabs %} + +![Change drop down calendar alignment](appearance-images/popupalignment.png) diff --git a/WindowsForms/DateTimePicker/validation-images/errorsymbol.png b/WindowsForms/DateTimePicker/validation-images/errorsymbol.png new file mode 100644 index 000000000..d7bec4866 Binary files /dev/null and b/WindowsForms/DateTimePicker/validation-images/errorsymbol.png differ diff --git a/WindowsForms/DateTimePicker/validation.md b/WindowsForms/DateTimePicker/validation.md new file mode 100644 index 000000000..c7a0294d5 --- /dev/null +++ b/WindowsForms/DateTimePicker/validation.md @@ -0,0 +1,120 @@ +--- +layout: post +title: Validation in Windows Forms DateTimePicker Control | Syncfusion +description: SfDateTimeEdit control provides an support to validation of date and time value when the enter key is pressed. +platform: WindowsForms +control: SfDateTimeEdit +documentation: ug +--- + +# Validation in Windows Forms DateTimePicker (SfDateTimeEdit) + +The `SfDateTimeEdit` control validates the DateTime value when the Enter key is pressed, when the control loses its focus, or when a date is picked from the drop-down calendar. + + +## Validation reset option + +The [ValidationOption](https://help.syncfusion.com/cr/windowsforms/Syncfusion.WinForms.Input.SfDateTimeEdit.html#Syncfusion_WinForms_Input_SfDateTimeEdit_ValidationOption) property determines how the value changes when the validation fails. If the validation fails, the value will reset to the previous date-time [Value](https://help.syncfusion.com/cr/windowsforms/Syncfusion.WinForms.Input.SfDateTimeEdit.html#Syncfusion_WinForms_Input_SfDateTimeEdit_Value) or `MinValue` or `MaxValue`. If the validating event is not handled, then the validation will be done based on the `ValidationOption` of the SfDateTimeEdit. + +The validation results can be obtained based on the input provided to `Value` or `DateTimeText` of the SfDateTimeEdit. If the provided input has invalid date-time format or value that meets minimum or maximum value constraint, then the validation results will be failed. + +* **Reset**: A control that maintains the previous value before validating. If the validation fails, then the value will be reset to the previous value. + +* **MinValue**: Resets the value to `MinValue`, when the validation fails. + +* **MaxValue**: Resets the value to `MaxValue`, when the validation fails. + +{% tabs %} + +{% highlight C# %} +using Syncfusion.WinForms.Input; + +SfDateTimeEdit dateTimeEdit = new SfDateTimeEdit(); + +this.Controls.Add(dateTimeEdit); + +dateTimeEdit.Value = new DateTime(2018, 2, 1); + +dateTimeEdit.DateTimeEditingMode = DateTimeEditingMode.Default; + +// On Validation failed the value will be reset with MinValue. +dateTimeEdit.ValidationOption = ValidationResetOption.MinValue; + +{% endhighlight %} + +{% highlight VB %} +Imports Syncfusion.WinForms.Input + +Dim dateTimeEdit As SfDateTimeEdit = New SfDateTimeEdit + +Me.Controls.Add(dateTimeEdit) + +dateTimeEdit.Value = New DateTime(2018, 2, 1) + +dateTimeEdit.DateTimeEditingMode = DateTimeEditingMode.Default + +' On Validation failed the value will be reset with MinValue. + +dateTimeEdit.ValidationOption = ValidationResetOption.MinValue + +{% endhighlight %} + +{% endtabs %} + +The given value can be treated as a date/time value. It can be validated based on the DateTime format with culture. The following error indicating image will be shown, when the validation test is failed. + +![Validation support](validation-images/errorsymbol.png) + +## Handle validation + +The `ValidatingEventArgs` provides data for the [Validating](https://help.syncfusion.com/cr/windowsforms/Syncfusion.WinForms.Input.SfDateTimeEdit.html) event of the SfDateTimeEdit control. By handling the `Validating` event, it is possible to find the cause for validation failure with the error message in the `ValidatingEventArgs`. + +* **IsError**: Indicates whether the entered date and time is valid or invalid. + +* **ErrorMessage**: Updates the cause of the error. The error may be caused due to minimum or maximum value constraint met or incorrect date time format. + +{% tabs %} + +{% highlight C# %} +using Syncfusion.WinForms.Input; + +// Invoking Validating event + +this.dateTimeEdit.Validating += DateTimeEdit_Validating; + +private void DateTimeEdit_Validating(object sender, ValidatingEventArgs e) + +{ + + if (e.IsError) + + { + + MessageBox.Show(e.ErrorMessage); + + } + +} + +{% endhighlight %} + +{% highlight VB %} +Imports Syncfusion.WinForms.Input + +' Invoking Validating event + +AddHandler Me.dateTimeEdit.Validating, AddressOf DateTimeEdit_Validating + + Private Sub DateTimeEdit_Validating(ByVal sender As Object, ByVal e As ValidatingEventArgs) + + If e.IsError Then + + MessageBox.Show(e.ErrorMessage) + + End If + + End Sub + +{% endhighlight %} + +{% endtabs %} diff --git a/WindowsForms/DateTimePicker/watermark-images/nullvalue.png b/WindowsForms/DateTimePicker/watermark-images/nullvalue.png new file mode 100644 index 000000000..52a30db09 Binary files /dev/null and b/WindowsForms/DateTimePicker/watermark-images/nullvalue.png differ diff --git a/WindowsForms/DateTimePicker/watermark-images/watermark.png b/WindowsForms/DateTimePicker/watermark-images/watermark.png new file mode 100644 index 000000000..a0e4bf8c5 Binary files /dev/null and b/WindowsForms/DateTimePicker/watermark-images/watermark.png differ diff --git a/WindowsForms/DateTimePicker/watermark.md b/WindowsForms/DateTimePicker/watermark.md new file mode 100644 index 000000000..5b3fc7360 --- /dev/null +++ b/WindowsForms/DateTimePicker/watermark.md @@ -0,0 +1,88 @@ +--- +layout: post +title: Watermark in Windows Forms DateTimePicker Control | Syncfusion +description: Learn here all about Watermark feature of Syncfusion Windows Forms DateTimePicker (SfDateTimeEdit) control and more. +platform: WindowsForms +control: SfDateTimeEdit +documentation: ug +--- + +# Watermark in Windows Forms DateTimePicker (SfDateTimeEdit) + +The `SfDateTimeEdit` control allows you to set the [Value](https://help.syncfusion.com/cr/windowsforms/Syncfusion.WinForms.Input.SfDateTimeEdit.html#Syncfusion_WinForms_Input_SfDateTimeEdit_Value) to null in the default mode of the [DateTimeEditingMode](https://help.syncfusion.com/cr/windowsforms/Syncfusion.WinForms.Input.SfDateTimeEdit.html#Syncfusion_WinForms_Input_SfDateTimeEdit_DateTimeEditingMode). The watermark can be shown on null value. + +## Null value + +The `SfDateTimeEdit` control accepts null values only when the [DateTimeEditingMode](https://help.syncfusion.com/cr/windowsforms/Syncfusion.WinForms.Input.SfDateTimeEdit.html#Syncfusion_WinForms_Input_SfDateTimeEdit_DateTimeEditingMode) is default. The null value support in the `SfDateTimeEdit` control can be enabled by setting the [AllowNull](https://help.syncfusion.com/cr/windowsforms/Syncfusion.WinForms.Input.SfDateTimeEdit.html#Syncfusion_WinForms_Input_SfDateTimeEdit_AllowNull) property to true. If the value is null and the editing text box is empty then the `Watermark` will be displayed as the text in the `SfDateTimeEdit` control. + +{% tabs %} + +{% highlight C# %} +using Syncfusion.WinForms.Input; + +SfDateTimeEdit dateTimeEdit = new SfDateTimeEdit(); + +this.Controls.Add(dateTimeEdit); + +dateTimeEdit.AllowNull = true; + +dateTimeEdit.Value = null; + +{% endhighlight %} + +{% highlight VB %} +Imports Syncfusion.WinForms.Input + +Dim dateTimeEdit As SfDateTimeEdit = New SfDateTimeEdit + +Me.Controls.Add(dateTimeEdit) + +dateTimeEdit.AllowNull = true + +dateTimeEdit.Value = Nothing + +{% endhighlight %} + +{% endtabs %} + +![display null value](watermark-images/nullvalue.png) + +## Change watermark + +The watermark is help content that displays in the `SfDateTimeEdit` control when the [AllowNull](https://help.syncfusion.com/cr/windowsforms/Syncfusion.WinForms.Input.SfDateTimeEdit.html#Syncfusion_WinForms_Input_SfDateTimeEdit_AllowNull) property is true and the [Value](https://help.syncfusion.com/cr/windowsforms/Syncfusion.WinForms.Input.SfDateTimeEdit.html#Syncfusion_WinForms_Input_SfDateTimeEdit_Value) property is set to null. The `Watermark` text will be displayed only when the control loses its focus. The content of the watermark text can be assigned by setting the `Watermark` of the SfDateTimeEdit. + +{% tabs %} + +{% highlight C# %} +using Syncfusion.WinForms.Input; + +Syncfusion.WinForms.Input.SfDateTimeEdit dateTimeEdit = new Syncfusion.WinForms.Input.SfDateTimeEdit(); + +this.Controls.Add(dateTimeEdit); + +dateTimeEdit.AllowNull = true; + +dateTimeEdit.Value = null; + +dateTimeEdit.Watermark = "Choose a date"; + +{% endhighlight %} + +{% highlight VB %} +Imports Syncfusion.WinForms.Input + +Dim dateTimeEdit As Syncfusion.WinForms.Input.SfDateTimeEdit = New Syncfusion.WinForms.Input.SfDateTimeEdit + +Me.Controls.Add(dateTimeEdit) + +dateTimeEdit.AllowNull = true + +dateTimeEdit.Value = Nothing + +dateTimeEdit.Watermark = "Choose a date" + +{% endhighlight %} + +{% endtabs %} + +![Watermark support](watermark-images/watermark.png) diff --git a/WindowsForms/Diagram/Installation-And-Deployment.md b/WindowsForms/Diagram/Installation-And-Deployment.md new file mode 100644 index 000000000..dad7eb39d --- /dev/null +++ b/WindowsForms/Diagram/Installation-And-Deployment.md @@ -0,0 +1,120 @@ +--- +layout: post +title: Installation-And-Deployment in Windows Forms Diagram | Syncfusion® +description: Learn here all about installation and deployment of Syncfusion® Windows Forms Diagram control and more. +platform: windowsforms +control: Diagram +documentation: ug +--- + +## Installation And Deployment in Windows Forms Diagram + +This section covers information on the install location, samples, licensing, patches update and updation of the recent version of Essential Studio®. It comprises the following sub-sections: + +### Installation + +For step-by-step installation procedure for the installation of Essential Studio®, refer to the Installation topic under Installation and Deployment in the Common UG. + +See Also + +For licensing, patches and information on adding or removing selective components, refer the following topics in Common UG under Installation and Deployment. + +* Licensing +* Patches +* Add / Remove Components + +### Sample And Location + + +This section covers the location of the installed samples and describes the procedure to run the samples through the sample browser. It also lists the location of source code. + +Sample Installation Location + +The Essential® Diagram Windows Forms samples are installed in the following location. + +{% highlight text %} + +...\My Documents\Syncfusion\EssentialStudio\Version Number\Windows\Diagram.Windows\Samples\2.0 + +{% endhighlight %} + +Viewing Samples + +To view the samples, follow the steps below: + +1. Click Start-->All Programs-->Syncfusion-->Essential Studio -->Dashboard. + + + + ![Viewing Sample Windows Forms Diagram](Installation-And-Deployment_images/Installation-And-Deployment_img1.png) + + + + +2. In the Dashboard window, click Run Samples for Windows Forms under UI Edition. The UI Windows Form Sample Browser window is displayed. + + +N> You can view the samples in any of the following three ways: +> +> 1. Run Samples - Click to view the locally installed samples +> 2. Online Samples - Click to view online samples +> 3. Explore Samples - Explore BI Web samples on disk + + + +![Run Samples in Windows Forms Diagram](Installation-And-Deployment_images/Installation-And-Deployment_img3.png) + + + + + +3. To view the samples of Diagram control, click Diagram from the bottom-left pane. + + + +![View Sample in Windows Forms Diagram](Installation-And-Deployment_images/Installation-And-Deployment_img4.png) + + + + + +4. Select any sample and browse through the features. + + Source Code Location + +The source code for Essential® Diagram Windows is available at the following default location: + +[System Drive]:\Program Files\Syncfusion\Essential Studio\[Version Number]\Windows\Diagram.Windows\Src + +### Deployment Requirements + +This section provides deployment requirements for using Essential® Diagram under the following topics: + +#### Toolbox Entries + +Essential® Diagram places the following controls into your Visual Studio .NET toolbox from where you can drag each control onto a form and start working with it. + +* Diagram + +#### Assemblies + + +The following assemblies need to be referenced in your application for using Diagram control: + +Windows Forms – Diagram (Basic) + +*  Syncfusion.Core.dll +*  Syncfusion.Shared.Base.dll +*  Syncfusion.Diagram.Base.dll +*  Syncfusion.Diagram.Windows.dll + + + +Windows Forms – Diagram (On inclusion of Scripting) + +*  Syncfusion.Core.dll +*  Syncfusion.Shared.Base.dll +*  Syncfusion.Diagram.Base.dll +*  Syncfusion.Diagram.Windows.dll +*  Syncfusion.Scripting.Base +* Syncfusion.Scripting.Windows diff --git a/WindowsForms/Map/Installation-and-Deployment.md b/WindowsForms/Map/Installation-and-Deployment.md new file mode 100644 index 000000000..e59b67281 --- /dev/null +++ b/WindowsForms/Map/Installation-and-Deployment.md @@ -0,0 +1,92 @@ +--- +layout: post +title: Installation-and-Deployment in Windows-Forms Map Control | Syncfusion® +description: Learn here all about installation and deployment feature of Syncfusion® Windows Forms Map (Maps) control and more. +platform: windowsforms +control: Maps +documentation: ug +--- + +# Installation and Deployment in Windows Forms Map (Maps) + +This section covers information on the install location, samples, licensing, patches update, and updation of the recent version of Essential Studio®. It comprises the following subsections: + + + +## Installation + +For step-by-step installation procedure for installing of Essential Studio®, refer to the installation topic under Installation and Deployment in the Common UG. + + + +See also, + +For licensing, patches, and information on adding or removing selective components, refer to the following topics in Common UG under Installation and Deployment. + + + +* Licensing +* Patches +* Add/remove components + + + +## Sample and location + +Use the following steps to view the samples: + + + +1. Go to Start > All Programs > Syncfusion® > Essential Studio® > Dashboard + + The Essential Studio Enterprise Edition window will be displayed. + + ![Displaying Essential Studio Enterprise Edition window](Installation-and-Deployment_images/Installation-and-Deployment_img1.png)  + + Syncfusion® Essential Studio® Dashboard + {:.caption} + +2. In the Dashboard window, click Run Samples for Windows Forms under UI Edition. The UI Windows Forms Sample Browser window will be displayed. + + N> You can view the samples in any of the following three ways: + > * Run Samples - Click to view the locally installed samples. + > * Online Samples - Click to view online samples. + > * Explore Samples - Explore the UI for Windows Forms on disk. + + The User Interface Edition panel will be displayed by default. + + ![UI Windows Forms Sample Browser window Displayed](Installation-and-Deployment_images/Installation-and-Deployment_img2.png) + + _Figure 2: UI Windows Forms Sample Browser_ + +3. Click the Maps under Data Visualization. The Map samples will be displayed. + + ![Click Maps under Data Visualization](Installation-and-Deployment_images/Installation-and-Deployment_img3.png) + + Essential® Maps WF Samples + {:.caption} + +4. Select any sample and browse through the features.  + + +## Deployment requirements + + + +### Toolbox entries + + + +* Maps + + + +### Assembly list + +While deploying an application that references SyncfusionEssentialMaps assembly, the following dependencies must be included in the distribution: + + + +* Syncfusion.Maps.Windows +* Syncfusion.Shared.Base +* Syncfusion.Core \ No newline at end of file diff --git a/WindowsForms/Radial-Gauge/Installation-and-Deployment.md b/WindowsForms/Radial-Gauge/Installation-and-Deployment.md new file mode 100644 index 000000000..7627fbe11 --- /dev/null +++ b/WindowsForms/Radial-Gauge/Installation-and-Deployment.md @@ -0,0 +1,97 @@ +--- +layout: post +title: Installation and deployment in Windows Forms Radial Gauge | Syncfusion +description: Learn here all about installation and deployment of Syncfusion Windows Forms Radial Gauge control and more. +platform: WindowsForms +control: Gauge +documentation: ug +--- + +# Installation and deployment in Windows Forms Radial Gauge + +This section covers information on installation, the process of viewing samples through the sample browser, and the locations of samples and source code. + +## Installation + +For step-by-step installation procedure for the installation of Essential Studio, refer to the Installation topic under Installation and Deployment in the Common UG. + +* Licensing +* Patches +* Add/Remove Components + +## Samples and location + + +This section covers the location of the installed samples and describes the procedure to run the samples through the Sample Browser and online. It also provides the location of the source code. + +### Samples installation location + +The Gauge samples are installed in the following location locally on the disk: + +#### Windows XP + +C:\Syncfusion\Essential Studio\Windows\Gauge.Windows\Samples + +#### Windows 7/Vista + +C:\Users\\AppData\Local\Syncfusion\EssentialStudio\\Windows\Gauge.Windows\Samples  + +#### Viewing samples + +Use the following steps to view the samples + +1. Click Start > All Programs > Syncfusion > Essential Studio >Dashboard. + + The Essential Studio Enterprise Edition window will be displayed. + + ![Essential Studio Enterprise Edition window Displayed](Installation-and-Deployment_images/Installation-and-Deployment_img1.png) + + + +2. In the Dashboard window, click Run Samples for Windows Forms under UI Edition. The UI Windows Forms Sample Browser window will be displayed. + + N> You can view the samples in any of the following three ways: + N> + N> • Run Samples - Click to view the locally installed samples. + N> + N> • Online Samples - Click to view online samples. + N> + N> • Explore Samples - Explore the UI for Windows Forms on disk. + N> + N> The User Interface Edition panel is displayed by default. + + + + ![click Run Samples](Installation-and-Deployment_images/Installation-and-Deployment_img3.png) + + + + + +3. Click the Gauge tile under Data Visualization. The Gauge samples will be displayed. + + + + ![Click Gauge tile under Data Visualization](Installation-and-Deployment_images/Installation-and-Deployment_img4.png) + + + + + +4. Select any sample and browse through the features. + +### Source code location + + + The default location of the Windows Forms Gauge control source code is: + +C:\Program Files\Syncfusion\Essential Studio\[VersionNumber]\Windows\Gauge.Windows\Src + +## Deployment requirements + +### Assembly list + +While deploying an application that references a Syncfusion Windows Forms Gauge control assembly, the following dependencies must be included in the distribution: + +* Syncfusion.Gauge.Windows.dll +* Syncfusion.Shared.base.dll diff --git a/WindowsForms/Scheduler/Customizing-Appearance.md b/WindowsForms/Scheduler/Customizing-Appearance.md new file mode 100644 index 000000000..af5056cef --- /dev/null +++ b/WindowsForms/Scheduler/Customizing-Appearance.md @@ -0,0 +1,277 @@ +--- +layout: post +title: Customization in Winforms Scheduler control | Syncfusion® +description: Learn about Customizing Appearance support in Syncfusion® Windows Forms Scheduler (Event Calendar) control and more details. +platform: windowsforms +control: Schedule +documentation: ug +--- + +# Customizing Appearance in Windows Forms Scheduler (Event Calendar) + +The appearance of any region of the ScheduleControl can be customized by using the [WinForms Scheduler](https://www.syncfusion.com/scheduler-sdk/winforms-scheduler). Appearance property. This property provides access to the ScheduleAppearance object that controls various appearance attributes of different WinForms Scheduler regions. + +The following table describes the appearance options available in the customized WinForms Scheduler control. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+Name +Description
+Border
+ClickItemBorderColor +Gets or sets border color of a clicked item.
+DragColor +Gets or sets color of the dragged item.
+SolidBorderColor +Gets or sets color of the solid lines in the calendar.
+Caption
+CaptionBackColor +Gets or sets color of the caption area above the calendar.
+ShowCaption +Specifies whether the caption panel above the calendar is visible or not.
+ShowCaptionButtons +Specifies whether the navigation buttons are shown on the caption panel or not.
+DisplayItemFormat
+AllDayItemFormat +Gets or sets the display format of an all-day item.
+DateFormat +Gets or sets format string used when formatting any token from DisplayItemFormatStrings that represents a date only value.
+DateTimeFormat +Gets or sets format string used when formatting any token from DisplayItemFormatStrings that represents combined date and time values.
+DayItemFormat +Gets or sets display format of a schedule item displayed in a day or workweek view.
+FullWeekHeaderFormat +Specifies display format of the header of a day in week view.
+LongHeaderFormat +Specifies display format of the header in a day view.
+SpanItemFormatLeftText +Specifies display format of text displayed on the interior left side of a multi day span.
+SpanItemFormatMiddleText +Specifies display format of the text displayed in the middle of a multi day span.
+SpanItemFormatRightText +Specifies display format of the text displayed on the interior right side of a multi day span.
+SpanItemFormatTerminalLeftText +Specifies display format of the text displayed on the open left side of a multi day span.
+SpanItemFormatTerminalRightText +Specifies display format of text displayed on the open right side of a multi day span.
+TimeFormat +Gets or sets format string used when formatting any token from DisplayItemFormatStrings that represents a time only value.
+WeekHeaderFormat +Specifies display format of the header label in a workweek view.
+WeekMonthItemFormat +Specifies display format of a schedule item shown in a week or month view.
+WorkWeekHeaderFormat +Determines display format of the header of a day in a workweek view.
+Header
+AllDayBackColor +Gets or sets back color of the all day row in the calendar.
+MonthWeekHeaderBackColor +Specifies back color of the header cells in a month or week view.
+MonthWeekHeaderForeColor +Specifies fore color of the header cells in a month or week view.
+WorkWeekHeaderBackColor +Specifies back color of header cells in a workweek view.
+WorkWeekHeaderForeColor +Specifies fore color of header cells in a workweek view.
+Navigation Calendar
+NavigationCalendarArrowColor +Specifies color of arrows in the navigation calendar.
+NavigationCalendarBackColor +Specifies back color of the navigation calendar.
+NavigationCalendarDisabledTextColor +Specifies color of disabled text in the navigation calendar.
+NavigationCalendarHeaderColor +Gets or sets color of the header in the navigation calendar.
+NavigationCalendarSelectionColor +Gets or sets selection color in the navigation calendar.
+NavigationCalendarStartDayOfWeek +Specifies the DayOfWeek shown in the left-most column of the navigation calendar.
+NavigationCalendarTextColor +Specifies text color of the navigation calendar.
+NavigationCalendarTodayColor +Specifies color of today's text in the navigation calendar.
+NavigationCalendarWeekNumberColor +Specifies color of week numbers in the navigation calendar.
+Prime time
+NonPrimeTimeCellColor +Gets or sets color of non-prime time cells in the calendar.
+PrimeTimeCellColor +Gets or sets color of prime time cells in the calendar.
+PrimeTimeEnd +Specifies the time when the prime time color stops being used in the display.
+PrimeTimeStart +Specifies the time when the prime time color starts being used in the display.
+Time Column
+Hours24 +Determines whether the time column is displayed using a 24-hour format or not.
+MarkColumnColor +Gets or sets the color of the thick solid line next to the time column in a day view.
+ShowTime +Indicates whether the time column should appear or not.
+TimeBackColor +Specifies the back color of the time column.
+TimeBigFontSize +Determines size of the larger font used in the time column.
+TimeLittleFontSize +Determines size of the smaller font used in the time column.
+TimeTextColor +Specifies color of the text in the time column.
+Visual Style
+VisualStyle +Specifies visual style for the ScheduleControl.
+Miscellaneous +
+DayMonthCutOff +Gets or sets maximum number of days appear side-by-side in a day style calendar.
+DivisionsPerHour +Gets or sets number of time divisions appear in a day, custom, or workweek view.
+MonthCalendarStartDayOfWeek +Gets or sets the DayOfWeek shown in the left-most column of the month calendar.
+MonthShowFullWeek +Specifies whether the month view shows 7 columns or 6 columns with Saturday or Sunday stacked or not.
+ScheduleAppointmentTipFormat +Defines the text displayed for schedule item tips.
+ScheduleAppointmentTipsEnabled +Determines whether to show item tips or not.
+SplitterBackColor +Specifies back color of the two splitters in the the ScheduleControl.
+TextColor +Specifies color of basic text shown in the calendar.
+ThemesEnabled +Specifies whether the themes are enabled or not.
+WeekCalendarStartDayOfWeek +Specifies the DayOfWeek shown in the first column of the week calendar.
diff --git a/WindowsForms/Scheduler/Getting-Started.md b/WindowsForms/Scheduler/Getting-Started.md new file mode 100644 index 000000000..64950daeb --- /dev/null +++ b/WindowsForms/Scheduler/Getting-Started.md @@ -0,0 +1,757 @@ +--- +layout: post +title: Getting Started with Windows Forms Scheduler control | Syncfusion® +canonical_url: "https://www.syncfusion.com/scheduler-sdk/winforms-scheduler" +description: Learn here about getting started with Syncfusion® Windows Forms Scheduler (Event Calendar) control, its elements and more details. +platform: windowsforms +control: Schedule +documentation: ug +--- + +# Getting Started with Windows Forms Scheduler (Event Calendar) + +This section provides the details that you will need to know about getting started with our [WinForms Scheduler](https://www.syncfusion.com/scheduler-sdk/winforms-scheduler) control. + +## Assembly deployment + +Refer to [control dependencies](https://help.syncfusion.com/windowsforms/control-dependencies#schedule) section to get the list of assemblies or [NuGet package](https://help.syncfusion.com/windowsforms/installation/install-nuget-packages) that should be added as reference to use the control in any application. + +## Creating application with the ScheduleControl + +In this walkthrough, you will create a WinForms application that contains the [Windows Forms Scheduler](https://www.syncfusion.com/scheduler-sdk/winforms-scheduler) (Event Calendar) control. + +### Creating the project + +Create a new Windows Forms project in Visual Studio to display the Windows Forms Scheduler (Schedule) control with data objects. + +### Adding control via designer + +1. The Schedule control can be added to the application by dragging it from the Toolbox and dropping it in designer. The required assembly references will be added automatically. + + ![Adding WinForms Scheduler through designer](Getting-Started_images/Getting-Started_img9.jpeg) + + The ScheduleControl will be shown on the design surface. Following screenshot is a typical display of this. Notice the Appearance property in the property grid. This object has many properties that affect the appearance of the ScheduleControl. + + ![Adding WinForms Scheduler through designer](Getting-Started_images/Getting-Started_img10.png) + +### Adding control by code + +To add the control manually, follow the steps: + +1. Add the following required assembly references to the project: + + * Syncfusion.Grid.Base. + * Syncfusion.Grid.Windows. + * Syncfusion.Schedule.Base. + * Syncfusion.Schedule.Windows. + * Syncfusion.Shared.Base. + * Syncfusion.Tools.Windows. + +2. Create the ScheduleControl instance in the application form constructor. + +{% capture codesnippet1 %} +{% tabs %} +{% highlight c# %} +using Syncfusion.Windows.Forms.Schedule; +namespace WindowsFormsApplication1 +{ + public partial class Form1 : Form + { + public Form1() + { + InitializeComponent(); + ScheduleControl scheduleControl1 = new ScheduleControl(); + scheduleControl1.Location = new Point(82, 12); + scheduleControl1.Size = new Size(350, 360); + this.Controls.Add(scheduleControl1); + } + } +} +{% endhighlight %} + +{% highlight vb %} +Imports Syncfusion.Windows.Forms.Schedule +Namespace WindowsFormsApplication1 + Public Partial Class Form1 + Inherits Form + Public Sub New() + InitializeComponent() + Dim scheduleControl1 As ScheduleControl = New ScheduleControl() + scheduleControl1.Location = New Point(82, 12) + scheduleControl1.Size = New Size(350, 360) + Me.Controls.Add(scheduleControl1) + End Sub + End Class +End Namespace +{% endhighlight %} +{% endtabs %} +{% endcapture %} +{{ codesnippet1 | OrderList_Indent_Level_1 }} + +### Binding data to the ScheduleControl + +The ScheduleControl is a data bound control. So, the data must be created for an application to generate the appointments. + +### Creating appointment for the ScheduleControl using SimpleScheduleDataProvider + +Follow the steps to create an appointment: + +1. Add an existing file to the SimpleScheduleDataProvider.cs (add SimpleScheduleDataProvider.vb if you are using VB.NET) project. + +This file defines several classes that implements the ScheduleControl interfaces that manages the data associated with appointments appeared in the calendar. These interfaces are discussed in detail later in this UserGuide. + +Use the implementation provided in the `SimpleScheduleDataProvider.cs` file. This file ships as part of the [Winforms Scheduler sample](https://github.com/syncfusion/winforms-demos/tree/master/schedulecontrol/Scheduler%20Demo/CS). Drill down to this folder and add this file to your project by using the Solution Explorer window. + +![Adding appointment in Winforms Scheduler](Getting-Started_images/Getting-Started_img12.jpeg) + +2. You can find the `SimpleScheduleDataProvider.cs` file in the [Syncfusion_build_installed_location]\Syncfusion\Essential Studio\<Product_version>\Windows\Schedule.Windows\ Samples\<Framework_version>\ScheduleSample\CS_ folder. Drill down to this folder and add this file to our project. + +![Adding appointment in Winforms Scheduler](Getting-Started_images/Getting-Started_img13.jpeg) + +3. After adding the `SimpleScheduleDataProvider.cs` code file, add some code to your Form.cs to provide data support to your ScheduleControl. + +First, add using statement to refer class names in the `SimpleScheduleDataProvider.cs` file without adding the Namespace used in that file. +The other is added in the Form_Load code to hook up the data support. +In the `Form_Load`, create an instance of the DataProvider and a MasterList to hold the data. +Then, set some properties to provide a filename. The ScheduleViewType for the initial display and the DataSource property for the ScheduleControl. +Copy this code to your Form1.cs file. + +{% tabs %} +{% highlight c# %} +using System; +using System.Collections.Generic; +using System.ComponentModel; +using System.Data; +using System.Drawing; +using System.Text; +using System.Windows.Forms; +using Syncfusion.Windows.Forms.Schedule; + +namespace GridScheduleSample +{ + public partial class Form1 : Form + { + public Form1() + { + InitializeComponent(); + } + + private void Form1_Load(object sender, EventArgs e) + { + SimpleScheduleDataProvider data = new SimpleScheduleDataProvider(); + data.MasterList = new SimpleScheduleAppointmentList(); + data.FileName = "default.schedule"; + this.scheduleControl1.ScheduleType = ScheduleViewType.Month; + this.scheduleControl1.DataSource = data; + } + + } + +} +{% endhighlight %} +{% highlight vb %} +Imports System +Imports System.Collections.Generic +Imports System.ComponentModel +Imports System.Data +Imports System.Drawing +Imports System.Text +Imports System.Windows.Forms +Imports Syncfusion.Windows.Forms.Schedule + +Namespace GridScheduleSample + + Public Partial Class Form1 + Inherits Form + + Public Sub New() + InitializeComponent() + End Sub + + Private Sub Form1_Load(ByVal sender As Object, ByVal e As EventArgs) + Dim data As SimpleScheduleDataProvider = New SimpleScheduleDataProvider() + data.MasterList = New SimpleScheduleAppointmentList() + data.FileName = "default.schedule" + Me.scheduleControl1.ScheduleType = ScheduleViewType.Month + Me.scheduleControl1.DataSource = data + End Sub + End Class +End Namespace +{% endhighlight %} +{% endtabs %} + +4. Press `F5` key to compile and run your application. + +![Adding appointment in WinForms Scheduler](Getting-Started_images/Getting-Started_img14.jpeg) + +## Changing views + +The customized WinForms Scheduler supports for five schedule view types: + +* Month +* Day +* Week +* WorkWeek +* CustomWeek + +To change month view to day view, right-click the ScheduleGrid area of the ScheduleControl to display a ContextMenu and select a day. + +![Changing view in WinForms Scheduler](Getting-Started_images/Getting-Started_img15.jpeg) + +You can also change to other schedule views using this ContextMenu. + +![Changing view in WinForms Scheduler](Getting-Started_images/Getting-Started_img16.jpeg) + +## Appointments + +The WinForms appointment Scheduler control supports to insert, remove, modify, and save all the appointment details. + +### Insert + +Double-click one of the timeslots on the ScheduleGrid. This action will display an appointment form where you can enter a new schedule item. + +![Adding appointment in WinForms Scheduler](Getting-Started_images/Getting-Started_img17.jpeg) + +After clicking Save and Close on the appointment form, the Day view ScheduleControl will re-display with a new appointment. If you hover over the appointment in the ScheduleGrid, a tooltip will display. + +![Adding appointment in WinForms Scheduler](Getting-Started_images/Getting-Started_img18.jpeg) + +### Remove + +Right click on the appointment and select the Delete Item from the context menu to remove the selected appointment. + +![Deleting appointment in WinForms Scheduler Control](Getting-Started_images/Getting-Started_img19.jpeg) + +### Modify + +Double-click on the appointment or right-click and choose the Edit Item from context menu. + +![Modifying appointment in WinForms Scheduler](Getting-Started_images/Getting-Started_img20.jpeg) + +This action will display an appointment form with appointment details to modify the appointment. Then, click the Save and Close button. + +![Modifying appointment in WinForms Scheduler](Getting-Started_images/Getting-Started_img21.jpg) + +### Save all the appointment + +Click the Close button on the form system menu on the upper-right corner of the form. The data has been modified in this ScheduleControl. A dialog will appear as follows; click Yes to save the changes to a disk file. + +![Saving all appointment in WinForms Scheduler](Getting-Started_images/Getting-Started_img22.jpg) + +Then modify the `Form_Load` code to conditionally reload the saved data if the file is present on the disk. Copy this code to your Form1.cs file. Notice that you have added a `using` statement to reference the `System.IO namespace` to the new code in the Form1_Load. + +{% tabs %} +{% highlight c# %} +using System; +using System.Collections.Generic; +using System.ComponentModel; +using System.Data; +using System.Drawing; +using System.Text; +using System.Windows.Forms; +using Syncfusion.Windows.Forms.Schedule; +using System.IO; + +namespace GridScheduleSample +{ + public partial class Form1 : Form + { + public Form1() + { + InitializeComponent(); + } + + private void Form1_Load(object sender, EventArgs e) + { + SimpleScheduleDataProvider data; + + if (File.Exists("default.schedule")) + { + data = SimpleScheduleDataProvider.LoadBinary("default.schedule"); + data.FileName = "default.schedule"; + } + else + { + data = new SimpleScheduleDataProvider(); + data.MasterList = new SimpleScheduleAppointmentList(); + data.FileName = "default.schedule"; + } + this.scheduleControl1.ScheduleType = ScheduleViewType.Month; + this.scheduleControl1.DataSource = data; + } + + } + +} +{% endhighlight %} +{% highlight vb %} +Imports System +Imports System.Collections.Generic +Imports System.ComponentModel +Imports System.Data +Imports System.Drawing +Imports System.Text +Imports System.Windows.Forms +Imports Syncfusion.Windows.Forms.Schedule +Imports System.IO + +Namespace GridScheduleSample + + Public Partial Class Form1 + Inherits Form + + Public Sub New() + InitializeComponent() + End Sub + + Private Sub Form1_Load(ByVal sender As Object, ByVal e As EventArgs) + Dim data As SimpleScheduleDataProvider + If File.Exists("default.schedule") Then + data = SimpleScheduleDataProvider.LoadBinary("default.schedule") + data.FileName = "default.schedule" + Else + data = New SimpleScheduleDataProvider() + data.MasterList = New SimpleScheduleAppointmentList() + data.FileName = "default.schedule" + End If + + Me.scheduleControl1.ScheduleType = ScheduleViewType.Month + Me.scheduleControl1.DataSource = data + End Sub + End Class +End Namespace +{% endhighlight %} +{% endtabs %} + +Compile and run the application again. The Month view should reappear but this time the added appointment will appear. + +![Saving appointment in WinForms Scheduler](Getting-Started_images/Getting-Started_img23.jpg) + +### TextColor + +Text color of the appointment can be set by using **ForeColor** property. + +{% tabs %} +{% highlight c# %} +SimpleScheduleAppointmentList masterList = new SimpleScheduleAppointmentList(); + +ScheduleAppointment item = masterList.NewScheduleAppointment() as ScheduleAppointment; +item.StartTime = DateTime.Now; +item.EndTime = item.StartTime.AddDays(2); +item.ForeColor = Color.Red; +masterList.Add(item); +{% endhighlight %} +{% highlight vb %} +Dim masterList As New SimpleScheduleAppointmentList() + +Dim item As ScheduleAppointment = TryCast(masterList.NewScheduleAppointment(),ScheduleAppointment) +item.StartTime = DateTime.Now +item.EndTime = item.StartTime.AddDays(2) +item.ForeColor = Color.Red +masterList.Add(item) +{% endhighlight %} +{% endtabs %} + +![Changing appointment forecolor in WinForms Scheduler](Getting-Started_images/Getting-Started_img24.png) + +### Schedule appointment + +The ScheduleData base classes provides the appointments data used by the ScheduleControl. For code details of deriving these ScheduleData base classes to implement a data provider for the ScheduleControl, see the SimpleScheduleDataProvider code file that ships as part of the ScheduleSample sample. + +#### ScheduleAppointment class + +The ScheduleAppointment class defines the objects that represent the appointments in the Schedule control. This class implements IScheduleAppointment to provide an object to hold the concrete data associated with appointments. You can either derive this class or implement IScheduleAppointment to extend or modify the information managed by the ScheduleAppointment class. The properties exposed in ScheduleAppointment are: + +* **UniqueID:** Gets or sets a unique integer associated with the item. +* **Owner:** Gets or sets an integer to identify the owner (if any) of the item. +* **StartTime:** Gets or sets the start time of the item. +* **EndTime:** Gets or sets the end time of the item. +* **Subject:** Gets or sets a text string identifying the topic of the item. +* **Content:** Gets or sets a text string holding the details or comments for the appointment item. +* **AllDay:** Gets or sets whether the appointment is an all-day appointment or not. +* **LabelValue:** Gets or sets an integer categorizer value for the item. +* **MarkerValue:** Gets or sets an integer marker value for the item. +* **Reminder:** Gets or sets a reminder event raised when the StartTime of the item gets closed. +* **ReminderValue:** Gets or sets the type of the reminder event raised when the StartTime of the item gets closed. +* **LocationValue:** Gets or sets a string associated with the item. +* **Version:** Gets integer format of the version number (used to support data format versioning). +* **Tag:** Gets or sets an arbitrary object associated with the item. +* **Dirty:** Gets or sets whether the item has been modified or not. +* **IgnoreChanges:** Gets or sets the changes to the item affect the Dirty property. +* **ForeColor:** Gets or sets the text color of the item. + +#### ScheduleAppointmentList class + +The ScheduleAppointmentList is a collection of IScheduleAppointments that serves as data for the Schedule Control. This class is a wrapper class for an ArrayList and implements IComparer to order this list by the item's StartTime. If two items start at the same time, the EndTime is used as well to determine the order. Longer appointments rank higher. Here are the properties and methods exposed in ScheduleAppointmentList. + +{% tabs %} +{% highlight c# %} +/// Gets or sets the i-th IScheduleAppointment in this list. +public virtual IScheduleAppointment this[int i]; + +/// Gets the number of IScheduleAppointments in this list. + +public virtual int Count + +/// Sorts this list on the IScheduleAppointment.StartTime property. + +public virtual void SortStartTime() + +/// Adds an IScheduleAppointment to this list. + +/// item - The IScheduleAppointment to be added. + +public virtual void Add(IScheduleAppointment item) + +/// Inserts an IScheduleAppointment into this list. + +/// index - The position in the list where the item is to be inserted. + +/// item - The IScheduleAppointment to be inserted. + +public virtual void Insert(int index, IScheduleAppointment item) + +/// Removes an IScheduleAppointment from this list. + +/// item - The IScheduleAppointment to be removed. + +public virtual void Remove(IScheduleAppointment item) + +/// Removes an IScheduleAppointment from this list. + +/// index - The position of the item to be removed. + +public virtual void RemoveAt(int index) + +/// Returns the position of the specified item within this list. + +/// item - The search item. + +public virtual int IndexOf(IScheduleAppointment item) + +/// Returns a new ScheduleAppointment populated with default values. + +public virtual IScheduleAppointment NewScheduleAppointment() +{% endhighlight %} +{% highlight vb %} +'Gets or sets the i-th IScheduleAppointment in this list. +Public Overridable Default Property Item(ByVal i As Integer) As IScheduleAppointment +'Gets the number of IScheduleAppointments in this list. +Public Overridable Count As Integer +'Sorts this list on the IScheduleAppointment.StartTime property. +Public Overridable Sub SortStartTime() +'Adds an IScheduleAppointment to this list. +'item - The IScheduleAppointment to be added. +Public Overridable Sub Add(ByVal item As IScheduleAppointment) +'Inserts an IScheduleAppointment into this list. +'index - The position in the list where the item is to be inserted. +'item - The IScheduleAppointment to be inserted. +Public Overridable Sub Insert(ByVal index As Integer, ByVal item As IScheduleAppointment) +'Removes an IScheduleAppointment from this list. +'item - The IScheduleAppointment to be removed. +Public Overridable Sub Remove(ByVal item As IScheduleAppointment) +'Removes an IScheduleAppointment from this list. +'index - The position of the item to be removed. +Public Overridable Sub RemoveAt(ByVal index As Integer) +'Returns the position of the specified item within this list. +'item - The search item. +Public Overridable Function IndexOf(ByVal item As IScheduleAppointment) As Integer +'Returns a new ScheduleAppointment populated with default values. +Public Overridable Function NewScheduleAppointment() As IScheduleAppointment +{% endhighlight %} +{% endtabs %} + +#### ScheduleDataProvider class + +The ScheduleDataProvider has two functional roles: + +1. Implements IScheduleDataProvider in a virtual manner so that, the derived classes can provide concrete implementations through virtual overrides. The IScheduleDataProvider virtual methods exposed in ScheduleDataProvider that have empty implementations. So, you are required to derive this class to use it. +2. Provides the DropList data. For this second role, the ScheduleDataProvider does provide concrete implementations for the virtual methods it exposes. So, in your derived class, you would have populated drop lists without doing further work, though you can choose to customize these drop lists through virtual overrides. Here is a list of the stub methods exposed by ScheduleDataProvider in its first role. + +{% tabs %} +{% highlight c# %} +/// Return an IScheduleAppointmentList holding the schedule items for the given date. +public virtual IScheduleAppointmentList GetScheduleForDay(DateTime day) +//// Return an IScheduleAppointmentList holding the schedule items between the given dates. +public virtual IScheduleAppointmentList GetSchedule(DateTime startDate, DateTime endDate) +/// Return an IScheduleAppointmentList holding the schedule items for a particular owner on the given date. +public virtual IScheduleAppointmentList GetScheduleForDay(DateTime day, int owner) +/// Return an IScheduleAppointmentList holding the schedule items for a particular owner between the given dates. +public virtual IScheduleAppointmentList GetSchedule(DateTime startDate, DateTime endDate, int owner) +/// Saves any modified ScheduleAppointments. +public virtual void CommitChanges() +/// Gets or sets whether CommitChanges is called when the ScheduleControl is disposed. +public SaveOnCloseBehavior SaveOnCloseBehaviorAction +/// Gets or sets whether data source is modified or not. +public virtual bool IsDirty +/// Returns a new ScheduleAppointment populated with default values. +public virtual IScheduleAppointment NewScheduleAppointment() +/// Adds a ScheduleAppointment to the list. +public virtual void AddItem(IScheduleAppointment item) +/// Removes a ScheduleAppointment from the list. +public virtual void RemoveItem(IScheduleAppointment item) +{% endhighlight %} +{% highlight vb %} +'Return an IScheduleAppointmentList holding the schedule items for the given date. +Public Overridable Function GetScheduleForDay(ByVal day As DateTime) As IScheduleAppointmentList +'Return an IScheduleAppointmentList holding the schedule items between the given dates. +Public Overridable Function GetSchedule(ByVal startDate As DateTime, ByVal endDate As DateTime) As IScheduleAppointmentList +'Return an IScheduleAppointmentList holding the schedule items for a particular owner on the given date. +Public Overridable Function GetScheduleForDay(ByVal day As DateTime, ByVal owner As Integer) As IScheduleAppointmentList +'Return an IScheduleAppointmentList holding the schedule items for a particular owner between the given dates. +Public Overridable Function GetSchedule(ByVal startDate As DateTime, ByVal endDate As DateTime, ByVal owner As Integer) As IScheduleAppointmentList +'Saves any modified ScheduleAppointments. +Public Overridable Sub CommitChanges() +'Gets or sets whether CommitChanges is called when the ScheduleControl is disposed. +Public SaveOnCloseBehaviorAction As SaveOnCloseBehavior +'Gets or sets whether data source is modified or not. +Public Overridable IsDirty As Boolean +'Returns a new ScheduleAppointment populated with default values. +Public Overridable Function NewScheduleAppointment() As IScheduleAppointment +'Adds a ScheduleAppointment to the list. +Public Overridable Sub AddItem(ByVal item As IScheduleAppointment) +'Removes a ScheduleAppointment from the list. +Public Overridable Sub RemoveItem(ByVal item As IScheduleAppointment) +{% endhighlight %} +{% endtabs %} + +Here are the methods and properties used as part of the ScheduleDataProvider's second role, providing the DropList data. The following is the actual implementation code which gives an indication of the exposed functionality. + +{% tabs %} +{% highlight c# %} +/// Provides default drop lists for entering IScheduleAppointment data. + +/// You can override this method to provide customized drop lists. + +public virtual void InitLists() +{ +labelList = new ListObjectList(); +labelList.Add(new ListObject(0,"None", Color.White)); +labelList.Add(new ListObject(1,"Important", Color.FromArgb(255,128,64))); +labelList.Add(new ListObject(2,"Business", Color.FromArgb(86,152,233))); +labelList.Add(new ListObject(3,"Personal", Color.FromArgb(57,210,53))); +labelList.Add(new ListObject(4,"Vacation", Color.FromArgb(199,198,182))); +labelList.Add(new ListObject(5,"Must Attend", Color.FromArgb(255,128,0))); +labelList.Add(new ListObject(6,"Travel Required", Color.FromArgb(0,255,255))); +labelList.Add(new ListObject(7,"Needs Preparation", Color.FromArgb(171,171,88))); +labelList.Add(new ListObject(8,"Birthday", Color.FromArgb(186,117,255))); +labelList.Add(new ListObject(9,"Anniversary", Color.FromArgb(255,128,64))); +labelList.Add(new ListObject(10,"Phone Call", Color.FromArgb(255,128,64))); +markerList = new ListObjectList(); + +//same as no Mark Color +markerList.Add(new ListObject(0,"Free", Color.FromArgb(50, Color.RoyalBlue))); +markerList.Add(new ListObject(1,"Tentative", Color.FromArgb(255, 206, 206))); +markerList.Add(new ListObject(2,"Busy", Color.FromArgb(0,0,242))); +markerList.Add(new ListObject(3,"Out of Office", Color.FromArgb(128, 0 ,64))); +reminderList = new ListObjectList(); +reminderList.Add(new ListObject(0,"0 minutes", Color.White)); +reminderList.Add(new ListObject(1,"5 minutes", Color.White)); +reminderList.Add(new ListObject(2,"10 minutes", Color.White)); +reminderList.Add(new ListObject(3,"15 minutes", Color.White)); +reminderList.Add(new ListObject(4,"30 minutes", Color.White)); +reminderList.Add(new ListObject(5,"1 hour", Color.White)); +reminderList.Add(new ListObject(6,"2 hours", Color.White)); +reminderList.Add(new ListObject(7,"3 hours", Color.White)); +reminderList.Add(new ListObject(8,"4 hours", Color.White)); +this.locationList = new ListObjectList(); +locationList.Add(new ListObject(0,"", Color.White)); +locationList.Add(new ListObject(1,"RoomB", Color.White)); +locationList.Add(new ListObject(2,"RoomC", Color.White)); +locationList.Add(new ListObject(3,"RoomD", Color.White)); +locationList.Add(new ListObject(4,"RoomE", Color.White)); +} + +/// Returns the list for the LabelValue options. + +public virtual ILookUpObjectList GetLabels() +{ + return LabelList; +} + +/// Gets or sets the list for the LabelList options. +protected ListObjectList LabelList +{ + get{return labelList;} + set{labelList = value;} +} + +/// Returns the list for the ReminderValue options. + +public virtual ILookUpObjectList GetReminders() +{ + return ReminderList; +} + +/// Gets or sets the list for the ReminderValue options. + +protected ListObjectList ReminderList +{ + get{return reminderList;} + set{reminderList = value;} +} + +/// Returns the list for the MarkerValue options. + +public virtual ILookUpObjectList GetMarkers() +{ + return MarkerList; +} + +/// Gets or sets the list for the MarkerValue options. + +protected ListObjectList MarkerList +{ + get{return markerList;} + set{markerList = value;} +} + +/// Returns the list for the LocationValue options. + +public virtual ILookUpObjectList GetLocations() +{ + return LocationList; +} + +/// Gets or sets the list for the LocationValue options. + +protected ListObjectList LocationList +{ + get{return locationList;} + set{locationList = value;} +} + +/// Returns the list for the Owner options. + +public virtual ILookUpObjectList GetOwners() +{ +return OwnerList; +} + +/// Gets or sets the list for the Owner options. + +protected ListObjectList OwnerList +{ + get{return ownerList;} + set{ownerList = value;} +} +{% endhighlight %} +{% highlight vb %} +'Provides default drop lists for entering IScheduleAppointment data. + +'You can override this method to provide customized drop lists. +Public Overridable Sub InitLists() + labelList = New ListObjectList() + labelList.Add(New ListObject(0, "None", Color.White)) + labelList.Add(New ListObject(1, "Important", Color.FromArgb(255, 128, 64))) + labelList.Add(New ListObject(2, "Business", Color.FromArgb(86, 152, 233))) + labelList.Add(New ListObject(3, "Personal", Color.FromArgb(57, 210, 53))) + labelList.Add(New ListObject(4, "Vacation", Color.FromArgb(199, 198, 182))) + labelList.Add(New ListObject(5, "Must Attend", Color.FromArgb(255, 128, 0))) + labelList.Add(New ListObject(6, "Travel Required", Color.FromArgb(0, 255, 255))) + labelList.Add(New ListObject(7, "Needs Preparation", Color.FromArgb(171, 171, 88))) + labelList.Add(New ListObject(8, "Birthday", Color.FromArgb(186, 117, 255))) + labelList.Add(New ListObject(9, "Anniversary", Color.FromArgb(255, 128, 64))) + labelList.Add(New ListObject(10, "Phone Call", Color.FromArgb(255, 128, 64))) + markerList = New ListObjectList() + markerList.Add(New ListObject(0, "Free", Color.FromArgb(50, Color.RoyalBlue))) + markerList.Add(New ListObject(1, "Tentative", Color.FromArgb(255, 206, 206))) + markerList.Add(New ListObject(2, "Busy", Color.FromArgb(0, 0, 242))) + markerList.Add(New ListObject(3, "Out of Office", Color.FromArgb(128, 0, 64))) + reminderList = New ListObjectList() + reminderList.Add(New ListObject(0, "0 minutes", Color.White)) + reminderList.Add(New ListObject(1, "5 minutes", Color.White)) + reminderList.Add(New ListObject(2, "10 minutes", Color.White)) + reminderList.Add(New ListObject(3, "15 minutes", Color.White)) + reminderList.Add(New ListObject(4, "30 minutes", Color.White)) + reminderList.Add(New ListObject(5, "1 hour", Color.White)) + reminderList.Add(New ListObject(6, "2 hours", Color.White)) + reminderList.Add(New ListObject(7, "3 hours", Color.White)) + reminderList.Add(New ListObject(8, "4 hours", Color.White)) + Me.locationList = New ListObjectList() + locationList.Add(New ListObject(0, "", Color.White)) + locationList.Add(New ListObject(1, "RoomB", Color.White)) + locationList.Add(New ListObject(2, "RoomC", Color.White)) + locationList.Add(New ListObject(3, "RoomD", Color.White)) + locationList.Add(New ListObject(4, "RoomE", Color.White)) +End Sub +'Returns the list for the LabelValue options. +Public Overridable Function GetLabels() As ILookUpObjectList + Return LabelList +End Function +' Gets or sets the list for the LabelList options. +Protected Property LabelList As ListObjectList + Get + Return labelList + End Get + + Set(ByVal value As ListObjectList) + labelList = value + End Set +End Property +'Returns the list for the ReminderValue options. +Public Overridable Function GetReminders() As ILookUpObjectList + Return ReminderList +End Function +'Gets or sets the list for the ReminderValue options. +Protected Property ReminderList As ListObjectList + Get + Return reminderList + End Get + + Set(ByVal value As ListObjectList) + reminderList = value + End Set +End Property +'Returns the list for the MarkerValue options. +Public Overridable Function GetMarkers() As ILookUpObjectList + Return MarkerList +End Function +'Gets or sets the list for the MarkerValue options. +Protected Property MarkerList As ListObjectList + Get + Return markerList + End Get + + Set(ByVal value As ListObjectList) + markerList = value + End Set +End Property +'Returns the list for the LocationValue options. +Public Overridable Function GetLocations() As ILookUpObjectList + Return LocationList +End Function +'Gets or sets the list for the LocationValue options. +Protected Property LocationList As ListObjectList + Get + Return locationList + End Get + + Set(ByVal value As ListObjectList) + locationList = value + End Set +End Property +'Returns the list for the Owner options. +Public Overridable Function GetOwners() As ILookUpObjectList + Return OwnerList +End Function +'Gets or sets the list for the Owner options. +Protected Property OwnerList As ListObjectList + Get + Return ownerList + End Get + + Set(ByVal value As ListObjectList) + ownerList = value + End Set +End Property +{% endhighlight %} +{% endtabs %} + +## Recurrence appointment + +The C# WinForms Calendar Scheduler control supports creating the recurring appointment. By this recurrence appointment, you can process on the daily, weekly, monthly, or yearly view to create the recurrence rule with or without end date. Details are explained in the following link: + +[Create the recurrence appointment in WinForms Calendar Scheduler control ](time-interval.md) + +N> You can also explore our [WinForms Scheduler example](https://github.com/syncfusion/winforms-demos/tree/master/schedulecontrol) that shows how to schedule and manage appointments through an intuitive user interface, similar to the Outlook calendar. Looking for the full WinForms Scheduler component overview, features, pricing, and documentation? Visit the [WinForms Scheduler](https://www.syncfusion.com/winforms-ui-controls/scheduler) page. diff --git a/WindowsForms/Scheduler/Getting-Started_images/Getting-Started_img1.png b/WindowsForms/Scheduler/Getting-Started_images/Getting-Started_img1.png new file mode 100644 index 000000000..740063e3a Binary files /dev/null and b/WindowsForms/Scheduler/Getting-Started_images/Getting-Started_img1.png differ diff --git a/WindowsForms/Scheduler/Getting-Started_images/Getting-Started_img10.png b/WindowsForms/Scheduler/Getting-Started_images/Getting-Started_img10.png new file mode 100644 index 000000000..e7a255a4f Binary files /dev/null and b/WindowsForms/Scheduler/Getting-Started_images/Getting-Started_img10.png differ diff --git a/WindowsForms/Scheduler/Getting-Started_images/Getting-Started_img11.jpeg b/WindowsForms/Scheduler/Getting-Started_images/Getting-Started_img11.jpeg new file mode 100644 index 000000000..1a1bfcb0c Binary files /dev/null and b/WindowsForms/Scheduler/Getting-Started_images/Getting-Started_img11.jpeg differ diff --git a/WindowsForms/Scheduler/Getting-Started_images/Getting-Started_img12.jpeg b/WindowsForms/Scheduler/Getting-Started_images/Getting-Started_img12.jpeg new file mode 100644 index 000000000..9b926017c Binary files /dev/null and b/WindowsForms/Scheduler/Getting-Started_images/Getting-Started_img12.jpeg differ diff --git a/WindowsForms/Scheduler/Getting-Started_images/Getting-Started_img13.jpeg b/WindowsForms/Scheduler/Getting-Started_images/Getting-Started_img13.jpeg new file mode 100644 index 000000000..ab8f6c6c3 Binary files /dev/null and b/WindowsForms/Scheduler/Getting-Started_images/Getting-Started_img13.jpeg differ diff --git a/WindowsForms/Scheduler/Getting-Started_images/Getting-Started_img14.jpeg b/WindowsForms/Scheduler/Getting-Started_images/Getting-Started_img14.jpeg new file mode 100644 index 000000000..67f08118f Binary files /dev/null and b/WindowsForms/Scheduler/Getting-Started_images/Getting-Started_img14.jpeg differ diff --git a/WindowsForms/Scheduler/Getting-Started_images/Getting-Started_img15.jpeg b/WindowsForms/Scheduler/Getting-Started_images/Getting-Started_img15.jpeg new file mode 100644 index 000000000..bc6d4886c Binary files /dev/null and b/WindowsForms/Scheduler/Getting-Started_images/Getting-Started_img15.jpeg differ diff --git a/WindowsForms/Scheduler/Getting-Started_images/Getting-Started_img16.jpeg b/WindowsForms/Scheduler/Getting-Started_images/Getting-Started_img16.jpeg new file mode 100644 index 000000000..1f59f8ac5 Binary files /dev/null and b/WindowsForms/Scheduler/Getting-Started_images/Getting-Started_img16.jpeg differ diff --git a/WindowsForms/Scheduler/Getting-Started_images/Getting-Started_img17.jpeg b/WindowsForms/Scheduler/Getting-Started_images/Getting-Started_img17.jpeg new file mode 100644 index 000000000..f2e4c5a56 Binary files /dev/null and b/WindowsForms/Scheduler/Getting-Started_images/Getting-Started_img17.jpeg differ diff --git a/WindowsForms/Scheduler/Getting-Started_images/Getting-Started_img18.jpeg b/WindowsForms/Scheduler/Getting-Started_images/Getting-Started_img18.jpeg new file mode 100644 index 000000000..82e35a5bd Binary files /dev/null and b/WindowsForms/Scheduler/Getting-Started_images/Getting-Started_img18.jpeg differ diff --git a/WindowsForms/Scheduler/Getting-Started_images/Getting-Started_img19.jpeg b/WindowsForms/Scheduler/Getting-Started_images/Getting-Started_img19.jpeg new file mode 100644 index 000000000..d8d41158f Binary files /dev/null and b/WindowsForms/Scheduler/Getting-Started_images/Getting-Started_img19.jpeg differ diff --git a/WindowsForms/Scheduler/Getting-Started_images/Getting-Started_img2.jpeg b/WindowsForms/Scheduler/Getting-Started_images/Getting-Started_img2.jpeg new file mode 100644 index 000000000..2e1ed8ff4 Binary files /dev/null and b/WindowsForms/Scheduler/Getting-Started_images/Getting-Started_img2.jpeg differ diff --git a/WindowsForms/Scheduler/Getting-Started_images/Getting-Started_img20.jpeg b/WindowsForms/Scheduler/Getting-Started_images/Getting-Started_img20.jpeg new file mode 100644 index 000000000..015ac9d37 Binary files /dev/null and b/WindowsForms/Scheduler/Getting-Started_images/Getting-Started_img20.jpeg differ diff --git a/WindowsForms/Scheduler/Getting-Started_images/Getting-Started_img21.jpg b/WindowsForms/Scheduler/Getting-Started_images/Getting-Started_img21.jpg new file mode 100644 index 000000000..35ce733c0 Binary files /dev/null and b/WindowsForms/Scheduler/Getting-Started_images/Getting-Started_img21.jpg differ diff --git a/WindowsForms/Scheduler/Getting-Started_images/Getting-Started_img22.jpg b/WindowsForms/Scheduler/Getting-Started_images/Getting-Started_img22.jpg new file mode 100644 index 000000000..5257d9546 Binary files /dev/null and b/WindowsForms/Scheduler/Getting-Started_images/Getting-Started_img22.jpg differ diff --git a/WindowsForms/Scheduler/Getting-Started_images/Getting-Started_img23.jpg b/WindowsForms/Scheduler/Getting-Started_images/Getting-Started_img23.jpg new file mode 100644 index 000000000..ba35f3e85 Binary files /dev/null and b/WindowsForms/Scheduler/Getting-Started_images/Getting-Started_img23.jpg differ diff --git a/WindowsForms/Scheduler/Getting-Started_images/Getting-Started_img24.png b/WindowsForms/Scheduler/Getting-Started_images/Getting-Started_img24.png new file mode 100644 index 000000000..37c7de0d8 Binary files /dev/null and b/WindowsForms/Scheduler/Getting-Started_images/Getting-Started_img24.png differ diff --git a/WindowsForms/Scheduler/Getting-Started_images/Getting-Started_img3.jpeg b/WindowsForms/Scheduler/Getting-Started_images/Getting-Started_img3.jpeg new file mode 100644 index 000000000..a223e4879 Binary files /dev/null and b/WindowsForms/Scheduler/Getting-Started_images/Getting-Started_img3.jpeg differ diff --git a/WindowsForms/Scheduler/Getting-Started_images/Getting-Started_img4.png b/WindowsForms/Scheduler/Getting-Started_images/Getting-Started_img4.png new file mode 100644 index 000000000..4d7bc2ecd Binary files /dev/null and b/WindowsForms/Scheduler/Getting-Started_images/Getting-Started_img4.png differ diff --git a/WindowsForms/Scheduler/Getting-Started_images/Getting-Started_img5.jpeg b/WindowsForms/Scheduler/Getting-Started_images/Getting-Started_img5.jpeg new file mode 100644 index 000000000..65b79766e Binary files /dev/null and b/WindowsForms/Scheduler/Getting-Started_images/Getting-Started_img5.jpeg differ diff --git a/WindowsForms/Scheduler/Getting-Started_images/Getting-Started_img6.png b/WindowsForms/Scheduler/Getting-Started_images/Getting-Started_img6.png new file mode 100644 index 000000000..ed3d286c1 Binary files /dev/null and b/WindowsForms/Scheduler/Getting-Started_images/Getting-Started_img6.png differ diff --git a/WindowsForms/Scheduler/Getting-Started_images/Getting-Started_img7.jpeg b/WindowsForms/Scheduler/Getting-Started_images/Getting-Started_img7.jpeg new file mode 100644 index 000000000..d87283e09 Binary files /dev/null and b/WindowsForms/Scheduler/Getting-Started_images/Getting-Started_img7.jpeg differ diff --git a/WindowsForms/Scheduler/Getting-Started_images/Getting-Started_img8.jpeg b/WindowsForms/Scheduler/Getting-Started_images/Getting-Started_img8.jpeg new file mode 100644 index 000000000..81c2eedde Binary files /dev/null and b/WindowsForms/Scheduler/Getting-Started_images/Getting-Started_img8.jpeg differ diff --git a/WindowsForms/Scheduler/Getting-Started_images/Getting-Started_img9.jpeg b/WindowsForms/Scheduler/Getting-Started_images/Getting-Started_img9.jpeg new file mode 100644 index 000000000..e81067708 Binary files /dev/null and b/WindowsForms/Scheduler/Getting-Started_images/Getting-Started_img9.jpeg differ diff --git a/WindowsForms/Scheduler/Item-Dragging-Context-in-the-ItemChanging-event.md b/WindowsForms/Scheduler/Item-Dragging-Context-in-the-ItemChanging-event.md new file mode 100644 index 000000000..8f204f240 --- /dev/null +++ b/WindowsForms/Scheduler/Item-Dragging-Context-in-the-ItemChanging-event.md @@ -0,0 +1,120 @@ +--- +layout: post +title: Item Dragging Context in the ItemChanging in Scheduler | Syncfusion® +description: Learn about Item Dragging Context in the ItemChanging event support in Syncfusion® Windows Forms Scheduler (Schedule) control and more details. +platform: windowsforms +control: Schedule +documentation: ug +--- + +# Item Dragging Context in the ItemChanging event in Scheduler + +This feature provides support to detect the dragging context when an item is dropped in the schedule part or calendar part. It also enables you to cancel specific items as needed through the ItemChanging event. + +### Use case scenario + +In the ItemChanging event, through the ItemDragHitContext enumeration, you can detect the dragging context (Schedule or Calendar) and cancel specific items as needed. + +### Property + + + + + + +
+Property +Description +Data Type
+ItemDragHitContext +Specifies where the mouse is during an appointment drag in a week or month view. +enum
+ +### Event + + + + + + +
+Event +Parameters +Description
+ItemChanging +object sender, ScheduleAppointmentCancelEventArgs e +Occurs after an IScheduleAppointment is modified.
+ +#### Sample link + +You can get the schedule sample from the following online location: + +[http://samples.syncfusion.com/windowsforms](http://samples.syncfusion.com/windowsforms) + +### Adding drag-context detection to an application + +The following steps help you to get the target part in the Schedule control while dragging: + +1. Create a Schedule control enabled sample application. +2. Add appointments in that schedule grid. +3. Hook the `ItemChanging` event. + +{% capture codesnippet1 %}​ +{% tabs %} +{% highlight c# %} +using Syncfusion.Windows.Forms.Schedule; + +this.scheduleControl1.ItemChanging += new ScheduleAppointmentChangingEventHandler(scheduleControl1_ItemChanging); +{% endhighlight %} +{% highlight vb %} +Imports Syncfusion.Windows.Forms.Schedule + +AddHandler scheduleControl1.ItemChanging, AddressOf scheduleControl1_ItemChanging +{% endhighlight %} +{% endtabs %} +{% endcapture %} +{{ codesnippet1 | OrderList_Indent_Level_1 }} + +Get the drag hit context with the following code. + +{% tabs %} +{% highlight c# %} +void scheduleControl1_ItemChanging(object sender, ScheduleAppointmentCancelEventArgs e) +{ + + if (e.Action == ItemAction.ItemDrag) + { + Console.WriteLine("Dropped Area :" + e.ItemDragHitContext); + } +} +{% endhighlight %} +{% highlight vb %} +Private Sub scheduleControl1_ItemChanging(ByVal sender As Object, ByVal e As ScheduleAppointmentCancelEventArgs) + + If e.Action = ItemAction.ItemDrag Then + Console.WriteLine("Dropped Area :" + e.ItemDragHitContext.ToString()) + End If +End Sub +{% endhighlight %} +{% endtabs %} + +You can cancel the dropped item using the ItemDragHitContext property. + +{% tabs %} +{% highlight c# %} +void scheduleControl1_ItemChanging(object sender, ScheduleAppointmentCancelEventArgs e) +{ + + if (e.ItemDragHitContext == ItemDragHitContext.Calendar) + e.Cancel = true; +} +{% endhighlight %} +{% highlight vb %} +Private Sub scheduleControl1_ItemChanging(ByVal sender As Object, ByVal e As ScheduleAppointmentCancelEventArgs) + + If e.ItemDragHitContext = ItemDragHitContext.Calendar Then + e.Cancel = True + End If +End Sub +{% endhighlight %} +{% endtabs %} diff --git a/WindowsForms/Scheduler/Metro-Theme-for-Essential-Schedule.md b/WindowsForms/Scheduler/Metro-Theme-for-Essential-Schedule.md new file mode 100644 index 000000000..4e6e56613 --- /dev/null +++ b/WindowsForms/Scheduler/Metro-Theme-for-Essential-Schedule.md @@ -0,0 +1,63 @@ +--- +layout: post +title: Metro Theme for Essential Schedule in WinForms Scheduler | Syncfusion® +description: Learn about Metro Theme for Essential® Schedule support in Syncfusion® Windows Forms Scheduler (Schedule) control and more details. +platform: windowsforms +control: Schedule +documentation: ug +--- + +# Metro Theme for Schedule in Windows Forms Scheduler + +This feature enables you to apply the Metro theme to the Schedule control. + +### Use case scenario + +The Metro theme support is useful for commercial applications to attract end users with inspiring UI look and feel. + +### Property + + + + + + +
+Property +Description
+VisualStyle +This is an enumeration type property used to get or set the visual styles (skins) such as Office2010, Office2007, Office2003, Metro, etc.
+ +### Event + + + + + + +
+Event +Parameters +Description
+ThemeChanged +Object sender, EventArgs e +Occurs when the ThemesEnabled property is changed.
+ +## Applying Metro Theme to the Schedule Control + +You can apply Metro theme to the Schedule control by setting the GridVisualStyles property as Metro. + +{% tabs %} +{% highlight c# %} +using Syncfusion.Windows.Forms.Schedule; + +this.scheduleControl1.GetScheduleHost().Schedule.Appearance.VisualStyle = Syncfusion.Windows.Forms.GridVisualStyles.Metro; +{% endhighlight %} +{% highlight vb %} +Imports Syncfusion.Windows.Forms.Schedule + +Me.scheduleControl1.GetScheduleHost().Schedule.Appearance.VisualStyle = Syncfusion.Windows.Forms.GridVisualStyles.Metro +{% endhighlight %} +{% endtabs %} + +![Metro-Theme-for-Essential-Schedule_img1](Metro-Theme-for-Essential-Schedule_images/Metro-Theme-for-Essential-Schedule_img1.png) diff --git a/WindowsForms/Scheduler/Metro-Theme-for-Essential-Schedule_images/Metro-Theme-for-Essential-Schedule_img1.png b/WindowsForms/Scheduler/Metro-Theme-for-Essential-Schedule_images/Metro-Theme-for-Essential-Schedule_img1.png new file mode 100644 index 000000000..c45c93312 Binary files /dev/null and b/WindowsForms/Scheduler/Metro-Theme-for-Essential-Schedule_images/Metro-Theme-for-Essential-Schedule_img1.png differ diff --git a/WindowsForms/Scheduler/Overview.md b/WindowsForms/Scheduler/Overview.md new file mode 100644 index 000000000..de35824d0 --- /dev/null +++ b/WindowsForms/Scheduler/Overview.md @@ -0,0 +1,35 @@ +--- +layout: post +title: About Windows Forms Scheduler control (Event Calendar) | Syncfusion® +canonical_url: "https://www.syncfusion.com/scheduler-sdk/winforms-scheduler" +description: Learn here all about introduction of Syncfusion® Windows Forms Scheduler (Event Calendar) control, its elements and more details. +platform: windowsforms +control: Schedule +documentation: ug +--- + +# Windows Forms Scheduler (Event Calendar) Overview + +The Scheduler is a Windows Forms class library built around the functionalities found in the Windows Forms Grid control. The control allows you to add scheduling support to your applications. + +The most popular WinForms Scheduler includes creating new appointments, displaying those appointments in a variety of views, including Monthly, Daily, Weekly, Work Week, and multiple days. In the daily formats, you can use the UI to drag appointments to another time slot and to extend appointments. A flexible navigation calendar lets you easily navigate to the dates you would like to see in the Schedule control. + +![windows forms schedule showing month view](overview_images/windowsforms-scheduler-showing-month-view.png) + +The [WinForms Scheduler](https://www.syncfusion.com/scheduler-sdk/winforms-scheduler) control finds a wide variety of applications such as Time Tables, Calendars, Event Scheduling, Sequences, Activities, Project Management, Reservations, Resource Usage Planners, and so on. + +## Key features + +* Caption panel: Displays a caption on the top of the Schedule control. There are two button objects in this panel that will navigate Schedule forward and backward. This panel is docked on the top of the ScheduleControl client area. +* Navigation panel: Places additional controls and makes them appear adjacent to the Schedule control. This can be optionally docked to the left or right side of the ScheduleControl. You can also hide this panel. The ScheduleControl.Calendar is a NavigationCalendar object docked at the top of this panel. There is also a splitter docked under the Navigation Calendar to display more or fewer calendars in the NavigationCalendar. The default settings display two such calendars. +* Navigation Calendar: The GridControl-derived object displays multiple calendars that allows selecting the dates displayed in the Schedule control. This calendar is docked on the top of the NavigationPanel. The number of calendars displayed in the Navigation Calendar is determined by its client height. Enlarging the height of the Navigation Calendar will display more calendars. There is a splitter docked under the Navigation Calendar to facilitate such sizing. +* Editing: Supports editing the appointments using Appointment form. +* Drag-Drop: Supports dragging and dropping the appointment from one time slot to another time slot. Appointment resizing operation can also be performed as per required start and end time of the schedule in an interactive manner. +* Selection: Supports selecting the date, like Outlook. +* Built-in views: Supports displaying various types of schedule views (Month, WorkWeek, Week, and CustomWeek). +* Styling: Extensively supports customizing styles of the headers in the ScheduleControl. +* Globalization and localization: Supports localized static text, day, and month names based on the culture. +* Recurrence appointment: Supports schedule recurring appointments to repeat daily, weekly, monthly, or yearly. +* Touch support: Completely supports swiping, panning, zooming, and more. + +N> You can also explore our [WinForms Scheduler example](https://github.com/syncfusion/winforms-demos/tree/master/schedulecontrol) that shows how to schedule and manage appointments through an intuitive user interface, similar to the Outlook calendar. Looking for the full WinForms Scheduler component overview, features, pricing, and documentation? Visit the [WinForms Scheduler](https://www.syncfusion.com/winforms-ui-controls/scheduler) page. diff --git a/WindowsForms/Scheduler/Overview_images/Overview_img2.jpeg b/WindowsForms/Scheduler/Overview_images/Overview_img2.jpeg new file mode 100644 index 000000000..eabe58f78 Binary files /dev/null and b/WindowsForms/Scheduler/Overview_images/Overview_img2.jpeg differ diff --git a/WindowsForms/Scheduler/Overview_images/Overview_img3.jpeg b/WindowsForms/Scheduler/Overview_images/Overview_img3.jpeg new file mode 100644 index 000000000..6ff90bfbf Binary files /dev/null and b/WindowsForms/Scheduler/Overview_images/Overview_img3.jpeg differ diff --git a/WindowsForms/Scheduler/Overview_images/Overview_img4.jpeg b/WindowsForms/Scheduler/Overview_images/Overview_img4.jpeg new file mode 100644 index 000000000..ea3b3d96a Binary files /dev/null and b/WindowsForms/Scheduler/Overview_images/Overview_img4.jpeg differ diff --git a/WindowsForms/Scheduler/Overview_images/Overview_img5.jpeg b/WindowsForms/Scheduler/Overview_images/Overview_img5.jpeg new file mode 100644 index 000000000..eabe58f78 Binary files /dev/null and b/WindowsForms/Scheduler/Overview_images/Overview_img5.jpeg differ diff --git a/WindowsForms/Scheduler/Overview_images/windowsforms-scheduler-showing-month-view.png b/WindowsForms/Scheduler/Overview_images/windowsforms-scheduler-showing-month-view.png new file mode 100644 index 000000000..f57ccd005 Binary files /dev/null and b/WindowsForms/Scheduler/Overview_images/windowsforms-scheduler-showing-month-view.png differ diff --git a/WindowsForms/Scheduler/ScheduleControl.md b/WindowsForms/Scheduler/ScheduleControl.md new file mode 100644 index 000000000..fb59610d6 --- /dev/null +++ b/WindowsForms/Scheduler/ScheduleControl.md @@ -0,0 +1,178 @@ +--- +layout: post +title: ScheduleControl in Windows Forms Scheduler control | Syncfusion® +description: Learn about ScheduleControl support in Syncfusion® Windows Forms Scheduler (Schedule) control and more details. +platform: windowsforms +control: Schedule +documentation: ug +--- + +# ScheduleControl in Windows Forms Scheduler (Schedule) + +The ScheduleControl is a User Control that provides the basic scheduling functionality. + +### Properties + + + + + + + + + + + + + + + + + + +
+Name +Description
+Appearance +Gets or sets the ScheduleAppearance object that controls the visual aspects of the ScheduleControl.
+Calendar +Gets the navigation calendar.
+CaptionPanel +Gets the caption panel that holds the caption above the calendar.
+DataSource +Gets or sets the data source for the ScheduleControl.
+EnableAlerts +Indicates whether alerts should be raised as the appointment time approaches or not.
+NavigationPanel +Gets the navigation panel.
+ScheduleType +Gets or sets whether a daily, weekly or monthly schedule is displayed.
+ +### Methods + + + + + + + + + + + + + + + + +
+Name +Description
+AddControlToNavigationPanel +Adds the specified control to the navigation panel underneath the navigation calendar.
+AddSpanAppointment +Adds a multi day span appointment to a data provider.
+PerformNewItemClick +Displays a dialog box allowing you to add an item.
+PerformDeleteItemClick +Displays a dialog box allowing you to delete an item.
+PerformEditItemClick +Displays a dialog box allowing you to edit an item.
+PerformSwitchToScheduleViewTypeClick +Switches the display to the specified ScheduleView type.
+ +### Events + + + + + + + + + + +
+Name +Description
+ItemChanged +Notifies when an appointment is modified.
+ScheduleAppointmentClick +Occurs when an item is clicked or double-clicked.
+ScheduleGridCreated +Allows you to either use a derived ScheduleGridControl or subscribe to the events on the ScheduleGridControl.
+ +## Caption panel + +Displays a caption on the top of the ScheduleControl. The two buttons on this panel will navigate the schedule forward and backward. + +## Navigation panel + +It is a panel where you can place additional controls and make them appear adjacent to the ScheduleControl. + +## Navigation calendar + +A GridControl-derived object displays multiple calendars and lets you select particular dates or data ranges to be displayed in the ScheduleControl. + +### Properties + + + + + + + + + + + + + + +
+Name +Description
+CalendarGrid +Gets the grid control to display the calendars.
+DateValue +Gets or sets the date value for the navigation calendar.
+SelectedDates +Gets the dates selected in the navigation calendar.
+ShowWeekNumbers +Indicates whether the week numbers should be displayed in the calendars or not.
+Today +Gets or sets the DateTime value for the current day.
+ +### Methods + + + + + + + + + + +
+Name +Description
+FirstDayOfMonth +Returns the date of the first day of the month of the passed-in date.
+MondayBeforeDate +Returns the Monday before the given date.
+SundayAfterDate +Returns the Sunday after the given date.
+ +### Event + + + + + + +
+Name +Description
+DateValueChanged +Occurs when NavigationCalendar.DateValue property is changed.
diff --git a/WindowsForms/Scheduler/Time-Interval.md b/WindowsForms/Scheduler/Time-Interval.md new file mode 100644 index 000000000..8c41b1e8d --- /dev/null +++ b/WindowsForms/Scheduler/Time-Interval.md @@ -0,0 +1,158 @@ +--- +layout: post +title: Time Interval in Windows Forms Scheduler control | Syncfusion® +description: Learn about Time Interval support in Syncfusion® Windows Forms Scheduler (Schedule) control and more details. +platform: windowsforms +control: Schedule +documentation: ug +--- + +# Time Interval in Windows Forms Scheduler (Schedule) + +This topic illustrates the time interval format options for scheduling appointments. + +## Recurrence rule + +The RecurrenceRule is a string value that contains the details of the recurrence appointments with repeated rule types like daily, monthly, yearly, every second, every minute, every hour, how many days it needs to render or count, what is the interval, the time period to render the appointment, etc. RecurrenceRule has the following properties and based on these property values, recurrence appointments are rendered in the Schedule control. + + + + + + + + + + + + + + + + + + + + + + + + +
+S.No +Rule name +Purpose
+1. +Every DAY +Maintains the repeat type value Every Day. Syntax:{StartDate};{EndDate};Every DAY {NumberOfDay} Example:10/08/2015;10/15/2015;Every DAY 1
+2. +Every WEEKDAY +Maintains the repeat type value for the selected Weekdays. Syntax:{StartDate};{EndDate};Every WEEKDAY Example:10/08/2015;11/08/2015;Every WEEKDAY
+3. +Every WEEKEND +Maintains the repeat type value for the selected Weekends. Syntax:{StartDate};{EndDate};Every WEEKEND Example:10/08/2009;11/08/2009;Every WEEKEND
+4. +Every WEEK +Maintains the repeat type value for the selected Week. Syntax:{StartDate};{EndDate};Every WEEK on {DAY};Every WEEK on {DAY} Example:10/08/2015;11/08/2015;Every WEEK on SUN;Every WEEK on MON;
+5. +Every SEC +Maintains the repeat type value for every mentioned second for the appointed date. Syntax:{StartDate};{EndDate};Every DAY {NumberOfDay};Every SEC {Interval} Example:10/08/2015;10/15/2015;Every DAY 1;Every SEC 120;10/08/2015;11/08/2015;Every WEEKDAY;Every SEC 120;
+6. +Every MIN +Maintains the repeat type value for every mentioned minute for the appointed date. Syntax:{StartDate};{EndDate};Every DAY {NumberOfDay};Every MIN {Interval} Example:10/08/2015;10/15/2015;Every DAY 1;Every MIN 10;10/08/2015;11/08/2015;Every WEEKDAY;Every MIN 10;
+7. +Every HR +Maintains the repeat type value for every mentioned hour for the appointed date. Syntax:{StartDate};{EndDate};Every DAY {NumberOfDay};Every HR {Interval} Example:10/08/2015;10/15/2015;Every DAY 1;Every HR 10;10/08/2015;11/08/2015;Every WEEKDAY;Every HR 10;
+8. +Every MONTH +Maintains the repeat type value for every Month on the selected date or week. Syntax:{StartDate};{EndDate};Every MONTH on {Date}{StartDate};{EndDate};Every MONTH on {Day}:{WhichWeek} Example:05/08/2009;10/08/2009;Every MONTH on 05/08/2009;10/08/2009;Every MONTH on WED:2
+9. +Every QUARTER +Maintains the repeat type value for every quarter. Syntax:{StartDate};{EndDate};Every QUARTER on {Date} after MONTH:{MonthDifference}{StartDate};{EndDate};Every QUARTER on {Day}:{Date} after MONTH:{MonthDifference} Example:10/13/2015;10/13/2016;Every QUARTER on 20 after MONTH:10/13/2015;10/13/2016;Every QUARTER on MON:1 after MONTH:1
+10. +Every YEAR +Maintains the repeat type value for every year. Syntax:{StartDate};{EndDate};Every YEAR on {Month}{Date}{StartDate};{EndDate};Every YEAR on {DAY}:{whichWeek} after {Month} Example:10/13/2015;10/13/2017;Every YEAR on JAN 10/15/2015;10/15/2017;Every YEAR on MON:1 after JAN
+ +## Setting the time interval in seconds format + +The Schedule control, by default, allows you to set the time interval for scheduling appointments only in hours and minutes formats. You can also include seconds in the time interval by enabling the AllowSecondsInAppointment property. + +{% tabs %} +{% highlight c# %} +using Syncfusion.Windows.Forms.Schedule; + +this.scheduleControl1.AllowSecondsInAppointment = true; +{% endhighlight %} +{% highlight vb %} +Imports Syncfusion.Windows.Forms.Schedule + +Me.scheduleControl1.AllowSecondsInAppointment = True +{% endhighlight %} +{% endtabs %} + +![Time interval in WindowsForms Scheduler](time-interval_images/windowsforms-scheduler-time-interval.png) + + +## Setting the recurrence appointments in seconds + +By default, the Schedule control allows you to add the recurrence appointments only for each day, month, or year. Recurrence appointments in the WinForms Scheduler can also be organized in seconds, minutes, and hours. To add the recurrence appointments in seconds, it is necessary to enable the [AllowSecondsInAppointment](https://help.syncfusion.com/windowsforms/scheduler/time-interval#setting-the-time-interval-in-seconds-format) property. When the value goes below 60 seconds, then by default, the appointment time defaults to 60 seconds. Recurrence appointments can be added in two ways. + +### Adding recurrence by using Appointment Recurrence dialog + +Recurrence appointments can be added by using the Appointment Recurrence dialog box available in the Appointment Form. The Appointment Form can be opened by double clicking any day in the schedule control. Follow the steps: + +1. Enter the contents in the subject. +2. Uncheck the All Day event. +3. Enter the Start Time and End Time values. + + ![Appointment steps in WindowsForms Scheduler](time-interval_images/windowsforms-scheduler-appointment-steps.png) + +4. Click the Make Recurring button to open the Appointment Recurrence Dialog. + + ![Appointment recurrence dialog in WindowsForms Scheduler](time-interval_images/windowsforms-scheduler-appointment-recurrence-dialog.jpeg) + +5. The highlighted area above is the newly implemented recurrence settings. +6. Choose the desired option to create the recurrence appointment in the schedule control and press OK. +7. Now, Save and Close. + +### Adding recurrence by using the RecurrenceRule property + +Recurrence appointments can also be added by using the RecurrenceRule property. The RecurrenceRule is a string value that contains the details of the recurrence appointment with repeated rule types like daily, monthly, yearly, every second, every minute, every hour, how many days it needs to render or count, what is the interval, the time period to render the appointment, etc. The rules available in the Recurrence Rule property are listed in the following link. + +[RecurrenceRule](https://help.syncfusion.com/windowsforms/scheduler/time-interval#recurrence-rule) + +To use the recurring appointments data provider of the Schedule control, the IRecurringScheduleAppointment interface should be implemented. + +{% tabs %} +{% highlight c# %} +IRecurringScheduleDataProvider dataProvider = scheduleProvider as IRecurringScheduleDataProvider; +IScheduleAppointment app = scheduleProvider.NewScheduleAppointment(); +IRecurringScheduleAppointment item = app as IRecurringScheduleAppointment; + +if (item != null) +{ + item.StartTime = new DateTime(2015, 05, 06, 1, 0, 0); + item.EndTime = new DateTime(2015, 05, 06, 2, 0, 0); + item.Subject = "Call Joe"; + item.RecurrenceRule = "05/06/2015 ;05/07/2015 ;Every DAY;EVERY MIN 10"; + dataProvider.AddNewRecurringAppointments(item, new DateTime(2015, 09, 09)); +} +{% endhighlight %} +{% highlight vb %} +Dim dataProvider As IRecurringScheduleDataProvider = TryCast(scheduleProvider, IRecurringScheduleDataProvider) +Dim app As IScheduleAppointment = scheduleProvider.NewScheduleAppointment() +Dim item As IRecurringScheduleAppointment = TryCast(app, IRecurringScheduleAppointment) + +If item IsNot Nothing Then +item.StartTime = New DateTime(2015, 05, 06, 1, 0, 0) +item.EndTime = New DateTime(2015, 05, 06, 2, 0, 0) +item.Subject = "Call Joe" +item.RecurrenceRule = "05/06/2015 ;05/07/2015 ;Every DAY;EVERY MIN 10" +dataProvider.AddNewRecurringAppointments(item, New DateTime(2015, 09, 09)) +End If +{% endhighlight %} +{% endtabs %} + +The following screenshot displays appointments shown in the day view every 10 minutes from 1:00 AM to 2:00 AM. + +![Recurrence rule in WindowsForms Scheduler](time-interval_images/windowsforms-scheduler-recurrence-rule.png) diff --git a/WindowsForms/Scheduler/Time-Interval_images/windowsforms-scheduler-appointment-recurrence-dialog.jpeg b/WindowsForms/Scheduler/Time-Interval_images/windowsforms-scheduler-appointment-recurrence-dialog.jpeg new file mode 100644 index 000000000..b50e15706 Binary files /dev/null and b/WindowsForms/Scheduler/Time-Interval_images/windowsforms-scheduler-appointment-recurrence-dialog.jpeg differ diff --git a/WindowsForms/Scheduler/Time-Interval_images/windowsforms-scheduler-appointment-steps.png b/WindowsForms/Scheduler/Time-Interval_images/windowsforms-scheduler-appointment-steps.png new file mode 100644 index 000000000..e9a4a2349 Binary files /dev/null and b/WindowsForms/Scheduler/Time-Interval_images/windowsforms-scheduler-appointment-steps.png differ diff --git a/WindowsForms/Scheduler/Time-Interval_images/windowsforms-scheduler-recurrence-rule.png b/WindowsForms/Scheduler/Time-Interval_images/windowsforms-scheduler-recurrence-rule.png new file mode 100644 index 000000000..2ee829dcf Binary files /dev/null and b/WindowsForms/Scheduler/Time-Interval_images/windowsforms-scheduler-recurrence-rule.png differ diff --git a/WindowsForms/Scheduler/Time-Interval_images/windowsforms-scheduler-time-interval.png b/WindowsForms/Scheduler/Time-Interval_images/windowsforms-scheduler-time-interval.png new file mode 100644 index 000000000..9c1d8e4b7 Binary files /dev/null and b/WindowsForms/Scheduler/Time-Interval_images/windowsforms-scheduler-time-interval.png differ diff --git a/WindowsForms/Scheduler/TouchSupport.md b/WindowsForms/Scheduler/TouchSupport.md new file mode 100644 index 000000000..de9dfa017 --- /dev/null +++ b/WindowsForms/Scheduler/TouchSupport.md @@ -0,0 +1,39 @@ +--- +layout: post +title: Touch Support in Windows Forms Scheduler control | Syncfusion® +description: Learn about Touch Support in Syncfusion® Windows Forms Scheduler (Schedule) control and more details. +platform: WindowsForms +control: Schedule +documentation: ug +--- + +# Touch Support in Windows Forms Scheduler (Schedule) + +The ScheduleControl provides swipe scrolling and zooming touch support, like the Outlook calendar. The touch support for schedule control can be enabled by setting the [EnableTouchMode](https://help.syncfusion.com/cr/windowsforms/Syncfusion.Windows.Forms.Schedule.ScheduleControl.html#Syncfusion_Windows_Forms_Schedule_ScheduleControl_EnableTouchMode) property to `true`. This will enable the grid to support swiping, panning, and zooming. Default value of the `EnableTouchMode` property is `false`. + +{% tabs %} +{% highlight c# %} +using Syncfusion.Windows.Forms.Schedule; + +//Enable the touch mode. +scheduleControl1.EnableTouchMode = true; +{% endhighlight %} +{% highlight vb %} +Imports Syncfusion.Windows.Forms.Schedule + +'Enable the touch mode. +scheduleControl1.EnableTouchMode = True +{% endhighlight %} +{% endtabs %} + +## Touch swiping + +The ScheduleControl allows you to perform the vertical swipe scrolling in Day, `WorkWeek`, and custom views. The previous or next period can be viewed by horizontal swiping left-to-right or right-to-left, like the MS Outlook calendar. + +![Schedule_img1](TouchSupport_images/Schedule_img1.png) + +## Touch zooming + +The ScheduleControl view can be changed when zooming, like the MS Outlook calendar. + +![Schedule_img2](TouchSupport_images/Schedule_img2.png) diff --git a/WindowsForms/Scheduler/TouchSupport_images/Schedule_img1.png b/WindowsForms/Scheduler/TouchSupport_images/Schedule_img1.png new file mode 100644 index 000000000..d84bfc762 Binary files /dev/null and b/WindowsForms/Scheduler/TouchSupport_images/Schedule_img1.png differ diff --git a/WindowsForms/Scheduler/TouchSupport_images/Schedule_img2.png b/WindowsForms/Scheduler/TouchSupport_images/Schedule_img2.png new file mode 100644 index 000000000..dc8fb1e12 Binary files /dev/null and b/WindowsForms/Scheduler/TouchSupport_images/Schedule_img2.png differ diff --git a/WindowsForms/TreeMap/ColorMapping.md b/WindowsForms/TreeMap/ColorMapping.md new file mode 100644 index 000000000..997b0ad51 --- /dev/null +++ b/WindowsForms/TreeMap/ColorMapping.md @@ -0,0 +1,345 @@ +--- +layout: post +title: Color Mapping in TreeMap control | Syncfusion® +description: Learn here all about ColorMapping of Syncfusion® Essential Studio® Windows Forms TreeMap control, its elements, and more. +platform: windowsforms +control: TreeMap +documentation: ug +--- + +# ColorMapping in Windows Forms TreeMap control + +The ColorMapping is categorized into four different types such as, + +* UniColorMapping +* RangeBrushColorMapping +* DesaturationColorMapping +* PaletteColorMapping + +The various colorMappings can be set in LeafColorMapping property of TreeMap. + +#### UniColorMapping + +TreeMap leaf nodes can be provided with unique colors with the help of the Color property specified using UniColorMapping. + +#### Code Sample: + +{% tabs %} + +{% highlight c# %} + +public partial class Form1 : Form +{ + TreeMap TreeMap1 = new TreeMap(); + UniColorMapping uniColorMapping = new UniColorMapping(); + + public Form1() + { + InitializeComponent(); + this.BackColor = Color.White; + + PopulationViewModel data = new PopulationViewModel(); + TreeMap1.ItemsSource = data.PopulationDetails; + TreeMap1.WeightValuePath = "Population"; + TreeMap1.ColorValuePath = "Growth"; + + TreeMapFlatLevel treeMapFlatLevel1 = new TreeMapFlatLevel(); + treeMapFlatLevel1.GroupPath = "Continent"; + TreeMap1.Levels.Add(treeMapFlatLevel1); + TreeMap1.LeafItemSettings.LabelPath = "Country"; + this.Controls.Add(TreeMap1); + + uniColorMapping.Color = Color.MediumSlateBlue; + TreeMap1.LeafColorMapping = uniColorMapping; + } +} + +{% endhighlight %} + +{% highlight vb %} + +Public Partial Class Form1 + Inherits Form + + Private TreeMap1 As New TreeMap() + Private uniColorMapping As New UniColorMapping() + + Public Sub New() + InitializeComponent() + Me.BackColor = Color.White + + Dim data As New PopulationViewModel() + TreeMap1.ItemsSource = data.PopulationDetails + TreeMap1.WeightValuePath = "Population" + TreeMap1.ColorValuePath = "Growth" + + Dim treeMapFlatLevel1 As New TreeMapFlatLevel() + treeMapFlatLevel1.GroupPath = "Continent" + TreeMap1.Levels.Add(treeMapFlatLevel1) + TreeMap1.LeafItemSettings.LabelPath = "Country" + Me.Controls.Add(TreeMap1) + + uniColorMapping.Color = Color.MediumSlateBlue + TreeMap1.LeafColorMapping = uniColorMapping + End Sub + +End Class + +{% endhighlight %} + +{% endtabs %} + +![Features_images8](Features_images/Features_img8.png) + +Leaf Nodes colored by using UniColorMapping +{:.caption} + +#### RangeBrushColorMapping + +The leaf nodes of TreeMap can be colored based upon the range (i.e., From and To) and Brush specified using RangeBrush collection of RangeBrushColorMapping. + +#### Code Sample: + +{% tabs %} + +{% highlight c# %} + +public partial class Form1 : Form +{ + TreeMap TreeMap1 = new TreeMap(); + RangeBrushColorMapping rangeBrushColorMapping = new RangeBrushColorMapping(); + + public Form1() + { + InitializeComponent(); + this.BackColor = Color.White; + + PopulationViewModel data = new PopulationViewModel(); + TreeMap1.ItemsSource = data.PopulationDetails; + TreeMap1.WeightValuePath = "Population"; + TreeMap1.ColorValuePath = "Growth"; + + TreeMapFlatLevel treeMapFlatLevel1 = new TreeMapFlatLevel(); + treeMapFlatLevel1.GroupPath = "Continent"; + TreeMap1.Levels.Add(treeMapFlatLevel1); + TreeMap1.LeafItemSettings.LabelPath = "Country"; + this.Controls.Add(TreeMap1); + + rangeBrushColorMapping.Brushes.Add(new RangeBrush() { Color = System.Drawing.ColorTranslator.FromHtml("#77D8D8"), From = 0, To = 1, LegendLabel = "1% Growth" }); + rangeBrushColorMapping.Brushes.Add(new RangeBrush() { Color = System.Drawing.ColorTranslator.FromHtml("#AED960"), From = 0, To = 2, LegendLabel = "2% Growth" }); + rangeBrushColorMapping.Brushes.Add(new RangeBrush() { Color = System.Drawing.ColorTranslator.FromHtml("#FFAF51"), From = 0, To = 3, LegendLabel = "3% Growth" }); + rangeBrushColorMapping.Brushes.Add(new RangeBrush() { Color = System.Drawing.ColorTranslator.FromHtml("#F3D240"), From = 0, To = 20, LegendLabel = "20% Growth" }); + + TreeMap1.LeafColorMapping = rangeBrushColorMapping; + } +} + +{% endhighlight %} + +{% highlight vb %} + +Public Partial Class Form1 + Inherits Form + + Private TreeMap1 As New TreeMap() + Private rangeBrushColorMapping As New RangeBrushColorMapping() + + Public Sub New() + InitializeComponent() + Me.BackColor = Color.White + + Dim data As New PopulationViewModel() + TreeMap1.ItemsSource = data.PopulationDetails + TreeMap1.WeightValuePath = "Population" + TreeMap1.ColorValuePath = "Growth" + + Dim treeMapFlatLevel1 As New TreeMapFlatLevel() + treeMapFlatLevel1.GroupPath = "Continent" + TreeMap1.Levels.Add(treeMapFlatLevel1) + TreeMap1.LeafItemSettings.LabelPath = "Country" + Me.Controls.Add(TreeMap1) + + rangeBrushColorMapping.Brushes.Add(New RangeBrush() With { .Color = System.Drawing.ColorTranslator.FromHtml("#77D8D8"), .From = 0, .To = 1, .LegendLabel = "1% Growth" }) + rangeBrushColorMapping.Brushes.Add(New RangeBrush() With { .Color = System.Drawing.ColorTranslator.FromHtml("#AED960"), .From = 0, .To = 2, .LegendLabel = "2% Growth" }) + rangeBrushColorMapping.Brushes.Add(New RangeBrush() With { .Color = System.Drawing.ColorTranslator.FromHtml("#FFAF51"), .From = 0, .To = 3, .LegendLabel = "3% Growth" }) + rangeBrushColorMapping.Brushes.Add(New RangeBrush() With { .Color = System.Drawing.ColorTranslator.FromHtml("#F3D240"), .From = 0, .To = 20, .LegendLabel = "20% Growth" }) + + TreeMap1.LeafColorMapping = rangeBrushColorMapping + End Sub + +End Class + +{% endhighlight %} + +{% endtabs %} + +![Features_images9](Features_images/Features_img9.png) + +Leaf nodes colored by using RangeBrushColorMapping +{:.caption} + +### DesaturationColorMapping + +The leaf nodes of TreeMap can be colored based upon the Color specified using DesaturationColorMapping. The RangeMinimum and RangeMaximum must be specified to determine the opacity for each leaf node. The opacity of leaf nodes are in the range of From and To mentioned in DesaturationColorMapping. + +#### Code Sample: + +{% tabs %} + +{% highlight c# %} + +public partial class Form1 : Form +{ + TreeMap TreeMap1 = new TreeMap(); + DesaturationColorMapping desaturationColorMapping = new DesaturationColorMapping(); + + public Form1() + { + InitializeComponent(); + + PopulationViewModel data = new PopulationViewModel(); + TreeMap1.ItemsSource = data.PopulationDetails; + TreeMap1.WeightValuePath = "Population"; + TreeMap1.ColorValuePath = "Growth"; + + TreeMapFlatLevel treeMapFlatLevel1 = new TreeMapFlatLevel(); + treeMapFlatLevel1.GroupPath = "Continent"; + TreeMap1.Levels.Add(treeMapFlatLevel1); + TreeMap1.LeafItemSettings.LabelPath = "Country"; + this.Controls.Add(TreeMap1); + + desaturationColorMapping.Color = Color.OrangeRed; + desaturationColorMapping.From = 220; + desaturationColorMapping.To = 0; + desaturationColorMapping.RangeMinimum = 0; + desaturationColorMapping.RangeMaximum = 80000; + this.TreeMap1.LeafColorMapping = desaturationColorMapping; + } +} + +{% endhighlight %} + +{% highlight vb %} + +Public Partial Class Form1 + Inherits Form + + Private TreeMap1 As New TreeMap() + Private desaturationColorMapping As New DesaturationColorMapping() + + Public Sub New() + InitializeComponent() + + Dim data As New PopulationViewModel() + TreeMap1.ItemsSource = data.PopulationDetails + TreeMap1.WeightValuePath = "Population" + TreeMap1.ColorValuePath = "Growth" + + Dim treeMapFlatLevel1 As New TreeMapFlatLevel() + treeMapFlatLevel1.GroupPath = "Continent" + TreeMap1.Levels.Add(treeMapFlatLevel1) + TreeMap1.LeafItemSettings.LabelPath = "Country" + Me.Controls.Add(TreeMap1) + + desaturationColorMapping.Color = Color.OrangeRed + desaturationColorMapping.From = 220 + desaturationColorMapping.To = 0 + desaturationColorMapping.RangeMinimum = 0 + desaturationColorMapping.RangeMaximum = 80000 + Me.TreeMap1.LeafColorMapping = desaturationColorMapping + End Sub + +End Class + +{% endhighlight %} + +{% endtabs %} + +![Features_images10](Features_images/Features_img10.png) + +Leaf nodes colored by using DesaturationColorMapping +{:.caption} + +### PaletteColorMapping + +The leaf nodes are colored by using the brushes mentioned in Colors collection of PaletteColorMapping. + +#### Code Sample: + +{% tabs %} + +{% highlight c# %} + +public partial class Form1 : Form +{ + TreeMap TreeMap1 = new TreeMap(); + PaletteColorMapping paletteColorMapping = new PaletteColorMapping(); + + public Form1() + { + InitializeComponent(); + + PopulationViewModel data = new PopulationViewModel(); + TreeMap1.ItemsSource = data.PopulationDetails; + TreeMap1.WeightValuePath = "Population"; + TreeMap1.ColorValuePath = "Growth"; + + TreeMapFlatLevel treeMapFlatLevel1 = new TreeMapFlatLevel(); + treeMapFlatLevel1.GroupPath = "Continent"; + TreeMap1.Levels.Add(treeMapFlatLevel1); + TreeMap1.LeafItemSettings.LabelPath = "Country"; + this.Controls.Add(TreeMap1); + + paletteColorMapping.Colors = new List() + { + new SolidBrush(Color.MediumSeaGreen), + new SolidBrush(Color.PaleVioletRed), + new SolidBrush(Color.MediumSlateBlue), + }; + TreeMap1.LeafColorMapping = paletteColorMapping; + } +} + +{% endhighlight %} + +{% highlight vb %} + +Public Partial Class Form1 + Inherits Form + + Private TreeMap1 As New TreeMap() + Private paletteColorMapping As New PaletteColorMapping() + + Public Sub New() + InitializeComponent() + + Dim data As New PopulationViewModel() + TreeMap1.ItemsSource = data.PopulationDetails + TreeMap1.WeightValuePath = "Population" + TreeMap1.ColorValuePath = "Growth" + + Dim treeMapFlatLevel1 As New TreeMapFlatLevel() + treeMapFlatLevel1.GroupPath = "Continent" + TreeMap1.Levels.Add(treeMapFlatLevel1) + TreeMap1.LeafItemSettings.LabelPath = "Country" + Me.Controls.Add(TreeMap1) + + paletteColorMapping.Colors = New List(Of Brush)() From + { + New SolidBrush(Color.MediumSeaGreen), + New SolidBrush(Color.PaleVioletRed), + New SolidBrush(Color.MediumSlateBlue) + } + TreeMap1.LeafColorMapping = paletteColorMapping + End Sub + +End Class + +{% endhighlight %} + +{% endtabs %} + +![Features_images11](Features_images/Features_img11.png) + +Leaf nodes colored by using PaletteColorMapping +{:.caption} diff --git a/WindowsForms/TreeMap/Features.md b/WindowsForms/TreeMap/Features.md new file mode 100644 index 000000000..b720e05a4 --- /dev/null +++ b/WindowsForms/TreeMap/Features.md @@ -0,0 +1,1582 @@ +--- +layout: post +title: Features in TreeMap control | Syncfusion® +description: Learn here all about features of Syncfusion® Essential Studio® Windows Forms TreeMap control, its elements, and more. +platform: windowsforms +control: TreeMap +documentation: ug +--- + +# Features of Windows Forms TreeMap control + +## WeightValuePath + +The WeightValuePath ofTreeMap is a path to a field on the source object, which serves as the "weight" of the object. + +> Note: The specified field must be available in each and every sub class (object) defined in hierarchical (nested) data collection. + + + +## ColorValuePath + +The ColorValuePath ofTreeMap is a path to a field on the source object, which serves as the "color" of the object. + +## DataBinding + +TreeMap control supports Data Binding and it can be achieved using ItemsSource property. + +The ItemsSource property accepts the collection values as input. For example, you can provide the list of objects as input. The following code illustrates you on how to bind a flat collection as items source for TreeMap. + +{% highlight c# %} + +public partial class Form1 : Form + + { + + TreeMap TreeMap1 = new TreeMap(); + + public Form1() + + { + + InitializeComponent(); + + + + PopulationViewModel data = new PopulationViewModel(); + + TreeMap1.ItemsSource = data.PopulationDetails; + + TreeMap1.ColorValuePath = "Growth"; + + This.Controls.Add(TreeMap1); + + } + + } + +{% endhighlight %} + +> Note: The specified field must be available in each and every sub class (object) defined in hierarchical (nested) data collection. + + + + + +## TreeMap Levels + +The levels of TreeMap can be categorized into two types such as, + +* TreeMapFlatLevel +* TreeMapHierarchicalLevel + +### TreeMapFlatLevel + + +The TreeMapFlatLevel is used to define levels for flat data collection. + +#### ItemsSource: + +The ItemsSource set for TreeMap must be a flat collection of data. The following code shows how to bind a flat collection as ItemsSource to a TreeMap. + +#### Code Sample: + + + + + +{% highlight c# %} + + + +public partial class Form1 : Form + + { + + TreeMap TreeMap1 = new TreeMap(); + + + + public Form1() + + { + + InitializeComponent(); + + + + PopulationViewModel data = new PopulationViewModel(); + + TreeMap1.ItemsSource = data.PopulationDetails; + + TreeMap1.WeightValuePath = "Population"; + + TreeMap1.ColorValuePath = "Growth"; + + this.Controls.Add(TreeMap1); + + + + } + + } + + + + public class PopulationViewModel + + { + + public PopulationViewModel() + + { + + this.PopulationDetails = new + + ObservableCollection(); + +PopulationDetails.Add(new PopulationDetail() { Continent = "Asia", Country = "Indonesia", Growth = 3, Population = 237641326 }); + +PopulationDetails.Add(new PopulationDetail() { Continent = "Asia", Country = "Russia", Growth = 2, Population = 152518015 }); + +PopulationDetails.Add(new PopulationDetail() { Continent = "North America", Country = "United States", Growth = 4, Population = 315645000 }); + +PopulationDetails.Add(new PopulationDetail() { Continent = "North America", Country = "Mexico", Growth = 2, Population = 112336538 }); + + PopulationDetails.Add(new PopulationDetail() { Continent = "Africa", Country = "Nigeria", Growth = 2, Population = 170901000 }); + + PopulationDetails.Add(new PopulationDetail() { Continent = "Africa", Country = "Egypt", Growth = 1, Population = 83661000 }); + + PopulationDetails.Add(new PopulationDetail() { Continent = "Europe", Country = "Germany", Growth = 1, Population = 81993000 }); + + PopulationDetails.Add(new PopulationDetail() { Continent = "Europe", Country = "France", Growth = 1, Population = 65605000 }); + + PopulationDetails.Add(new PopulationDetail() { Continent = "Europe", Country = "UK", Growth = 1, Population = 63181775 }); + + } + + public ObservableCollection PopulationDetails + + { + + get; + + set; + + } + + public class PopulationDetail + + { + + public string Continent { get; set; } + + public string Country { get; set; } + + public double Growth { get; set; } + + public double Population { get; set; } + + } + + } + + + +{% endhighlight %} + + + +### GroupPath: + +You must specify the GroupPath for each and every flat level of TreeMap. It is a path to a field on the source object, which serves as the “Group” for the levels specified. Based upon the GroupPath, the data is grouped in the TreeMap. If GroupPath is not specified, then the items are not grouped, and it is shown in the order, in which they are specified in the ItemsSource. + +### Code Sample: + + + + + +{% highlight c# %} + + + +public partial class Form1 : Form + + { + + TreeMap TreeMap1 = new TreeMap(); + + + + public Form1() + + { + + InitializeComponent(); + + + + PopulationViewModel data = new PopulationViewModel(); + + TreeMap1.ItemsSource = data.PopulationDetails; + + TreeMap1.WeightValuePath = "Population"; + + TreeMap1.ColorValuePath = "Growth"; + + TreeMapFlatLevel treeMapFlatLevel1 = new TreeMapFlatLevel(); + + treeMapFlatLevel1.GroupPath = "Continent"; + + TreeMapFlatLevel treeMapFlatLevel2 = new TreeMapFlatLevel(); + + treeMapFlatLevel2.GroupPath = "Country"; + + this.Controls.Add(TreeMap1); + + + + } + + } + +{% endhighlight %} + + + + + +### GroupGap: + +You can specify GroupGap for separating the items of every flat level and it is used to differentiate the levels mentioned for TreeMap. + +### Code Sample: + + + + + +{% highlight c# %} + + + +public partial class Form1 : Form + + { + + TreeMap TreeMap1 = new TreeMap(); + + + + public Form1() + + { + + InitializeComponent(); + + + + PopulationViewModel data = new PopulationViewModel(); + + TreeMap1.ItemsSource = data.PopulationDetails; + + TreeMap1.WeightValuePath = "Population"; + + TreeMap1.ColorValuePath = "Growth"; + + TreeMapFlatLevel treeMapFlatLevel1 = new TreeMapFlatLevel(); + + treeMapFlatLevel1.GroupPath = "Continent"; + + treeMapFlatLevel1.GroupGap = 10; + + TreeMap1.Levels.Add(treeMapFlatLevel1); + + this.Controls.Add(TreeMap1); + + + + } + + } + +{% endhighlight %} + +### TreeMapHierarchicalLevel: + +TreeMapHierarchicalLevel is used to define levels for hierarchical data collection which contains tree-structured data. + +#### ChildPath: + +You must specify ChildPath for each and every hierarchical level of TreeMap. It is a path to a field on the source object, which serves as the “Child” for the level specified. Based upon the ChildPath, the treemap contains child items. + +#### ChildGap: + +You can specify ChildGap for separating the child items of every level and it is used to differentiate the levels mentioned for TreeMap. + +#### Code Sample: + + + + + +{% highlight c# %} + + + +public partial class Form1 : Form + + { + + TreeMap TreeMap1 = new TreeMap(); + + + + public Form1() + + { + + InitializeComponent(); + + + + CountrySalesCollection data = new CountrySalesCollection (); + + TreeMap1.ItemsSource = data; + + TreeMap1.WeightValuePath = "Sales"; + + TreeMap1.ColorValuePath = "Expense"; + + TreeMapHierarchicalLevel hierarchicalLevel1 = new TreeMapHierarchicalLevel (); + + hierarchicalLevel1.ChildPath = " RegionalSales "; + + hierarchicalLevel1v.ChildGap = 10; + + TreeMap1.Levels.Add(hierarchicalLevel1); + + TreeMapHierarchicalLevel hierarchicalLevel2 = new TreeMapHierarchicalLevel (); + + hierarchicalLevel2.ChildPath = "Name"; + + hierarchicalLevel2.ChildGap = 5; + + TreeMap1.Levels.Add(hierarchicalLevel2); + + this.Controls.Add(TreeMap1); + + + + } + + } + +{% endhighlight %} + + + +{% highlight c# %} + + + + public class CountrySalesCollection : ObservableCollection + + { + + public CountrySalesCollection() + + { + + this.Add(new CountrySale() { Name = "United States", Sales = 98456, Expense = 87000 }); + + this.Add(new CountrySale() { Name = "Canada", Sales = 43523, Expense = 40000 }); + + this.Add(new CountrySale() { Name = "Mexico", Sales = 45634, Expense = 46000 }); + + this[0].RegionalSalesCollection.Add(new RegionSale() { Country = "United States", Name = "New York", Sales = 2353, Expense = 2000 }); + + this[0].RegionalSalesCollection.Add(new RegionSale() { Country = "United States", Name = "Los Angeles", Sales = 3453, Expense = 3000 }); + + this[0].RegionalSalesCollection.Add(new RegionSale() { Country = "United States", Name = "San Francisco", Sales = 8456, Expense = 8000 }); + + this[0].RegionalSalesCollection.Add(new RegionSale() { Country = "United States", Name = "Chicago", Sales = 6785, Expense = 7000 }); + + this[0].RegionalSalesCollection.Add(new RegionSale() { Country = "United States", Name = "Miami", Sales = 7045, Expense = 6000 }); + + this[1].RegionalSalesCollection.Add(new RegionSale() { Country = "Canada", Name = "Toronto", Sales = 7045, Expense = 7000 }); + + this[1].RegionalSalesCollection.Add(new RegionSale() { Country = "Canada", Name = "Vancouver", Sales = 4352, Expense = 4000 }); + + this[1].RegionalSalesCollection.Add(new RegionSale() { Country = "Canada", Name = "Winnipeg", Sales = 7843, Expense = 7500 }); + + + + this[2].RegionalSalesCollection.Add(new RegionSale() { Country = "Mexico", Name = "Mexico City", Sales = 7843, Expense = 6500 }); + + this[2].RegionalSalesCollection.Add(new RegionSale() { Country = "Mexico", Name = "Cancun", Sales = 6683, Expense = 6000 }); } + + } + + + + public class CountrySale : INotifyPropertyChanged + + { + + public string Name { get; set; } + + private double _sales = 0; + + public double Sales + + { + + get { return _sales; } + + set + + { + + if (_sales != value) + + { + + _sales = value; + + this.OnPropertyChanged(new + + PropertyChangedEventArgs("Sales")); + + } + + } + + } + + private double _expense = 0; + + public double Expense + + { + + get { return _expense; } + + set + + { + + if (_expense != value) + + { + + _expense = value; + + this.OnPropertyChanged(new + + PropertyChangedEventArgs("Expense")); + + } + + } + + } + + public ObservableCollection RegionalSalesCollection + + { get; set; } + + public CountrySale() + + { + + this.RegionalSalesCollection = new ObservableCollection(); + + } + + #region INotifyPropertyChanged Members + + public event PropertyChangedEventHandler PropertyChanged; + + protected void OnPropertyChanged(PropertyChangedEventArgs e) + + { + + if (this.PropertyChanged != null) + + this.PropertyChanged.Invoke(this, e); + + } + + #endregion + + } + + + + public class RegionSale : INotifyPropertyChanged + + { + + public string Name { get; set; } + + public string Country { get; set; } + + private double _sales = 0; + + public double Sales + + { + + get { return _sales; } + + set + + { + + if (_sales != value) + + { + + _sales = value; + + this.OnPropertyChanged(new + + PropertyChangedEventArgs("Sales")); + + } + + } + + } + + private double _expense = 0; + + public double Expense + + { + + get { return _expense; } + + set + + { + + if (_expense != value) + + { + + _expense = value; + + this.OnPropertyChanged(new + + PropertyChangedEventArgs("Expense")); + + } + + } + + } + + + + #region INotifyPropertyChanged Members + + + + public event PropertyChangedEventHandler PropertyChanged; + + protected void OnPropertyChanged(PropertyChangedEventArgs e) + + { + + if (this.PropertyChanged != null) + + this.PropertyChanged.Invoke(this, e); + + } + + + + #endregion + + } + +{% endhighlight %} + +> Note: The specified field must be a collection of sub class (object) specified in the nested data collection. + + + +## TreeMap Layout + +The ItemsLayoutMode for TreeMap specifies the layout mode of the tree map items. This layout is applied for all the tree map levels. There are four different TreeMap layouts such as, + +### Squarified Layout + +In this layout the data is visualized in the form of square-like rectangles with best aspect ratio. + +The following code illustrates how to set a squarified layout in Treemap. + +#### Code Sample: + + + + + +{% highlight c# %} + + + +public partial class Form1 : Form + + { + + TreeMap TreeMap1 = new TreeMap(); + + + + public Form1() + + { + + InitializeComponent(); + + + + PopulationViewModel data = new PopulationViewModel(); + + TreeMap1.ItemsSource = data.PopulationDetails; + + TreeMap1.WeightValuePath = "Population"; + + TreeMap1.ColorValuePath = "Growth"; + + TreeMap1.ItemsLayoutMode = Syncfusion.Windows.Forms.TreeMap.ItemsLayoutModes. Squarified; + + + + TreeMapFlatLevel treeMapFlatLevel1 = new TreeMapFlatLevel(); + + treeMapFlatLevel1.GroupPath = "Continent"; + + TreeMap1.Levels.Add(treeMapFlatLevel1); + + TreeMap1.LeafItemSettings.LabelPath ="Country"; + + this.Controls.Add(TreeMap1); + + } + + + + } + +{% endhighlight %} + +The following screen shot illustrates a squarified layout. + + + +![Features_images4](Features_images/Features_img4.png) + + + + + +_Figure_ _1_: _Squarified layout_ + + + +### SliceAndDiceAuto Layout: + +In this layout the data is visualized in the form of long-thin rectangles with high aspect ratio, which can be displayed either vertically or horizontally. + +The following code illustrates how to set a slice and dice layout in Treemap. + +### Code Sample: + + + + + +{% highlight c# %} + + + +public partial class Form1 : Form + + { + + TreeMap TreeMap1 = new TreeMap(); + + + + public Form1() + + { + + InitializeComponent(); + + // ...          + + TreeMap1.ItemsLayoutMode = Syncfusion.Windows.Forms.TreeMap.ItemsLayoutModes. SliceAndDiceAuto; + + // ...          + + } + + + + } + +{% endhighlight %} + +The following screen shot illustrates a slice-and-dice layout. + + + + + + + +![Features_images5](Features_images/Features_img5.png) + + + +_Figure_ _2_: _Slice-and-dice layout_ + + + +### SliceAndDiceHorizontal Layout: + +The following code illustrates how to set a slice and dice layout horizontally in Treemap. + +#### Code Sample: + + + +{% highlight c# %} + + + +public partial class Form1 : Form + + { + + TreeMap TreeMap1 = new TreeMap(); + + + + public Form1() + + { + + InitializeComponent(); + + // ...          + + + + TreeMap1.ItemsLayoutMode = Syncfusion.Windows.Forms.TreeMap.ItemsLayoutModes. SliceAndDiceHorizontal; + + // ...          + + + + } + + + + } + +{% endhighlight %} + +The following screen shot shows a Slice-and-dice treemap in horizontal layout. + + + + + + + + +
+{{ ' ![Features_images6](Features_images/Features_img6.png)' | markdownify }} + +{{ '_Figure_' | markdownify }}{{ '_3_' | markdownify }}{{ '_: Slice-and-dice treemap in horizontal layout_' | markdownify }}
+
+ +### SliceAndDiceVertical Layout: + +The following code illustrates how to set a slice and dice layout vertically in Treemap. + +#### Code Sample: + + + + + +{% highlight c# %} + + + +public partial class Form1 : Form + + { + + TreeMap TreeMap1 = new TreeMap(); + + + + public Form1() + + { + + InitializeComponent(); + + + + // ...          + + + + + + TreeMap1.ItemsLayoutMode = Syncfusion.Windows.Forms.TreeMap.ItemsLayoutModes. SliceAndDiceVertical; + + // ...          + + + +} + + + + } + +{% endhighlight %} + +The following screen shot shows a Slice-and-dice treemap in vertical layout. + + + +![Features_images7](Features_images/Features_img7.png) + + + + + + + +_Figure_ _4_: _Slice-and-dice treemap in vertical layout_ + + + +## ColorMapping + +The ColorMapping is categorized into four different types such as, + +* UniColorMapping +* RangeBrushColorMapping +* DesaturationColorMapping +* PaletteColorMapping + +The various colorMappings can be set in LeafColorMapping property of TreeMap. + +#### UniColorMapping + +TreeMap leaf nodes can be provided with unique colors with the help of the Color property specified using UniColorMapping. + +#### Code Sample: + + + +{% highlight c# %} + + + +public partial class Form1 :Form + + { + + TreeMap TreeMap1 = new TreeMap(); + + UniColorMapping uniColorMapping = new UniColorMapping(); + + + + public Form1() + + { + + InitializeComponent(); + + this.BackColor = Color.White; + + + + PopulationViewModel data = new PopulationViewModel(); + + TreeMap1.ItemsSource = data.PopulationDetails; + + TreeMap1.WeightValuePath = "Population"; + + TreeMap1.ColorValuePath = "Growth"; + + + + TreeMapFlatLevel treeMapFlatLevel1 = new TreeMapFlatLevel(); + + treeMapFlatLevel1.GroupPath = "Continent"; + + TreeMap1.Levels.Add(treeMapFlatLevel1); + + TreeMap1.LeafItemSettings.LabelPath ="Country"; + + this.Controls.Add(TreeMap1); + + + + + +uniColorMapping.Color = Color.MediumSlateBlue; + + TreeMap1.LeafColorMapping = uniColorMapping; + + } + + + + } + + + +{% endhighlight %} + + + + + +![Features_images8](Features_images/Features_img8.png) + + + +_Figure_ _5_: _Leaf Nodes colored by using UniColorMapping_ + + + + + +#### RangeBrushColorMapping + +The leaf nodes of TreeMap can be colored based upon the range (i.e., From and To) and Brush specified using RangeBrush collection of RangeBrushColorMapping. + +#### Code Sample: + + + + + +{% highlight c# %} + + + +public partial class Form1 : Form + + { + + TreeMap TreeMap1 = new TreeMap(); + +RangeBrushColorMapping rangeBrushColorMapping = new RangeBrushColorMapping(); + + public Form1() + + { + + InitializeComponent(); + + this.BackColor = Color.White; + + + + PopulationViewModel data = new PopulationViewModel(); + + TreeMap1.ItemsSource = data.PopulationDetails; + + TreeMap1.WeightValuePath = "Population"; + + TreeMap1.ColorValuePath = "Growth"; + + + + TreeMapFlatLevel treeMapFlatLevel1 = new TreeMapFlatLevel(); + + treeMapFlatLevel1.GroupPath = "Continent"; + + TreeMap1.Levels.Add(treeMapFlatLevel1); + + TreeMap1.LeafItemSettings.LabelPath ="Country"; + + this.Controls.Add(TreeMap1); + + + + + + + +rangeBrushColorMapping.Brushes.Add(new RangeBrush() { Color = System.Drawing.ColorTranslator.FromHtml("#77D8D8"), From = 0, To = 1, LegendLabel = "1% Growth" }); + + rangeBrushColorMapping.Brushes.Add(new RangeBrush() { Color = System.Drawing.ColorTranslator.FromHtml("#AED960"), From = 0, To = 2, LegendLabel = "2% Growth" }); + + rangeBrushColorMapping.Brushes.Add(new RangeBrush() { Color = System.Drawing.ColorTranslator.FromHtml("#FFAF51"), From = 0, To = 3, LegendLabel = "3% Growth" }); + + rangeBrushColorMapping.Brushes.Add(new RangeBrush() { Color = System.Drawing.ColorTranslator.FromHtml("#F3D240"), From = 0, To = 20, LegendLabel = "20% Growth" }); + + + + TreeMap1.LeafColorMapping = rangeBrushColorMapping; + + + + } + + + + } + + +{% endhighlight %} + + + + +![Features_images9](Features_images/Features_img9.png) + + + +_Figure_ _6_: _Leaf nodes colored by using RangeBrushColorMapping_ + + + +### DesaturationColorMapping + +The leaf nodes of TreeMap can be colored based upon the Color specified using DesaturationColorMapping. The RangeMinimum and RangeMaximum must be specified to determine the opacity for each leaf node. The opacity of leaf nodes are in the range of From and To mentioned in DesaturationColorMapping. + +#### Code Sample: + + + + + +{% highlight c# %} + + + +public partial class Form1 : Form + + { + + TreeMap TreeMap1 = new TreeMap(); + + DesaturationColorMapping desaturationColorMapping = new DesaturationColorMapping(); + + + + public Form1() + + { + + InitializeComponent(); + + + + PopulationViewModel data = new PopulationViewModel(); + + TreeMap1.ItemsSource = data.PopulationDetails; + + TreeMap1.WeightValuePath = "Population"; + + TreeMap1.ColorValuePath = "Growth"; + + + + TreeMapFlatLevel treeMapFlatLevel1 = new TreeMapFlatLevel(); + + treeMapFlatLevel1.GroupPath = "Continent"; + + TreeMap1.Levels.Add(treeMapFlatLevel1); + + TreeMap1.LeafItemSettings.LabelPath ="Country"; + + this.Controls.Add(TreeMap1); + + + + + + + + desaturationColorMapping.Color = Color.OrangeRed; + + desaturationColorMapping.From = 220; + + desaturationColorMapping.To = 0; + + desaturationColorMapping.RangeMinimum = 0; + + desaturationColorMapping.RangeMaximum = 80000; + + this.TreeMap1.LeafColorMapping = desaturationColorMapping; + + } + + + + + + } + + +{% endhighlight %} + + + + +![Features_images10](Features_images/Features_img10.png) + + + +_Figure_ _7_: _Leaf nodes colored by using DesaturationColorMapping_ + + + +### PaletteColorMapping + +The leaf nodes are colored by using the brushes mentioned in Colors collection of PaletteColorMapping. + +#### Code Sample: + + + + + +{% highlight c# %} + + + +public partial class Form1 : Form + + { + + TreeMap TreeMap1 = new TreeMap(); + + PaletteColorMapping paletteColorMapping = new PaletteColorMapping(); + + + + public Form1() + + { + + InitializeComponent(); + + + + PopulationViewModel data = new PopulationViewModel(); + + TreeMap1.ItemsSource = data.PopulationDetails; + + TreeMap1.WeightValuePath = "Population"; + + TreeMap1.ColorValuePath = "Growth"; + + + + TreeMapFlatLevel treeMapFlatLevel1 = new TreeMapFlatLevel(); + + treeMapFlatLevel1.GroupPath = "Continent"; + + TreeMap1.Levels.Add(treeMapFlatLevel1); + + TreeMap1.LeafItemSettings.LabelPath ="Country"; + + this.Controls.Add(TreeMap1); + + + + paletteColorMapping.Colors = new List() + + { + + new SolidBrush(Color.MediumSeaGreen), + + new SolidBrush(Color.PaleVioletRed), + + new SolidBrush(Color.MediumSlateBlue), + + }; + + TreeMap1.LeafColorMapping = paletteColorMapping; + + } + +} + + + + + +{% endhighlight %} + + + +![Features_images11](Features_images/Features_img11.png) + + + +_Figure_ _8_: _Leaf nodes colored by using PaletteColorMapping_ + + + +## TreeMap Legend + +TreeMap legend is used to easily demonstrate about the color value of leaf nodes. But this legend could be appropriate only for the treemap having leaf nodes colored by using RangeBrushColorMapping. The labels of the legend item can be customized by specifying LegendLabel of RangeBrush mentioned in the Brushes of RangeBrushColorMapping. + +The icon of legend item can be set by LegendIconStyle of TreeMapLegend. Custom legend icon can be set by assigning DataTemplate to LegendIconTemplate with LegendIconStyle as “Custom”. The width and height of the legend icon can be modified by setting LegendIconWidth and LegendIconHeight of TreeMapLegend. + + + +The legend can be positioned to Left, Right, Top or Bottom of TreeMap with the help of LegendPosition property. + + + +#### Code Sample: + + + + + +{% highlight c# %} + + + +public partial class Form1 : Form + + { + + TreeMap TreeMap1 = new TreeMap(); + + + + public Form1() + + { + + InitializeComponent(); + + + + PopulationViewModel data = new PopulationViewModel(); + + TreeMap1.ItemsSource = data.PopulationDetails; + + TreeMap1.WeightValuePath = "Population"; + + TreeMap1.ColorValuePath = "Growth"; + + TreeMap1.LegendType = LegendTypes.Ellipse; + + TreeMap1.LegendGap = 150; + + TreeMap1.LegendPosition = LegendPositions.Top; + + TreeMap1.Dock = DockStyle.Fill; + + + + TreeMapFlatLevel treeMapFlatLevel1 = new TreeMapFlatLevel(); + + treeMapFlatLevel1.GroupPath = "Continent"; + + TreeMap1.Levels.Add(treeMapFlatLevel1); + + TreeMap1.LeafItemSettings.LabelPath ="Country"; + +RangeBrushColorMapping rangeBrushColorMapping = new RangeBrushColorMapping(); + + rangeBrushColorMapping.Brushes.Add(new RangeBrush() { Color = System.Drawing.ColorTranslator.FromHtml("#77D8D8"), From = 0, To = 1, LegendLabel = "1% Growth" }); + + rangeBrushColorMapping.Brushes.Add(new RangeBrush() { Color = System.Drawing.ColorTranslator.FromHtml("#AED960"), From = 0, To = 2, LegendLabel = "2% Growth" }); + + rangeBrushColorMapping.Brushes.Add(new RangeBrush() { Color = System.Drawing.ColorTranslator.FromHtml("#FFAF51"), From = 0, To = 3, LegendLabel = "3% Growth" }); + + rangeBrushColorMapping.Brushes.Add(new RangeBrush() { Color = System.Drawing.ColorTranslator.FromHtml("#F3D240"), From = 0, To = 20, LegendLabel = "20% Growth" }); + + TreeMap1.LeafColorMapping = rangeBrushColorMapping; + + this.Controls.Add(TreeMap1); + + + + } + +} + +{% endhighlight %} + +![Features_images12](Features_images/Features_img12.png) + + + +_Figure_ _9_: _TreeMap with Legend_ + + + +## Headers and Labels + +### Headers + +To show headers in TreeMap, you can set the HeaderHeight property of TreeMapLevel. + +#### Code Sample: + + + + + +{% highlight c# %} + + + +public partial class Form1 : Form + + { + + TreeMap TreeMap1 = new TreeMap(); + + + + public Form1() + + { + + InitializeComponent(); + + + + PopulationViewModel data = new PopulationViewModel(); + + TreeMap1.ItemsSource = data.PopulationDetails; + + TreeMap1.WeightValuePath = "Population"; + + TreeMap1.ColorValuePath = "Growth"; + + TreeMap1.HeaderBrush = new SolidBrush(Color.Red); + + TreeMap1.HeaderBorderThickness = 5; + + + + TreeMapFlatLevel treeMapFlatLevel1 = new TreeMapFlatLevel(); + + treeMapFlatLevel1.GroupPath = "Continent"; + + TreeMap1.Levels.Add(treeMapFlatLevel1); + + TreeMap1.LeafItemSettings.LabelPath ="Country"; + + this.Controls.Add(TreeMap1); + + } + +} + +{% endhighlight %} + + + +![Features_images13](Features_images/Features_img13.png) + + + +_Figure_ _10_: _TreeMap with Headers_ + + + +### Labels + +To show labels in TreeMap, ShowLabels of TreeMapLevel should be enabled to True. + +#### Code Sample: + + + +{% highlight c# %} + + + +public partial class Form1 : Form + + { + + TreeMap TreeMap1 = new TreeMap(); + + + + public Form1() + + { + + InitializeComponent(); + + + + PopulationViewModel data = new PopulationViewModel(); + + TreeMap1.ItemsSource = data.PopulationDetails; + + TreeMap1.WeightValuePath = "Population"; + + TreeMap1.ColorValuePath = "Growth"; + + + + TreeMapFlatLevel treeMapFlatLevel1 = new TreeMapFlatLevel(); + + treeMapFlatLevel1.GroupPath = "Continent"; + + treeMapFlatLevel1.ShowLabels = true; + + TreeMap1.Levels.Add(treeMapFlatLevel1); + + TreeMap1.LeafItemSettings.LabelPath ="Country"; + + this.Controls.Add(TreeMap1); + + + + + + } + +} + + +{% endhighlight %} + + +![Features_images14](Features_images/Features_img14.png) + + + +_Figure_ _11_: _TreeMap with Labels_ + + + +## Leaf Item Setting + +You can customize the Leaf level TreeMap items using LeafItemSettings. Label values take the property of bound object that is referred in the labelPath when defined. + + + +## ToolTip Support + +You can enable ToolTip for TreeMap by setting ShowToolTip to “True”. + +#### Code Sample: + + + + + +{% highlight c# %} + + + +public partial class Form1 : Form + + { + + TreeMap TreeMap1 = new TreeMap(); + + + + public Form1() + + { + + InitializeComponent(); + + + + PopulationViewModel data = new PopulationViewModel(); + + TreeMap1.ItemsSource = data.PopulationDetails; + + TreeMap1.WeightValuePath = "Population"; + + TreeMap1.ColorValuePath = "Growth"; + + ToolTipInfo itemInfoHead = new ToolTipInfo(); + + itemInfoHead.ToolTipHeaderPattern = "{Label}"; + + itemInfoHead.ToolTipContentPattern = "Growth \t : {Growth} % "; + + TreeMap1.HeaderToolTipInfo = itemInfoHead; + + ToolTipInfo itemInfo = new ToolTipInfo(); + + itemInfo.ToolTipHeaderPattern = "{Country}"; + + itemInfo.ToolTipContentPattern = "Growth \t : {Growth} % \nPopulation : {StrPopulation} "; + + TreeMap1.ItemToolTipInfo = itemInfo; + + + + + + RangeBrushColorMapping rangeBrushColorMapping = new RangeBrushColorMapping(); + + rangeBrushColorMapping.Brushes.Add(new RangeBrush() { Color = System.Drawing.ColorTranslator.FromHtml("#77D8D8"), From = 0, To = 1, LegendLabel = "1% Growth" }); + + rangeBrushColorMapping.Brushes.Add(new RangeBrush() { Color = System.Drawing.ColorTranslator.FromHtml("#AED960"), From = 0, To = 2, LegendLabel = "2% Growth" }); + + rangeBrushColorMapping.Brushes.Add(new RangeBrush() { Color = System.Drawing.ColorTranslator.FromHtml("#FFAF51"), From = 0, To = 3, LegendLabel = "3% Growth" }); + + rangeBrushColorMapping.Brushes.Add(new RangeBrush() { Color = System.Drawing.ColorTranslator.FromHtml("#F3D240"), From = 0, To = 20, LegendLabel = "20% Growth" }); + + TreeMap1.LeafColorMapping = rangeBrushColorMapping; + + + + TreeMapFlatLevel treeMapFlatLevel1 = new TreeMapFlatLevel(); + + treeMapFlatLevel1.GroupPath = "Continent"; + + TreeMap1.Levels.Add(treeMapFlatLevel1); + + TreeMap1.LeafItemSettings.LabelPath ="Country"; + + this.Controls.Add(TreeMap1); + + } + + } + +{% endhighlight %} + +The following screen shot shows a tree map with a tool tip. + + + +![Features_images15](Features_images/Features_img15.png) + + + +_Figure_ _12_: _ToolTip on TreeMap_ \ No newline at end of file diff --git a/WindowsForms/TreeMap/Installation-and-Deployment.md b/WindowsForms/TreeMap/Installation-and-Deployment.md new file mode 100644 index 000000000..fd1bc45f6 --- /dev/null +++ b/WindowsForms/TreeMap/Installation-and-Deployment.md @@ -0,0 +1,96 @@ +--- +layout: post +title: Installation-and-Deployment | Windows Forms | Syncfusion® +description: Installation and deployment of Syncfusion® Essential Studio® WindowsForms TreeMap control, its elements, and more. +platform: windowsforms +control: TreeMap +documentation: ug +--- + +# Installation and Deployment + +This section covers information on the install location, samples, licensing, patches update and updation of the recent version of Essential Studio®. It comprises the following sub-sections: + + + +## Installation + +For step-by-step installation procedure for the installation of Essential Studio®, refer to the Installation topic under Installation and Deployment in the Common UG. + + + +See Also + +For licensing, patches and information on adding or removing selective components refer the following topics in Common UG under Installation and Deployment. + + + +* Licensing +* Patches +* Add / Remove Components + + + +## Sample and Location + +Use the following steps to view the samples: + + + +1. Click Start > All Programs > Syncfusion® > Essential Studio® >Dashboard + + The Essential Studio® Enterprise Edition window will be displayed. + + ![Installation-and-Deployment_images1](Installation-and-Deployment_images/Installation-and-Deployment_img1.png) + + Syncfusion® Essential Studio® Dashboard + {:.caption} + +2. In the Dashboard window, click Run Samples for Windows Forms under UI Edition. The UI Windows Forms Sample Browser window will be displayed. + + + > Note: You can view the samples in any of the following three ways: + > * Run Samples - Click to view the locally installed samples. + > * Online Samples - Click to view online samples. + > * Explore Samples - Explore the UI for Windows Forms on disk._ + + The User Interface Edition panel is displayed by default. + + + + ![Installation-and-Deployment_images2](Installation-and-Deployment_images/Installation-and-Deployment_img2.png) + + UI Windows Forms Sample Browser + {:.caption} + +3. Click the TreeMap under Data Visualization. The TreeMap samples will be displayed. + + ![Installation-and-Deployment_images3](Installation-and-Deployment_images/Installation-and-Deployment_img3.png) + + Essential® TreeMap WF Samples + {:.caption} + + +4. Select any sample and browse through the features.  + + + + + +## Deployment Requirements + + + +### Toolbox Entries + + + +* TreeMap + +#### Assembly List + +While deploying an application that references SyncfusionEssentialTreeMap assembly, the following dependencies must be included in the distribution. + +* Syncfusion.TreeMap.Windows +* Syncfusion.Shared.Base +* Syncfusion.Core \ No newline at end of file diff --git a/WindowsForms/TreeMap/TreeMap-Legend.md b/WindowsForms/TreeMap/TreeMap-Legend.md new file mode 100644 index 000000000..9292032e3 --- /dev/null +++ b/WindowsForms/TreeMap/TreeMap-Legend.md @@ -0,0 +1,100 @@ +--- +layout: post +title: ToolTip Support in Windows Forms TreeMap control | Syncfusion® +description: Learn about the Legend feature in Syncfusion® Windows Forms TreeMap control, including legend items, customization options, and usage details. +platform: windowsforms +control: TreeMap +documentation: ug +--- + +# TreeMap Legend in Windows Forms TreeMap control + +TreeMap legend is used to easily demonstrate about the color value of leaf nodes. But this legend could be appropriate only for the treemap having leaf nodes colored by using RangeBrushColorMapping. The labels of the legend item can be customized by specifying LegendLabel of RangeBrush mentioned in the Brushes of RangeBrushColorMapping. + +The icon of legend item can be set by LegendIconStyle of TreeMapLegend. Custom legend icon can be set by assigning DataTemplate to LegendIconTemplate with LegendIconStyle as “Custom”. The width and height of the legend icon can be modified by setting LegendIconWidth and LegendIconHeight of TreeMapLegend. + +The legend can be positioned to Left, Right, Top or Bottom of TreeMap with the help of LegendPosition property. + +#### Code Sample: + +{% tabs %} + +{% highlight c# %} + +public partial class Form1 : Form +{ + TreeMap TreeMap1 = new TreeMap(); + + public Form1() + { + InitializeComponent(); + + PopulationViewModel data = new PopulationViewModel(); + TreeMap1.ItemsSource = data.PopulationDetails; + TreeMap1.WeightValuePath = "Population"; + TreeMap1.ColorValuePath = "Growth"; + TreeMap1.LegendType = LegendTypes.Ellipse; + TreeMap1.LegendGap = 150; + TreeMap1.LegendPosition = LegendPositions.Top; + TreeMap1.Dock = DockStyle.Fill; + + TreeMapFlatLevel treeMapFlatLevel1 = new TreeMapFlatLevel(); + treeMapFlatLevel1.GroupPath = "Continent"; + TreeMap1.Levels.Add(treeMapFlatLevel1); + TreeMap1.LeafItemSettings.LabelPath = "Country"; + + RangeBrushColorMapping rangeBrushColorMapping = new RangeBrushColorMapping(); + rangeBrushColorMapping.Brushes.Add(new RangeBrush() { Color = System.Drawing.ColorTranslator.FromHtml("#77D8D8"), From = 0, To = 1, LegendLabel = "1% Growth" }); + rangeBrushColorMapping.Brushes.Add(new RangeBrush() { Color = System.Drawing.ColorTranslator.FromHtml("#AED960"), From = 0, To = 2, LegendLabel = "2% Growth" }); + rangeBrushColorMapping.Brushes.Add(new RangeBrush() { Color = System.Drawing.ColorTranslator.FromHtml("#FFAF51"), From = 0, To = 3, LegendLabel = "3% Growth" }); + rangeBrushColorMapping.Brushes.Add(new RangeBrush() { Color = System.Drawing.ColorTranslator.FromHtml("#F3D240"), From = 0, To = 20, LegendLabel = "20% Growth" }); + TreeMap1.LeafColorMapping = rangeBrushColorMapping; + this.Controls.Add(TreeMap1); + } +} + +{% endhighlight %} + +{% highlight vb %} + +Public Partial Class Form1 + Inherits Form + + Private TreeMap1 As New TreeMap() + + Public Sub New() + InitializeComponent() + + Dim data As New PopulationViewModel() + TreeMap1.ItemsSource = data.PopulationDetails + TreeMap1.WeightValuePath = "Population" + TreeMap1.ColorValuePath = "Growth" + TreeMap1.LegendType = LegendTypes.Ellipse + TreeMap1.LegendGap = 150 + TreeMap1.LegendPosition = LegendPositions.Top + TreeMap1.Dock = DockStyle.Fill + + Dim treeMapFlatLevel1 As New TreeMapFlatLevel() + treeMapFlatLevel1.GroupPath = "Continent" + TreeMap1.Levels.Add(treeMapFlatLevel1) + TreeMap1.LeafItemSettings.LabelPath = "Country" + + Dim rangeBrushColorMapping As New RangeBrushColorMapping() + rangeBrushColorMapping.Brushes.Add(New RangeBrush() With { .Color = System.Drawing.ColorTranslator.FromHtml("#77D8D8"), .From = 0, .To = 1, .LegendLabel = "1% Growth" }) + rangeBrushColorMapping.Brushes.Add(New RangeBrush() With { .Color = System.Drawing.ColorTranslator.FromHtml("#AED960"), .From = 0, .To = 2, .LegendLabel = "2% Growth" }) + rangeBrushColorMapping.Brushes.Add(New RangeBrush() With { .Color = System.Drawing.ColorTranslator.FromHtml("#FFAF51"), .From = 0, .To = 3, .LegendLabel = "3% Growth" }) + rangeBrushColorMapping.Brushes.Add(New RangeBrush() With { .Color = System.Drawing.ColorTranslator.FromHtml("#F3D240"), .From = 0, .To = 20, .LegendLabel = "20% Growth" }) + TreeMap1.LeafColorMapping = rangeBrushColorMapping + Me.Controls.Add(TreeMap1) + End Sub + +End Class + +{% endhighlight %} + +{% endtabs %} + +![Features_images12](Features_images/Features_img12.png) + +TreeMap with Legend +{:.caption} diff --git a/WindowsForms/TreeMap/TreeMap-Levels.md b/WindowsForms/TreeMap/TreeMap-Levels.md new file mode 100644 index 000000000..b6302f916 --- /dev/null +++ b/WindowsForms/TreeMap/TreeMap-Levels.md @@ -0,0 +1,553 @@ +--- +layout: post +title: Features of TreeMap control in Windows Forms | Syncfusion® +description: Learn about Treemap levels in Syncfusion® Windows Forms TreeMap control, its elements and more details. +platform: windowsforms +control: TreeMap +documentation: ug +--- + +# TreeMap Levels in Windows Forms + +The levels of TreeMap can be categorized into two types such as, + +* TreeMapFlatLevel +* TreeMapHierarchicalLevel + +### TreeMapFlatLevel + + +The TreeMapFlatLevel is used to define levels for flat data collection. + +#### ItemsSource: + +The ItemsSource set for TreeMap must be a flat collection of data. The following code shows how to bind a flat collection as ItemsSource to a TreeMap. + +#### Code Sample: + + + + + +{% highlight c# %} + + + +public partial class Form1 : Form + + { + + TreeMap TreeMap1 = new TreeMap(); + + + + public Form1() + + { + + InitializeComponent(); + + + + PopulationViewModel data = new PopulationViewModel(); + + TreeMap1.ItemsSource = data.PopulationDetails; + + TreeMap1.WeightValuePath = "Population"; + + TreeMap1.ColorValuePath = "Growth"; + + this.Controls.Add(TreeMap1); + + + + } + + } + + + + public class PopulationViewModel + + { + + public PopulationViewModel() + + { + + this.PopulationDetails = new + + ObservableCollection(); + +PopulationDetails.Add(new PopulationDetail() { Continent = "Asia", Country = "Indonesia", Growth = 3, Population = 237641326 }); + +PopulationDetails.Add(new PopulationDetail() { Continent = "Asia", Country = "Russia", Growth = 2, Population = 152518015 }); + +PopulationDetails.Add(new PopulationDetail() { Continent = "North America", Country = "United States", Growth = 4, Population = 315645000 }); + +PopulationDetails.Add(new PopulationDetail() { Continent = "North America", Country = "Mexico", Growth = 2, Population = 112336538 }); + + PopulationDetails.Add(new PopulationDetail() { Continent = "Africa", Country = "Nigeria", Growth = 2, Population = 170901000 }); + + PopulationDetails.Add(new PopulationDetail() { Continent = "Africa", Country = "Egypt", Growth = 1, Population = 83661000 }); + + PopulationDetails.Add(new PopulationDetail() { Continent = "Europe", Country = "Germany", Growth = 1, Population = 81993000 }); + + PopulationDetails.Add(new PopulationDetail() { Continent = "Europe", Country = "France", Growth = 1, Population = 65605000 }); + + PopulationDetails.Add(new PopulationDetail() { Continent = "Europe", Country = "UK", Growth = 1, Population = 63181775 }); + + } + + public ObservableCollection PopulationDetails + + { + + get; + + set; + + } + + public class PopulationDetail + + { + + public string Continent { get; set; } + + public string Country { get; set; } + + public double Growth { get; set; } + + public double Population { get; set; } + + } + + } + + + +{% endhighlight %} + + + +### GroupPath: + +You must specify the GroupPath for each and every flat level of TreeMap. It is a path to a field on the source object, which serves as the “Group” for the levels specified. Based upon the GroupPath, the data is grouped in the TreeMap. If GroupPath is not specified, then the items are not grouped, and it is shown in the order, in which they are specified in the ItemsSource. + +### Code Sample: + + + + + +{% highlight c# %} + + + +public partial class Form1 : Form + + { + + TreeMap TreeMap1 = new TreeMap(); + + + + public Form1() + + { + + InitializeComponent(); + + + + PopulationViewModel data = new PopulationViewModel(); + + TreeMap1.ItemsSource = data.PopulationDetails; + + TreeMap1.WeightValuePath = "Population"; + + TreeMap1.ColorValuePath = "Growth"; + + TreeMapFlatLevel treeMapFlatLevel1 = new TreeMapFlatLevel(); + + treeMapFlatLevel1.GroupPath = "Continent"; + + TreeMapFlatLevel treeMapFlatLevel2 = new TreeMapFlatLevel(); + + treeMapFlatLevel2.GroupPath = "Country"; + + this.Controls.Add(TreeMap1); + + + + } + + } + +{% endhighlight %} + + + + + +### GroupGap: + +You can specify GroupGap for separating the items of every flat level and it is used to differentiate the levels mentioned for TreeMap. + +### Code Sample: + + + + + +{% highlight c# %} + + + +public partial class Form1 : Form + + { + + TreeMap TreeMap1 = new TreeMap(); + + + + public Form1() + + { + + InitializeComponent(); + + + + PopulationViewModel data = new PopulationViewModel(); + + TreeMap1.ItemsSource = data.PopulationDetails; + + TreeMap1.WeightValuePath = "Population"; + + TreeMap1.ColorValuePath = "Growth"; + + TreeMapFlatLevel treeMapFlatLevel1 = new TreeMapFlatLevel(); + + treeMapFlatLevel1.GroupPath = "Continent"; + + treeMapFlatLevel1.GroupGap = 10; + + TreeMap1.Levels.Add(treeMapFlatLevel1); + + this.Controls.Add(TreeMap1); + + + + } + + } + +{% endhighlight %} + +### TreeMapHierarchicalLevel: + +TreeMapHierarchicalLevel is used to define levels for hierarchical data collection which contains tree-structured data. + +#### ChildPath: + +You must specify ChildPath for each and every hierarchical level of TreeMap. It is a path to a field on the source object, which serves as the “Child” for the level specified. Based upon the ChildPath, the treemap contains child items. + +#### ChildGap: + +You can specify ChildGap for separating the child items of every level and it is used to differentiate the levels mentioned for TreeMap. + +#### Code Sample: + + + + + +{% highlight c# %} + + + +public partial class Form1 : Form + + { + + TreeMap TreeMap1 = new TreeMap(); + + + + public Form1() + + { + + InitializeComponent(); + + + + CountrySalesCollection data = new CountrySalesCollection (); + + TreeMap1.ItemsSource = data; + + TreeMap1.WeightValuePath = "Sales"; + + TreeMap1.ColorValuePath = "Expense"; + + TreeMapHierarchicalLevel hierarchicalLevel1 = new TreeMapHierarchicalLevel (); + + hierarchicalLevel1.ChildPath = " RegionalSales "; + + hierarchicalLevel1v.ChildGap = 10; + + TreeMap1.Levels.Add(hierarchicalLevel1); + + TreeMapHierarchicalLevel hierarchicalLevel2 = new TreeMapHierarchicalLevel (); + + hierarchicalLevel2.ChildPath = "Name"; + + hierarchicalLevel2.ChildGap = 5; + + TreeMap1.Levels.Add(hierarchicalLevel2); + + this.Controls.Add(TreeMap1); + + + + } + + } + +{% endhighlight %} + + + +{% highlight c# %} + + + + public class CountrySalesCollection : ObservableCollection + + { + + public CountrySalesCollection() + + { + + this.Add(new CountrySale() { Name = "United States", Sales = 98456, Expense = 87000 }); + + this.Add(new CountrySale() { Name = "Canada", Sales = 43523, Expense = 40000 }); + + this.Add(new CountrySale() { Name = "Mexico", Sales = 45634, Expense = 46000 }); + + this[0].RegionalSalesCollection.Add(new RegionSale() { Country = "United States", Name = "New York", Sales = 2353, Expense = 2000 }); + + this[0].RegionalSalesCollection.Add(new RegionSale() { Country = "United States", Name = "Los Angeles", Sales = 3453, Expense = 3000 }); + + this[0].RegionalSalesCollection.Add(new RegionSale() { Country = "United States", Name = "San Francisco", Sales = 8456, Expense = 8000 }); + + this[0].RegionalSalesCollection.Add(new RegionSale() { Country = "United States", Name = "Chicago", Sales = 6785, Expense = 7000 }); + + this[0].RegionalSalesCollection.Add(new RegionSale() { Country = "United States", Name = "Miami", Sales = 7045, Expense = 6000 }); + + this[1].RegionalSalesCollection.Add(new RegionSale() { Country = "Canada", Name = "Toronto", Sales = 7045, Expense = 7000 }); + + this[1].RegionalSalesCollection.Add(new RegionSale() { Country = "Canada", Name = "Vancouver", Sales = 4352, Expense = 4000 }); + + this[1].RegionalSalesCollection.Add(new RegionSale() { Country = "Canada", Name = "Winnipeg", Sales = 7843, Expense = 7500 }); + + + + this[2].RegionalSalesCollection.Add(new RegionSale() { Country = "Mexico", Name = "Mexico City", Sales = 7843, Expense = 6500 }); + + this[2].RegionalSalesCollection.Add(new RegionSale() { Country = "Mexico", Name = "Cancun", Sales = 6683, Expense = 6000 }); } + + } + + + + public class CountrySale : INotifyPropertyChanged + + { + + public string Name { get; set; } + + private double _sales = 0; + + public double Sales + + { + + get { return _sales; } + + set + + { + + if (_sales != value) + + { + + _sales = value; + + this.OnPropertyChanged(new + + PropertyChangedEventArgs("Sales")); + + } + + } + + } + + private double _expense = 0; + + public double Expense + + { + + get { return _expense; } + + set + + { + + if (_expense != value) + + { + + _expense = value; + + this.OnPropertyChanged(new + + PropertyChangedEventArgs("Expense")); + + } + + } + + } + + public ObservableCollection RegionalSalesCollection + + { get; set; } + + public CountrySale() + + { + + this.RegionalSalesCollection = new ObservableCollection(); + + } + + #region INotifyPropertyChanged Members + + public event PropertyChangedEventHandler PropertyChanged; + + protected void OnPropertyChanged(PropertyChangedEventArgs e) + + { + + if (this.PropertyChanged != null) + + this.PropertyChanged.Invoke(this, e); + + } + + #endregion + + } + + + + public class RegionSale : INotifyPropertyChanged + + { + + public string Name { get; set; } + + public string Country { get; set; } + + private double _sales = 0; + + public double Sales + + { + + get { return _sales; } + + set + + { + + if (_sales != value) + + { + + _sales = value; + + this.OnPropertyChanged(new + + PropertyChangedEventArgs("Sales")); + + } + + } + + } + + private double _expense = 0; + + public double Expense + + { + + get { return _expense; } + + set + + { + + if (_expense != value) + + { + + _expense = value; + + this.OnPropertyChanged(new + + PropertyChangedEventArgs("Expense")); + + } + + } + + } + + + + #region INotifyPropertyChanged Members + + + + public event PropertyChangedEventHandler PropertyChanged; + + protected void OnPropertyChanged(PropertyChangedEventArgs e) + + { + + if (this.PropertyChanged != null) + + this.PropertyChanged.Invoke(this, e); + + } + + + + #endregion + + } + +{% endhighlight %} + +> Note: The specified field must be a collection of sub class (object) specified in the nested data collection. + diff --git a/WindowsForms/chart/FAQ/Frequently-Asked-Questions.md b/WindowsForms/chart/FAQ/Frequently-Asked-Questions.md new file mode 100644 index 000000000..90220303b --- /dev/null +++ b/WindowsForms/chart/FAQ/Frequently-Asked-Questions.md @@ -0,0 +1,13 @@ +--- +layout: post +title: Frequently-Asked-Questions | Windows Forms | Syncfusion +description: frequently asked questions +platform: windowsforms +control: Control Name undefined +documentation: ug +--- + +## Frequently Asked Questions + +This section guides you with the features of the Chart control based on specific tasks. + diff --git a/WindowsForms/chart/Installation-and-Deployment.md b/WindowsForms/chart/Installation-and-Deployment.md new file mode 100644 index 000000000..9def6c18a --- /dev/null +++ b/WindowsForms/chart/Installation-and-Deployment.md @@ -0,0 +1,89 @@ +--- +layout: post +title: Installation-and-Deployment | Windows Forms | Syncfusion +description: Learn here all about the installation and deployment of Syncfusion Windows Forms Chart control and more. +platform: windowsforms +control: Chart +documentation: ug +--- + +# Installation and Deployment + +This section covers information on the install location, samples, licensing, patches update and updation of the recent version of Essential Studio. It comprises the following sub-sections: + +## Installation + +For step-by-step installation procedure for the installation of Essential Studio, refer to the Installation topic under Installation and Deployment in the Common UG. + +See Also + +For licensing, patches and information on adding or removing selective components refer the following topics in Common UG under Installation and Deployment. + +* Licensing +* Patches +* Add / Remove Components + +## Sample and Location + + +This section covers the location of the installed samples and describes the procedure to run the samples through the sample browser. It also lists the location of source code. + +### Sample Installation Location + +The Chart Windows Forms samples are installed in the following location: + +...\My Documents\Syncfusion\EssentialStudio\Version Number\Windows\Chart.Windows\Samples\2.0 + +### Viewing Samples + +To view the samples, follow the steps below + +1. Click Start-->All Programs-->Syncfusion-->Essential Studio -->Dashboard. + + + + ![Chart Installation](Installation-and-Deployment_images/Installation-and-Deployment_img1.png) + + + + +2. In the Dashboard window, click Run Samples for Windows Forms under UI Edition. The UI Windows Forms Sample Browser window is displayed. + + + + N> You can view the samples in any of the following three ways: + > * Run Samples - Click to view the locally installed samples. + > * Online Samples - Click to view online samples. + > * Explore Samples - Explore BI Web samples on disk. + + ![Chart Installation](Installation-and-Deployment_images/Installation-and-Deployment_img3.png) + + +3. Select Chart from bottom-left pane. Chart samples will be displayed. + + ![Chart Installation](Installation-and-Deployment_images/Installation-and-Deployment_img4.png) + + +4. Select any sample and browse through the features. + + ### Source Code Location + + The default location of the Chart Windows source code is + + [Install Drive]:\Program Files\Syncfusion\Essential Studio\[Version Number]\Windows\Chart.Windows\Src + + ### Deployment Requirements + + Toolbox Entries + + * ChartControl + * Sparkline + + ### Assembly List + + While deploying an application that references SyncfusionEssentialChart assembly, the following dependencies must be included in the distribution. + + * Syncfusion.Chart.Windows + * Syncfusion.Chart.Base + * Syncfusion.Shared.Base + * Syncfusion.Core \ No newline at end of file diff --git a/WindowsForms/clock/Appearance-and-Structure-of-the-Clock-Control.md b/WindowsForms/clock/Appearance-and-Structure-of-the-Clock-Control.md new file mode 100644 index 000000000..b63e29c93 --- /dev/null +++ b/WindowsForms/clock/Appearance-and-Structure-of-the-Clock-Control.md @@ -0,0 +1,195 @@ +--- +layout: post +title: Appearance and Structure of the Clock in Windows Forms | Syncfusion +description: Learn about Appearance and Structure of the Clock Control support in Syncfusion Windows Forms Clock control and more details. +platform: WindowsForms +control: Clock-Control-for-Windows-Forms +documentation: ug +--- + +# Appearance and structure of the Clock control + +## Color setting + +The [Clock](https://help.syncfusion.com/cr/windowsforms/Syncfusion.Windows.Forms.Tools.Clock.html) control allows you to customize its gradient back color, hands color, minute line color, and border color. + +### Customizing color to the Clock + +The [Clock](https://help.syncfusion.com/cr/windowsforms/Syncfusion.Windows.Forms.Tools.Clock.html) control has individual properties to set colors for [gradient back color](https://help.syncfusion.com/cr/windowsforms/Syncfusion.Windows.Forms.Tools.Clock.html#Syncfusion_Windows_Forms_Tools_Clock_StartGradientBackColor), [hour hands color](https://help.syncfusion.com/cr/windowsforms/Syncfusion.Windows.Forms.Tools.Clock.html#Syncfusion_Windows_Forms_Tools_Clock_HourHandColor), [minutes color](https://help.syncfusion.com/cr/windowsforms/Syncfusion.Windows.Forms.Tools.Clock.html#Syncfusion_Windows_Forms_Tools_Clock_MinuteHandColor), and [border color](https://help.syncfusion.com/cr/windowsforms/Syncfusion.Windows.Forms.Tools.Clock.html#Syncfusion_Windows_Forms_Tools_Clock_BorderColor). + +{% tabs %} + +{% highlight C# %} +using Syncfusion.Windows.Forms.Tools; + +this.clock1.BorderColor = Color.Violet; + +this.clock1.EndGradientBackColor = Color.RoyalBlue; + +this.clock1.HourHandColor = Color.SkyBlue; + +this.clock1.MinuteColor = Color.LightPink; + +this.clock1.MinuteHandColor = Color.LightSeaGreen; + +this.clock1.SecondHandColor = Color.LightSteelBlue; + +this.clock1.StartGradientBackColor = Color.Black; + +{% endhighlight %} + +{% highlight VB %} +Imports Syncfusion.Windows.Forms.Tools + +Me.clock1.BorderColor = Color.Violet + +Me.clock1.EndGradientBackColor = Color.RoyalBlue + +Me.clock1.HourHandColor = Color.SkyBlue + +Me.clock1.MinuteColor = Color.LightPink + +Me.clock1.MinuteHandColor = Color.LightSeaGreen + +Me.clock1.SecondHandColor = Color.LightSteelBlue + +Me.clock1.StartGradientBackColor = Color.Black + +{% endhighlight %} + +{% endtabs %} + +![Customizing color to the Clock](Overview_images/Overview_img95.png) + + +## Appearance setting + +The [Clock](https://help.syncfusion.com/cr/windowsforms/Syncfusion.Windows.Forms.Tools.Clock.html) control allows you to customize the thickness of the hands and minute line. It also allows you to enable or disable the AM/PM, borders, minute, and second hand. The [Clock](https://help.syncfusion.com/cr/windowsforms/Syncfusion.Windows.Forms.Tools.Clock.html) control supports a transparent appearance. + +### Customization of hands thickness + +Clock control allows you to adjust the thickness of hands and minute line. + +{% tabs %} + +{% highlight C# %} +using Syncfusion.Windows.Forms.Tools; + +this.clock1.HourHandThickness = 7; + +this.clock1.MinuteHandThickness = 5; + +this.clock1.SecondHandThickness = 2; + +this.clock1.MinuteThickness = 4; + +{% endhighlight %} + +{% highlight VB %} +Imports Syncfusion.Windows.Forms.Tools + +Me.clock1.HourHandThickness = 7 + +Me.clock1.MinuteHandThickness = 5 + +Me.clock1.SecondHandThickness = 2 + +Me.clock1.MinuteThickness = 4 + +{% endhighlight %} + +{% endtabs %} + +![Customization of hands thickness](Overview_images/Overview_img96.png) + + + +### Enable and disable properties + +The [Clock](https://help.syncfusion.com/cr/windowsforms/Syncfusion.Windows.Forms.Tools.Clock.html) control allows you to enable or disable AM/PM, second hand, minute line, and border. + +{% tabs %} + +{% highlight C# %} +using Syncfusion.Windows.Forms.Tools; + +this.clock1.ShowAMorPM = true; + +this.clock1.ShowBorder = false; + +this.clock1.ShowMinute = false; + +this.clock1.ShowSecondHand = false; + +{% endhighlight %} + +{% highlight VB %} +Imports Syncfusion.Windows.Forms.Tools + +Me.clock1.ShowAMorPM = True + +Me.clock1.ShowBorder = False + +Me.clock1.ShowMinute = False + +Me.clock1.ShowSecondHand = False + +{% endhighlight %} + +{% endtabs %} + +![Enable and disable properties](Overview_images/Overview_img97.png) + +## Transparent support + +Clock control supports a transparent background. + +{% tabs %} + +{% highlight C# %} +using Syncfusion.Windows.Forms.Tools; + +this.clock1.IsTransparent = true; + +{% endhighlight %} + +{% highlight VB %} +Imports Syncfusion.Windows.Forms.Tools + +Me.clock1.IsTransparent = True + +{% endhighlight %} + +{% endtabs %} + +![Transparent support](Overview_images/Overview_img98.png) + + + +### How to show a fixed time in the Clock control + +The [Clock](https://help.syncfusion.com/cr/windowsforms/Syncfusion.Windows.Forms.Tools.Clock.html) control usually displays the current time on the machine where it is hosted. To freeze the clock to display a fixed time, the Boolean property [StopTimer](https://help.syncfusion.com/cr/windowsforms/Syncfusion.Windows.Forms.Tools.Clock.html#Syncfusion_Windows_Forms_Tools_Clock_StopTimer) can be used. Then, using the Clock control's [Now](https://help.syncfusion.com/cr/windowsforms/Syncfusion.Windows.Forms.Tools.Clock.html#Syncfusion_Windows_Forms_Tools_Clock_Now) property, the desired time can be displayed; otherwise, the default time will be shown. + + +{% tabs %} + +{% highlight C# %} +using Syncfusion.Windows.Forms.Tools; + +//Gets or sets the value to freeze or unfreeze time in the clock. + +this.clock1.StopTimer = true; + +{% endhighlight %} + +{% highlight VB %} +Imports Syncfusion.Windows.Forms.Tools + +'Gets or sets the value to freeze or unfreeze time in the clock. + +Me.clock1.StopTimer = True + +{% endhighlight %} + +{% endtabs %} + diff --git a/WindowsForms/clock/Applying-Custom-Renderer-to-the-Clock-Control.md b/WindowsForms/clock/Applying-Custom-Renderer-to-the-Clock-Control.md new file mode 100644 index 000000000..eeccd94c5 --- /dev/null +++ b/WindowsForms/clock/Applying-Custom-Renderer-to-the-Clock-Control.md @@ -0,0 +1,108 @@ +--- +layout: post +title: Applying Custom Renderer to the Clock in Windows Forms | Syncfusion +description: Learn about Applying Custom Renderer to the Clock Control support in Syncfusion Windows Forms Clock control and more details. +platform: WindowsForms +control: Clock-Control-for-Windows-Forms +documentation: ug +--- + +# Applying Custom Renderer to the Clock Control in Windows Forms + +## Customization of rendering by overriding the method + +The [Clock](https://help.syncfusion.com/cr/windowsforms/Syncfusion.Windows.Forms.Tools.Clock.html) control can be customized by applying a custom renderer. + +{% tabs %} +{% highlight C# %} +using Syncfusion.Windows.Forms.Tools; + +CustomRenderer renderer = new CustomRenderer(); +this.clock1.Renderer = renderer; +public class CustomRenderer : ClockRenderer +{ + public override void DrawInterior(Graphics g, float thickness, PointF startPoint, PointF endPoint, Color color, string sender) + { + if (sender == "SecondsHand") + { + g.SmoothingMode = SmoothingMode.AntiAlias; + Pen p = new Pen(color, thickness + thickness); + p.StartCap = LineCap.SquareAnchor; + p.EndCap = LineCap.ArrowAnchor; + g.DrawLine(p, startPoint, endPoint); + p.Dispose(); + } + else if (sender == "MinutesHand") + { + g.SmoothingMode = SmoothingMode.AntiAlias; + Pen p = new Pen(color, thickness + thickness); + p.StartCap = LineCap.SquareAnchor; + p.EndCap = LineCap.ArrowAnchor; + g.DrawLine(p, startPoint, endPoint); + p.Dispose(); + } + else if (sender == "HoursHand") + { + g.SmoothingMode = SmoothingMode.AntiAlias; + Pen p = new Pen(color, thickness + thickness); + p.StartCap = LineCap.SquareAnchor; + p.EndCap = LineCap.ArrowAnchor; + g.DrawLine(p, startPoint, endPoint); + p.Dispose(); + } + else + { + g.SmoothingMode = SmoothingMode.AntiAlias; + Pen p = new Pen(color, 5 ); + p.DashStyle = DashStyle.Dot; + g.DrawLine(p, startPoint, endPoint); + p.Dispose(); + } + } +} +{% endhighlight %} +{% highlight VB %} +Imports Syncfusion.Windows.Forms.Tools + +Private renderer As New CustomRenderer() +Me.clock1.Renderer = renderer + +Public Class CustomRenderer + Inherits ClockRenderer + + Public Overrides Sub DrawInterior(ByVal g As Graphics, ByVal thickness As Single, ByVal startPoint As PointF, ByVal endPoint As PointF, ByVal color As Color, ByVal sender As String) + If sender = "SecondsHand" Then + g.SmoothingMode = SmoothingMode.AntiAlias + Dim p As New Pen(color, thickness + thickness) + p.StartCap = LineCap.SquareAnchor + p.EndCap = LineCap.ArrowAnchor + g.DrawLine(p, startPoint, endPoint) + p.Dispose() + ElseIf sender = "MinutesHand" Then + g.SmoothingMode = SmoothingMode.AntiAlias + Dim p As New Pen(color, thickness + thickness) + p.StartCap = LineCap.SquareAnchor + p.EndCap = LineCap.ArrowAnchor + g.DrawLine(p, startPoint, endPoint) + p.Dispose() + ElseIf sender = "HoursHand" Then + g.SmoothingMode = SmoothingMode.AntiAlias + Dim p As New Pen(color, thickness + thickness) + p.StartCap = LineCap.SquareAnchor + p.EndCap = LineCap.ArrowAnchor + g.DrawLine(p, startPoint, endPoint) + p.Dispose() + Else + g.SmoothingMode = SmoothingMode.AntiAlias + Dim p As New Pen(color, 5) + p.DashStyle = DashStyle.Dot + g.DrawLine(p, startPoint, endPoint) + p.Dispose() + End If + End Sub +End Class +{% endhighlight %} +{% endtabs %} + +![Custom clock](Overview_images/Overview_img99.png) + diff --git a/WindowsForms/clock/Digital-Clock.md b/WindowsForms/clock/Digital-Clock.md new file mode 100644 index 000000000..7f6b569c5 --- /dev/null +++ b/WindowsForms/clock/Digital-Clock.md @@ -0,0 +1,486 @@ +--- +layout: post +title: Digital Clock in Windows Forms Clock control | Syncfusion +description: Learn about Digital Clock support in Syncfusion Essential Studio Windows Forms Clock control and more details. +platform: WindowsForms +control: Clock-Control-for-Windows-Forms +documentation: ug +--- + +# Digital Clock in Windows Forms Clock + +The DigitalClock is implemented as an extension to the existing [Windows Forms Clock](https://www.syncfusion.com/winforms-ui-controls/clock) control. It offers a richer UI experience than the existing clock and is capable of displaying the time as digital text. + +You can use the DigitalClock in your application by simply switching the [ClockType](https://help.syncfusion.com/cr/windowsforms/Syncfusion.Windows.Forms.Tools.Clock.html#Syncfusion_Windows_Forms_Tools_Clock_ClockType) of the existing [Clock](https://help.syncfusion.com/cr/windowsforms/Syncfusion.Windows.Forms.Tools.Clock.html) control as described in the following sample code: + +{% tabs %} + +{% highlight C# %} +using Syncfusion.Windows.Forms.Tools; + +this.clock1.ClockType = Syncfusion.Windows.Forms.Tools.ClockTypes.Digital; + +{% endhighlight %} + +{% highlight VB %} +Imports Syncfusion.Windows.Forms.Tools + +Me.clock1.ClockType = Syncfusion.Windows.Forms.Tools.ClockTypes.Digital + +{% endhighlight %} + +{% endtabs %} + +## Appearance + +The DigitalClock offers a wide range of options to customize its appearance. It provides three built-in frames and five background shapes. Users can also use their own frames for the DigitalClock through the renderer. + +### Frames + +To enable the background frames, set the [ShowClockFrame](https://help.syncfusion.com/cr/windowsforms/Syncfusion.Windows.Forms.Tools.Clock.html#Syncfusion_Windows_Forms_Tools_Clock_ShowClockFrame) property to `true`. + +#### Rectangular frame + +{% tabs %} + +{% highlight C# %} +using Syncfusion.Windows.Forms.Tools; + +this.clock1.ShowClockFrame = true; + +this.clock1.ClockFrame = Syncfusion.Windows.Forms.Tools.ClockFrames.RectangularFrame; + +{% endhighlight %} + +{% highlight VB %} +Imports Syncfusion.Windows.Forms.Tools + +Me.clock1.ShowClockFrame = True +Me.clock1.ClockFrame = Syncfusion.Windows.Forms.Tools.ClockFrames.RectangularFrame + +{% endhighlight %} + +{% endtabs %} + +![Rectangular frame](Overview_images/Overview_img100.png) + +#### Circular frame + +{% tabs %} + +{% highlight C# %} +using Syncfusion.Windows.Forms.Tools; + +this.clock1.ShowClockFrame = true; + +this.clock1.ClockFrame = Syncfusion.Windows.Forms.Tools.ClockFrames.CircularFrame; + +{% endhighlight %} + +{% highlight VB %} +Imports Syncfusion.Windows.Forms.Tools + +Me.clock1.ShowClockFrame = True +Me.clock1.ClockFrame = Syncfusion.Windows.Forms.Tools.ClockFrames.CircularFrame + +{% endhighlight %} + +{% endtabs %} + +![Circular frame](Overview_images/Overview_img101.png) + + + +#### Square frame + +{% tabs %} + +{% highlight C# %} +using Syncfusion.Windows.Forms.Tools; + +this.clock1.ShowClockFrame = true; + +this.clock1.ClockFrame = Syncfusion.Windows.Forms.Tools.ClockFrames.SquareFrame; + +{% endhighlight %} + +{% highlight VB %} +Imports Syncfusion.Windows.Forms.Tools + +Me.clock1.ShowClockFrame = True +Me.clock1.ClockFrame = Syncfusion.Windows.Forms.Tools.ClockFrames.SquareFrame + +{% endhighlight %} + +{% endtabs %} + +![Square frame](Overview_images/Overview_img102.png) + +### Shapes + +To enable background shapes in the [Clock](https://help.syncfusion.com/cr/windowsforms/Syncfusion.Windows.Forms.Tools.Clock.html) control, set the [ShowClockFrame](https://help.syncfusion.com/cr/windowsforms/Syncfusion.Windows.Forms.Tools.Clock.html#Syncfusion_Windows_Forms_Tools_Clock_ShowClockFrame) property to `false` to enable the background shapes. + +#### Rectangular shape + +{% tabs %} + +{% highlight C# %} +using Syncfusion.Windows.Forms.Tools; + +this.clock1.ShowClockFrame = false; + +this.clock1.ClockShape = Syncfusion.Windows.Forms.Tools.ClockShapes.Rectangle; + +{% endhighlight %} + +{% highlight VB %} +Imports Syncfusion.Windows.Forms.Tools + +Me.clock1.ShowClockFrame = False +Me.clock1.ClockShape = Syncfusion.Windows.Forms.Tools.ClockShapes.Rectangle + +{% endhighlight %} + +{% endtabs %} + +![Shapes](Overview_images/Overview_img103.png) + + + +#### RoundedRectangular shape + +{% tabs %} + +{% highlight C# %} +using Syncfusion.Windows.Forms.Tools; + +this.clock1.ShowClockFrame = false; + +this.clock1.ClockShape = Syncfusion.Windows.Forms.Tools.ClockShapes.RoundedRectangle; + + {% endhighlight %} + +{% highlight VB %} +Imports Syncfusion.Windows.Forms.Tools + +Me.clock1.ShowClockFrame = False +Me.clock1.ClockShape = Syncfusion.Windows.Forms.Tools.ClockShapes.RoundedRectangle + +{% endhighlight %} + +{% endtabs %} + +![RoundedRectangular shape](Overview_images/Overview_img104.png) + + + +#### Circular shape + +{% tabs %} + +{% highlight C# %} +using Syncfusion.Windows.Forms.Tools; + +this.clock1.ShowClockFrame = false; + +this.clock1.ClockShape = Syncfusion.Windows.Forms.Tools.ClockShapes.Circle; + +{% endhighlight %} + +{% highlight VB %} +Imports Syncfusion.Windows.Forms.Tools + +Me.clock1.ShowClockFrame = False +Me.clock1.ClockShape = Syncfusion.Windows.Forms.Tools.ClockShapes.Circle + +{% endhighlight %} + +{% endtabs %} + +![Circular shape](Overview_images/Overview_img105.png) + + + +#### Square shape + +{% tabs %} + +{% highlight C# %} +using Syncfusion.Windows.Forms.Tools; + +this.clock1.ShowClockFrame = false; + +this.clock1.ClockShape = Syncfusion.Windows.Forms.Tools.ClockShapes.Square; + + {% endhighlight %} + +{% highlight VB %} +Imports Syncfusion.Windows.Forms.Tools + +Me.clock1.ShowClockFrame = False +Me.clock1.ClockShape = Syncfusion.Windows.Forms.Tools.ClockShapes.Square + + {% endhighlight %} + + {% endtabs %} + +![Square shape](Overview_images/Overview_img106.png) + + + +#### RoundedSquare shape + +{% tabs %} + +{% highlight C# %} +using Syncfusion.Windows.Forms.Tools; + +this.clock1.ShowClockFrame = false; + +this.clock1.ClockShape = Syncfusion.Windows.Forms.Tools.ClockShapes.RoundedSquare; + +{% endhighlight %} + +{% highlight VB %} +Imports Syncfusion.Windows.Forms.Tools + +Me.clock1.ShowClockFrame = False +Me.clock1.ClockShape = Syncfusion.Windows.Forms.Tools.ClockShapes.RoundedSquare + +{% endhighlight %} + +{% endtabs %} + +![RoundedSquare shape](Overview_images/Overview_img107.png) + +### Color customizations + +#### Foreground color + +The foreground color for the DigitalClock can be changed using the [ForeColor](https://help.syncfusion.com/cr/windowsforms/Syncfusion.Windows.Forms.Tools.Clock.html#Syncfusion_Windows_Forms_Tools_Clock_ForeColor) property. This color will be reflected in the text of the control. + +{% tabs %} + +{% highlight C# %} +using Syncfusion.Windows.Forms.Tools; + +this.clock1.ForeColor = System.Drawing.Color.Yellow; + +{% endhighlight %} + + + +{% highlight VB %} +Imports Syncfusion.Windows.Forms.Tools + +Me.clock1.ForeColor = System.Drawing.Color.Yellow + +{% endhighlight %} + +{% endtabs %} + +![Foreground color](Overview_images/Overview_img108.png) + + +#### Background color + +The background color for the DigitalClock can be changed using the [BackgroundColor](https://help.syncfusion.com/cr/windowsforms/Syncfusion.Windows.Forms.Tools.Clock.html#Syncfusion_Windows_Forms_Tools_Clock_BackgroundColor) property. This color will be reflected in the background of the control. + +{% tabs %} + +{% highlight C# %} +using Syncfusion.Windows.Forms.Tools; + +this.clock1.BackgroundColor = System.Drawing.SystemColors.ActiveCaption; + +this.clock1.ForeColor = System.Drawing.Color.Yellow; + +{% endhighlight %} + + + +{% highlight VB %} +Imports Syncfusion.Windows.Forms.Tools + +Me.clock1.BackgroundColor = System.Drawing.SystemColors.ActiveCaption + +Me.clock1.ForeColor = System.Drawing.Color.Yellow + +{% endhighlight %} + +{% endtabs %} + +![Background color](Overview_images/Overview_img109.png) + +#### Border color + +The border color for the control will be reflected only when the control is assigned with the background shapes as follows: + +{% tabs %} + +{% highlight C# %} +using Syncfusion.Windows.Forms.Tools; + +this.clock1.BorderColor = System.Drawing.Color.Yellow; + +this.clock1.BackgroundColor = System.Drawing.SystemColors.ActiveCaption; + +this.clock1.ForeColor = System.Drawing.Color.Yellow; + +{% endhighlight %} + + + +{% highlight VB %} +Imports Syncfusion.Windows.Forms.Tools + +Me.clock1.BorderColor = System.Drawing.Color.Yellow + +Me.clock1.BackgroundColor = System.Drawing.SystemColors.ActiveCaption + +Me.clock1.ForeColor = System.Drawing.Color.Yellow + +{% endhighlight %} + +{% endtabs %} + +![Border color](Overview_images/Overview_img110.png) + +## Behavior + +### Show or hide days of the week + +To display or hide the weekdays and current date in the DigitalClock, the [DisplayDates](https://help.syncfusion.com/cr/windowsforms/Syncfusion.Windows.Forms.Tools.Clock.html#Syncfusion_Windows_Forms_Tools_Clock_DisplayDates) property can be used. + +{% tabs %} + +{% highlight C# %} +using Syncfusion.Windows.Forms.Tools; + +this.clock1.DisplayDates = true; + +{% endhighlight %} + + + +{% highlight VB %} +Imports Syncfusion.Windows.Forms.Tools + +Me.clock1.DisplayDates = True + +{% endhighlight %} + +{% endtabs %} + + +![Show the days of the week](Overview_images/Overview_img111.png) + + + +![Hide days of the week](Overview_images/Overview_img112.png) + + +### Show or hide the hour designator + +To display or hide the hour designator (AM and PM) in the DigitalClock, the [ShowHourDesignator](https://help.syncfusion.com/cr/windowsforms/Syncfusion.Windows.Forms.Tools.Clock.html#Syncfusion_Windows_Forms_Tools_Clock_ShowHourDesignator) property can be used. + +{% tabs %} + +{% highlight C# %} +using Syncfusion.Windows.Forms.Tools; + +this.clock1.ShowHourDesignator = false; + +{% endhighlight %} + + + +{% highlight VB %} +Imports Syncfusion.Windows.Forms.Tools + +Me.clock1.ShowHourDesignator = False + +{% endhighlight %} + +{% endtabs %} + +![Hide the hour designator](Overview_images/Overview_img113.png) + +![Show the hour designator](Overview_images/Overview_img114.png) + + +### Custom time Clock + +To enable the custom time, set the [ShowCustomTimeClock](https://help.syncfusion.com/cr/windowsforms/Syncfusion.Windows.Forms.Tools.Clock.html#Syncfusion_Windows_Forms_Tools_Clock_ShowCustomTimeClock) property to `true`. + +#### Input formats + +To enable the custom time, set the [ShowCustomTimeClock](https://help.syncfusion.com/cr/windowsforms/Syncfusion.Windows.Forms.Tools.Clock.html#Syncfusion_Windows_Forms_Tools_Clock_ShowCustomTimeClock) property to `true`, and the custom time should be in DateTime format. + +{% tabs %} + +{% highlight C# %} +using Syncfusion.Windows.Forms.Tools; + +this.clock1.ShowCustomTimeClock = true; +this.clock1.CustomTime = new System.DateTime(2013, 9, 14, 10, 10, 15, 0); +{% endhighlight %} +{% highlight VB %} +Imports Syncfusion.Windows.Forms.Tools + +Me.clock1.ShowCustomTimeClock = True +Me.clock1.CustomTime = New Date(2013, 9, 14, 10, 10, 15, 0) + +{% endhighlight %} + +{% endtabs %} + +![Custom time Clock](Overview_images/Overview_img115.png) + +#### Applying custom renderer to the DigitalClock control + +The following code sample can be utilized for applying a custom renderer to the DigitalClock. + +{% tabs %} + +{% highlight C# %} +using Syncfusion.Windows.Forms.Tools; + +DigitalRenderer render = new DigitalRenderer(); + +this.clock1.DigitalRenderer = render; + +public class DigitalRenderer : DigitalClockRenderer + +{ + + public override void DrawDigitalClockFrame(Graphics g, Image newImage, Clock clock) + { + + Image image =Image.FromFile(@"D:\CustomClock.PNG"); + + base.DrawDigitalClockFrame(g, image, clock); + + } +} + +{% endhighlight %} +{% highlight VB %} +Imports Syncfusion.Windows.Forms.Tools + +Dim render As DigitalRenderer = New DigitalRenderer +Me.clock1.DigitalRenderer = render +Public Class DigitalRenderer +    Inherits DigitalClockRenderer + +    Public Overrides Sub DrawDigitalClockFrame(ByVal g As Graphics, ByVal newImage As Image, ByVal clock As Clock) +        Dim image As Image = Image.FromFile("G:\CustomClock.PNG") +        MyBase.DrawDigitalClockFrame(g, image, clock) +    End Sub +End Class + +{% endhighlight %} + +{% endtabs %} + +![Custom clock](Overview_images/Overview_img116.png) diff --git a/WindowsForms/clock/Getting-Started.md b/WindowsForms/clock/Getting-Started.md new file mode 100644 index 000000000..37a29f8d7 --- /dev/null +++ b/WindowsForms/clock/Getting-Started.md @@ -0,0 +1,162 @@ +--- +layout: post +title: Getting Started with Windows Forms Clock control | Syncfusion +description: Learn here about getting started with Syncfusion Essential Studio Windows Forms Clock control, its elements and more details. +platform: WindowsForms +control: Clock +documentation: ug +--- + +# Getting Started with Windows Forms Clock +This section provides a quick overview for working with the [Clock](https://help.syncfusion.com/cr/windowsforms/Syncfusion.Windows.Forms.Tools.Clock.html) control for WinForms. + +## Assembly deployment + +Refer to the [Control dependencies](https://help.syncfusion.com/windowsforms/control-dependencies#clock) section to get the list of assemblies or details of NuGet package that needs to be added as a reference to use the control in any application. + +Click [NuGet Packages](https://help.syncfusion.com/windowsforms/installation/install-nuget-packages) to learn how to install NuGet packages in a Windows Forms application. + +## Creating Application with Clock +In this walkthrough, users will create a WinForms application that contains [Clock](https://help.syncfusion.com/cr/windowsforms/Syncfusion.Windows.Forms.Tools.Clock.html) control. + +### Creating the Project +Create a new Windows Forms project in Visual Studio to display [Clock](https://help.syncfusion.com/cr/windowsforms/Syncfusion.Windows.Forms.Tools.Clock.html) with data objects. + +### Adding Clock control via designer + +1. Create a new Windows Forms project in Visual Studio. + +2. The [Clock](https://help.syncfusion.com/cr/windowsforms/Syncfusion.Windows.Forms.Tools.Clock.html) control can be added to an application by dragging it from the toolbox to the designer view. The following dependent assemblies will be added automatically: + + * Syncfusion.Grid.Base + * Syncfusion.Grid.Windows + * Syncfusion.Shared.Base + * Syncfusion.Shared.Windows + * Syncfusion.Tools.Base + * Syncfusion.Tools.Windows + +![WindowsForms Clock control added by designer](getting-started_images/windowsforms-clock-control-added-by-designer.png) + +### Adding Clock control via code + +To add the control manually in C#, follow the given steps: + +1. Create a C# or VB application via Visual Studio. + +2. Add the following assembly references to the project: + + * Syncfusion.Grid.Base + * Syncfusion.Grid.Windows + * Syncfusion.Shared.Base + * Syncfusion.Shared.Windows + * Syncfusion.Tools.Base + * Syncfusion.Tools.Windows + +3. Include the required namespace. + +{% capture codesnippet1 %} +{% tabs %} +{% highlight C# %} +using Syncfusion.Windows.Forms.Tools; + +{% endhighlight %} +{% highlight VB %} +Imports Syncfusion.Windows.Forms.Tools + +{% endhighlight %} +{% endtabs %} +{% endcapture %} +{{ codesnippet1 | OrderList_Indent_Level_1 }} + +4. Create an instance of the [Clock](https://help.syncfusion.com/cr/windowsforms/Syncfusion.Windows.Forms.Tools.Clock.html) control, and add it to the form. + +{% capture codesnippet2 %} +{% tabs %} +{% highlight C# %} +using Syncfusion.Windows.Forms.Tools; + +Clock clock1 = new Clock(); +this.Controls.Add(clock1); + +{% endhighlight %} +{% highlight VB %} +Imports Syncfusion.Windows.Forms.Tools + +Dim clock1 As New Clock() +Me.Controls.Add(clock1) + +{% endhighlight %} +{% endtabs %} +{% endcapture %} +{{ codesnippet2 | OrderList_Indent_Level_1 }} + +![WindowsForms Clock control added by code](getting-started_images/windowsforms-clock-control-added-by-code.png) + +## Clock type + +You can change the analog clock to digital clock by setting the [ClockType](https://help.syncfusion.com/cr/windowsforms/Syncfusion.Windows.Forms.Tools.Clock.html#Syncfusion_Windows_Forms_Tools_Clock_ClockType) property of the [Clock](https://help.syncfusion.com/cr/windowsforms/Syncfusion.Windows.Forms.Tools.Clock.html) control. + +{% tabs %} + +{% highlight C# %} +using Syncfusion.Windows.Forms.Tools; + +clock1.ClockType = Syncfusion.Windows.Forms.Tools.ClockTypes.Digital; + +{% endhighlight %} + +{% highlight VB %} +Imports Syncfusion.Windows.Forms.Tools + +clock1.ClockType = Syncfusion.Windows.Forms.Tools.ClockTypes.Digital + +{% endhighlight %} + +{% endtabs %} + +![WindowsForms Clock shows digital clock](getting-started_images/windowsforms-digital-clock.png) + +For Analog Clock, + +{% tabs %} + +{% highlight C# %} +using Syncfusion.Windows.Forms.Tools; + +clock1.ClockType = Syncfusion.Windows.Forms.Tools.ClockTypes.Analog; + +{% endhighlight %} + +{% highlight VB %} +Imports Syncfusion.Windows.Forms.Tools + +clock1.ClockType = Syncfusion.Windows.Forms.Tools.ClockTypes.Analog + +{% endhighlight %} + +{% endtabs %} + +![WindowsForms Clock shows analog clock](getting-started_images/windowsforms-analog-clock.png) + +## Change date and time + +To enable custom time, the Clock control should be enabled by setting the [ShowCustomTimeClock](https://help.syncfusion.com/cr/windowsforms/Syncfusion.Windows.Forms.Tools.Clock.html#Syncfusion_Windows_Forms_Tools_Clock_ShowCustomTimeClock) property to `true`, and the custom time should be in date-time format. + +{% tabs %} +{% highlight C# %} +using Syncfusion.Windows.Forms.Tools; + +clock1.ShowCustomTimeClock = true; +clock1.CustomTime = new System.DateTime(2019, 7, 3, 16, 50, 1, 0); + +{% endhighlight %} +{% highlight VB %} +Imports Syncfusion.Windows.Forms.Tools + +clock1.ShowCustomTimeClock = True +clock1.CustomTime = New System.DateTime(2019, 7, 3, 16, 50, 1, 0) + +{% endhighlight %} +{% endtabs %} + +![WindowsForms Clock shows customized time](getting-started_images/windowsforms-clock-custom-time.png) diff --git a/WindowsForms/clock/Overview.md b/WindowsForms/clock/Overview.md new file mode 100644 index 000000000..838f62218 --- /dev/null +++ b/WindowsForms/clock/Overview.md @@ -0,0 +1,24 @@ +--- +layout: post +title: About Windows Forms Clock control | Syncfusion +description: Learn here all about introduction of Syncfusion Windows Forms Clock control, its elements and more details. +platform: WindowsForms +control: Clock-Control-for-Windows-Forms +documentation: ug +--- + +# Windows Forms Clock Overview + +Essential Tools for Windows Forms supports [Clock](https://help.syncfusion.com/cr/windowsforms/Syncfusion.Windows.Forms.Tools.Clock.html) control in an application. This feature enables you to add customizable analog clocks in the application. + +![Overview of the Clock control in WindowsForms](overview_images/windowsforms-clock-overview.png) + +## Key features + +* **Clock types** - Provides different types of clocks. The types are Analog and Digital. + +* **Shapes** - Provides different clock shapes. The shapes are Rectangle, RoundedRectangle, Circle, Square, and RoundedSquare. + +* **Custom time** - Enables custom time display. The control should be enabled by setting the `ShowCustomTimeClock` property to `true`. + +* **Frames** - Provides different sets of frames. The frames are RectangularFrame, CircularFrame, and SquareFrame. diff --git a/WindowsForms/clock/Overview_images/Overview_img1.jpeg b/WindowsForms/clock/Overview_images/Overview_img1.jpeg new file mode 100644 index 000000000..d81f8ddc3 Binary files /dev/null and b/WindowsForms/clock/Overview_images/Overview_img1.jpeg differ diff --git a/WindowsForms/clock/Overview_images/Overview_img10.jpeg b/WindowsForms/clock/Overview_images/Overview_img10.jpeg new file mode 100644 index 000000000..b93ee952c Binary files /dev/null and b/WindowsForms/clock/Overview_images/Overview_img10.jpeg differ diff --git a/WindowsForms/clock/Overview_images/Overview_img100.png b/WindowsForms/clock/Overview_images/Overview_img100.png new file mode 100644 index 000000000..e9767b94a Binary files /dev/null and b/WindowsForms/clock/Overview_images/Overview_img100.png differ diff --git a/WindowsForms/clock/Overview_images/Overview_img101.png b/WindowsForms/clock/Overview_images/Overview_img101.png new file mode 100644 index 000000000..9c8ea43b7 Binary files /dev/null and b/WindowsForms/clock/Overview_images/Overview_img101.png differ diff --git a/WindowsForms/clock/Overview_images/Overview_img102.png b/WindowsForms/clock/Overview_images/Overview_img102.png new file mode 100644 index 000000000..35b09c642 Binary files /dev/null and b/WindowsForms/clock/Overview_images/Overview_img102.png differ diff --git a/WindowsForms/clock/Overview_images/Overview_img103.png b/WindowsForms/clock/Overview_images/Overview_img103.png new file mode 100644 index 000000000..39c1d6855 Binary files /dev/null and b/WindowsForms/clock/Overview_images/Overview_img103.png differ diff --git a/WindowsForms/clock/Overview_images/Overview_img104.png b/WindowsForms/clock/Overview_images/Overview_img104.png new file mode 100644 index 000000000..36e8e56ee Binary files /dev/null and b/WindowsForms/clock/Overview_images/Overview_img104.png differ diff --git a/WindowsForms/clock/Overview_images/Overview_img105.png b/WindowsForms/clock/Overview_images/Overview_img105.png new file mode 100644 index 000000000..a64659195 Binary files /dev/null and b/WindowsForms/clock/Overview_images/Overview_img105.png differ diff --git a/WindowsForms/clock/Overview_images/Overview_img106.png b/WindowsForms/clock/Overview_images/Overview_img106.png new file mode 100644 index 000000000..d7935e446 Binary files /dev/null and b/WindowsForms/clock/Overview_images/Overview_img106.png differ diff --git a/WindowsForms/clock/Overview_images/Overview_img107.png b/WindowsForms/clock/Overview_images/Overview_img107.png new file mode 100644 index 000000000..cbc63aa35 Binary files /dev/null and b/WindowsForms/clock/Overview_images/Overview_img107.png differ diff --git a/WindowsForms/clock/Overview_images/Overview_img108.png b/WindowsForms/clock/Overview_images/Overview_img108.png new file mode 100644 index 000000000..104ac9494 Binary files /dev/null and b/WindowsForms/clock/Overview_images/Overview_img108.png differ diff --git a/WindowsForms/clock/Overview_images/Overview_img109.png b/WindowsForms/clock/Overview_images/Overview_img109.png new file mode 100644 index 000000000..356f3b01b Binary files /dev/null and b/WindowsForms/clock/Overview_images/Overview_img109.png differ diff --git a/WindowsForms/clock/Overview_images/Overview_img11.jpeg b/WindowsForms/clock/Overview_images/Overview_img11.jpeg new file mode 100644 index 000000000..9feb6b260 Binary files /dev/null and b/WindowsForms/clock/Overview_images/Overview_img11.jpeg differ diff --git a/WindowsForms/clock/Overview_images/Overview_img110.png b/WindowsForms/clock/Overview_images/Overview_img110.png new file mode 100644 index 000000000..e1f00e7d6 Binary files /dev/null and b/WindowsForms/clock/Overview_images/Overview_img110.png differ diff --git a/WindowsForms/clock/Overview_images/Overview_img111.png b/WindowsForms/clock/Overview_images/Overview_img111.png new file mode 100644 index 000000000..e9767b94a Binary files /dev/null and b/WindowsForms/clock/Overview_images/Overview_img111.png differ diff --git a/WindowsForms/clock/Overview_images/Overview_img112.png b/WindowsForms/clock/Overview_images/Overview_img112.png new file mode 100644 index 000000000..cc145ee0f Binary files /dev/null and b/WindowsForms/clock/Overview_images/Overview_img112.png differ diff --git a/WindowsForms/clock/Overview_images/Overview_img113.png b/WindowsForms/clock/Overview_images/Overview_img113.png new file mode 100644 index 000000000..cc145ee0f Binary files /dev/null and b/WindowsForms/clock/Overview_images/Overview_img113.png differ diff --git a/WindowsForms/clock/Overview_images/Overview_img114.png b/WindowsForms/clock/Overview_images/Overview_img114.png new file mode 100644 index 000000000..971780665 Binary files /dev/null and b/WindowsForms/clock/Overview_images/Overview_img114.png differ diff --git a/WindowsForms/clock/Overview_images/Overview_img115.png b/WindowsForms/clock/Overview_images/Overview_img115.png new file mode 100644 index 000000000..75663e809 Binary files /dev/null and b/WindowsForms/clock/Overview_images/Overview_img115.png differ diff --git a/WindowsForms/clock/Overview_images/Overview_img116.png b/WindowsForms/clock/Overview_images/Overview_img116.png new file mode 100644 index 000000000..c51ef9b21 Binary files /dev/null and b/WindowsForms/clock/Overview_images/Overview_img116.png differ diff --git a/WindowsForms/clock/Overview_images/Overview_img12.jpeg b/WindowsForms/clock/Overview_images/Overview_img12.jpeg new file mode 100644 index 000000000..db3aa27ca Binary files /dev/null and b/WindowsForms/clock/Overview_images/Overview_img12.jpeg differ diff --git a/WindowsForms/clock/Overview_images/Overview_img13.jpeg b/WindowsForms/clock/Overview_images/Overview_img13.jpeg new file mode 100644 index 000000000..a37eaf0ab Binary files /dev/null and b/WindowsForms/clock/Overview_images/Overview_img13.jpeg differ diff --git a/WindowsForms/clock/Overview_images/Overview_img14.jpeg b/WindowsForms/clock/Overview_images/Overview_img14.jpeg new file mode 100644 index 000000000..141a1e0cc Binary files /dev/null and b/WindowsForms/clock/Overview_images/Overview_img14.jpeg differ diff --git a/WindowsForms/clock/Overview_images/Overview_img15.jpeg b/WindowsForms/clock/Overview_images/Overview_img15.jpeg new file mode 100644 index 000000000..ab1c25a58 Binary files /dev/null and b/WindowsForms/clock/Overview_images/Overview_img15.jpeg differ diff --git a/WindowsForms/clock/Overview_images/Overview_img16.jpeg b/WindowsForms/clock/Overview_images/Overview_img16.jpeg new file mode 100644 index 000000000..431c28e9d Binary files /dev/null and b/WindowsForms/clock/Overview_images/Overview_img16.jpeg differ diff --git a/WindowsForms/clock/Overview_images/Overview_img17.jpeg b/WindowsForms/clock/Overview_images/Overview_img17.jpeg new file mode 100644 index 000000000..63f95f9dd Binary files /dev/null and b/WindowsForms/clock/Overview_images/Overview_img17.jpeg differ diff --git a/WindowsForms/clock/Overview_images/Overview_img18.jpeg b/WindowsForms/clock/Overview_images/Overview_img18.jpeg new file mode 100644 index 000000000..374d4860e Binary files /dev/null and b/WindowsForms/clock/Overview_images/Overview_img18.jpeg differ diff --git a/WindowsForms/clock/Overview_images/Overview_img19.jpeg b/WindowsForms/clock/Overview_images/Overview_img19.jpeg new file mode 100644 index 000000000..513786a9f Binary files /dev/null and b/WindowsForms/clock/Overview_images/Overview_img19.jpeg differ diff --git a/WindowsForms/clock/Overview_images/Overview_img2.jpeg b/WindowsForms/clock/Overview_images/Overview_img2.jpeg new file mode 100644 index 000000000..afaee1851 Binary files /dev/null and b/WindowsForms/clock/Overview_images/Overview_img2.jpeg differ diff --git a/WindowsForms/clock/Overview_images/Overview_img20.jpeg b/WindowsForms/clock/Overview_images/Overview_img20.jpeg new file mode 100644 index 000000000..e09cf9f82 Binary files /dev/null and b/WindowsForms/clock/Overview_images/Overview_img20.jpeg differ diff --git a/WindowsForms/clock/Overview_images/Overview_img21.jpeg b/WindowsForms/clock/Overview_images/Overview_img21.jpeg new file mode 100644 index 000000000..59fe5a06c Binary files /dev/null and b/WindowsForms/clock/Overview_images/Overview_img21.jpeg differ diff --git a/WindowsForms/clock/Overview_images/Overview_img22.jpeg b/WindowsForms/clock/Overview_images/Overview_img22.jpeg new file mode 100644 index 000000000..5fc2775c7 Binary files /dev/null and b/WindowsForms/clock/Overview_images/Overview_img22.jpeg differ diff --git a/WindowsForms/clock/Overview_images/Overview_img23.jpeg b/WindowsForms/clock/Overview_images/Overview_img23.jpeg new file mode 100644 index 000000000..4ec8c4d26 Binary files /dev/null and b/WindowsForms/clock/Overview_images/Overview_img23.jpeg differ diff --git a/WindowsForms/clock/Overview_images/Overview_img24.jpeg b/WindowsForms/clock/Overview_images/Overview_img24.jpeg new file mode 100644 index 000000000..c94b7753a Binary files /dev/null and b/WindowsForms/clock/Overview_images/Overview_img24.jpeg differ diff --git a/WindowsForms/clock/Overview_images/Overview_img25.jpeg b/WindowsForms/clock/Overview_images/Overview_img25.jpeg new file mode 100644 index 000000000..f180deba0 Binary files /dev/null and b/WindowsForms/clock/Overview_images/Overview_img25.jpeg differ diff --git a/WindowsForms/clock/Overview_images/Overview_img26.jpeg b/WindowsForms/clock/Overview_images/Overview_img26.jpeg new file mode 100644 index 000000000..eabe58f78 Binary files /dev/null and b/WindowsForms/clock/Overview_images/Overview_img26.jpeg differ diff --git a/WindowsForms/clock/Overview_images/Overview_img27.jpeg b/WindowsForms/clock/Overview_images/Overview_img27.jpeg new file mode 100644 index 000000000..1602c2116 Binary files /dev/null and b/WindowsForms/clock/Overview_images/Overview_img27.jpeg differ diff --git a/WindowsForms/clock/Overview_images/Overview_img28.jpeg b/WindowsForms/clock/Overview_images/Overview_img28.jpeg new file mode 100644 index 000000000..a925fc80e Binary files /dev/null and b/WindowsForms/clock/Overview_images/Overview_img28.jpeg differ diff --git a/WindowsForms/clock/Overview_images/Overview_img29.png b/WindowsForms/clock/Overview_images/Overview_img29.png new file mode 100644 index 000000000..af088c874 Binary files /dev/null and b/WindowsForms/clock/Overview_images/Overview_img29.png differ diff --git a/WindowsForms/clock/Overview_images/Overview_img3.jpeg b/WindowsForms/clock/Overview_images/Overview_img3.jpeg new file mode 100644 index 000000000..f44bc99a4 Binary files /dev/null and b/WindowsForms/clock/Overview_images/Overview_img3.jpeg differ diff --git a/WindowsForms/clock/Overview_images/Overview_img30.jpeg b/WindowsForms/clock/Overview_images/Overview_img30.jpeg new file mode 100644 index 000000000..f9edc316a Binary files /dev/null and b/WindowsForms/clock/Overview_images/Overview_img30.jpeg differ diff --git a/WindowsForms/clock/Overview_images/Overview_img31.jpeg b/WindowsForms/clock/Overview_images/Overview_img31.jpeg new file mode 100644 index 000000000..5c4e55962 Binary files /dev/null and b/WindowsForms/clock/Overview_images/Overview_img31.jpeg differ diff --git a/WindowsForms/clock/Overview_images/Overview_img32.jpeg b/WindowsForms/clock/Overview_images/Overview_img32.jpeg new file mode 100644 index 000000000..7b3c31ad8 Binary files /dev/null and b/WindowsForms/clock/Overview_images/Overview_img32.jpeg differ diff --git a/WindowsForms/clock/Overview_images/Overview_img33.jpeg b/WindowsForms/clock/Overview_images/Overview_img33.jpeg new file mode 100644 index 000000000..be5788096 Binary files /dev/null and b/WindowsForms/clock/Overview_images/Overview_img33.jpeg differ diff --git a/WindowsForms/clock/Overview_images/Overview_img34.jpeg b/WindowsForms/clock/Overview_images/Overview_img34.jpeg new file mode 100644 index 000000000..be5788096 Binary files /dev/null and b/WindowsForms/clock/Overview_images/Overview_img34.jpeg differ diff --git a/WindowsForms/clock/Overview_images/Overview_img35.jpeg b/WindowsForms/clock/Overview_images/Overview_img35.jpeg new file mode 100644 index 000000000..a8f1711b5 Binary files /dev/null and b/WindowsForms/clock/Overview_images/Overview_img35.jpeg differ diff --git a/WindowsForms/clock/Overview_images/Overview_img36.jpeg b/WindowsForms/clock/Overview_images/Overview_img36.jpeg new file mode 100644 index 000000000..894190f0c Binary files /dev/null and b/WindowsForms/clock/Overview_images/Overview_img36.jpeg differ diff --git a/WindowsForms/clock/Overview_images/Overview_img37.jpeg b/WindowsForms/clock/Overview_images/Overview_img37.jpeg new file mode 100644 index 000000000..f1d41b9fe Binary files /dev/null and b/WindowsForms/clock/Overview_images/Overview_img37.jpeg differ diff --git a/WindowsForms/clock/Overview_images/Overview_img38.jpeg b/WindowsForms/clock/Overview_images/Overview_img38.jpeg new file mode 100644 index 000000000..1695f58be Binary files /dev/null and b/WindowsForms/clock/Overview_images/Overview_img38.jpeg differ diff --git a/WindowsForms/clock/Overview_images/Overview_img39.jpeg b/WindowsForms/clock/Overview_images/Overview_img39.jpeg new file mode 100644 index 000000000..a51d766e0 Binary files /dev/null and b/WindowsForms/clock/Overview_images/Overview_img39.jpeg differ diff --git a/WindowsForms/clock/Overview_images/Overview_img4.jpeg b/WindowsForms/clock/Overview_images/Overview_img4.jpeg new file mode 100644 index 000000000..c71bbbda4 Binary files /dev/null and b/WindowsForms/clock/Overview_images/Overview_img4.jpeg differ diff --git a/WindowsForms/clock/Overview_images/Overview_img40.jpeg b/WindowsForms/clock/Overview_images/Overview_img40.jpeg new file mode 100644 index 000000000..02fbc7af8 Binary files /dev/null and b/WindowsForms/clock/Overview_images/Overview_img40.jpeg differ diff --git a/WindowsForms/clock/Overview_images/Overview_img41.jpeg b/WindowsForms/clock/Overview_images/Overview_img41.jpeg new file mode 100644 index 000000000..b5edb468a Binary files /dev/null and b/WindowsForms/clock/Overview_images/Overview_img41.jpeg differ diff --git a/WindowsForms/clock/Overview_images/Overview_img42.jpeg b/WindowsForms/clock/Overview_images/Overview_img42.jpeg new file mode 100644 index 000000000..87b87e11f Binary files /dev/null and b/WindowsForms/clock/Overview_images/Overview_img42.jpeg differ diff --git a/WindowsForms/clock/Overview_images/Overview_img43.jpeg b/WindowsForms/clock/Overview_images/Overview_img43.jpeg new file mode 100644 index 000000000..8d58387e0 Binary files /dev/null and b/WindowsForms/clock/Overview_images/Overview_img43.jpeg differ diff --git a/WindowsForms/clock/Overview_images/Overview_img44.jpeg b/WindowsForms/clock/Overview_images/Overview_img44.jpeg new file mode 100644 index 000000000..75f8f5e43 Binary files /dev/null and b/WindowsForms/clock/Overview_images/Overview_img44.jpeg differ diff --git a/WindowsForms/clock/Overview_images/Overview_img45.jpeg b/WindowsForms/clock/Overview_images/Overview_img45.jpeg new file mode 100644 index 000000000..47ba07b6d Binary files /dev/null and b/WindowsForms/clock/Overview_images/Overview_img45.jpeg differ diff --git a/WindowsForms/clock/Overview_images/Overview_img46.jpeg b/WindowsForms/clock/Overview_images/Overview_img46.jpeg new file mode 100644 index 000000000..7247310a1 Binary files /dev/null and b/WindowsForms/clock/Overview_images/Overview_img46.jpeg differ diff --git a/WindowsForms/clock/Overview_images/Overview_img47.jpeg b/WindowsForms/clock/Overview_images/Overview_img47.jpeg new file mode 100644 index 000000000..14f57836c Binary files /dev/null and b/WindowsForms/clock/Overview_images/Overview_img47.jpeg differ diff --git a/WindowsForms/clock/Overview_images/Overview_img48.jpeg b/WindowsForms/clock/Overview_images/Overview_img48.jpeg new file mode 100644 index 000000000..14f57836c Binary files /dev/null and b/WindowsForms/clock/Overview_images/Overview_img48.jpeg differ diff --git a/WindowsForms/clock/Overview_images/Overview_img49.jpeg b/WindowsForms/clock/Overview_images/Overview_img49.jpeg new file mode 100644 index 000000000..eabe58f78 Binary files /dev/null and b/WindowsForms/clock/Overview_images/Overview_img49.jpeg differ diff --git a/WindowsForms/clock/Overview_images/Overview_img5.jpeg b/WindowsForms/clock/Overview_images/Overview_img5.jpeg new file mode 100644 index 000000000..5a451efcb Binary files /dev/null and b/WindowsForms/clock/Overview_images/Overview_img5.jpeg differ diff --git a/WindowsForms/clock/Overview_images/Overview_img50.jpeg b/WindowsForms/clock/Overview_images/Overview_img50.jpeg new file mode 100644 index 000000000..894190f0c Binary files /dev/null and b/WindowsForms/clock/Overview_images/Overview_img50.jpeg differ diff --git a/WindowsForms/clock/Overview_images/Overview_img51.jpeg b/WindowsForms/clock/Overview_images/Overview_img51.jpeg new file mode 100644 index 000000000..eabe58f78 Binary files /dev/null and b/WindowsForms/clock/Overview_images/Overview_img51.jpeg differ diff --git a/WindowsForms/clock/Overview_images/Overview_img52.jpeg b/WindowsForms/clock/Overview_images/Overview_img52.jpeg new file mode 100644 index 000000000..fee3e6b35 Binary files /dev/null and b/WindowsForms/clock/Overview_images/Overview_img52.jpeg differ diff --git a/WindowsForms/clock/Overview_images/Overview_img53.jpeg b/WindowsForms/clock/Overview_images/Overview_img53.jpeg new file mode 100644 index 000000000..d2c786067 Binary files /dev/null and b/WindowsForms/clock/Overview_images/Overview_img53.jpeg differ diff --git a/WindowsForms/clock/Overview_images/Overview_img54.jpeg b/WindowsForms/clock/Overview_images/Overview_img54.jpeg new file mode 100644 index 000000000..eabe58f78 Binary files /dev/null and b/WindowsForms/clock/Overview_images/Overview_img54.jpeg differ diff --git a/WindowsForms/clock/Overview_images/Overview_img55.jpeg b/WindowsForms/clock/Overview_images/Overview_img55.jpeg new file mode 100644 index 000000000..eabe58f78 Binary files /dev/null and b/WindowsForms/clock/Overview_images/Overview_img55.jpeg differ diff --git a/WindowsForms/clock/Overview_images/Overview_img56.jpeg b/WindowsForms/clock/Overview_images/Overview_img56.jpeg new file mode 100644 index 000000000..cad80a62a Binary files /dev/null and b/WindowsForms/clock/Overview_images/Overview_img56.jpeg differ diff --git a/WindowsForms/clock/Overview_images/Overview_img57.jpeg b/WindowsForms/clock/Overview_images/Overview_img57.jpeg new file mode 100644 index 000000000..1695f58be Binary files /dev/null and b/WindowsForms/clock/Overview_images/Overview_img57.jpeg differ diff --git a/WindowsForms/clock/Overview_images/Overview_img58.jpeg b/WindowsForms/clock/Overview_images/Overview_img58.jpeg new file mode 100644 index 000000000..050414d3c Binary files /dev/null and b/WindowsForms/clock/Overview_images/Overview_img58.jpeg differ diff --git a/WindowsForms/clock/Overview_images/Overview_img59.jpeg b/WindowsForms/clock/Overview_images/Overview_img59.jpeg new file mode 100644 index 000000000..b230a4e64 Binary files /dev/null and b/WindowsForms/clock/Overview_images/Overview_img59.jpeg differ diff --git a/WindowsForms/clock/Overview_images/Overview_img6.jpeg b/WindowsForms/clock/Overview_images/Overview_img6.jpeg new file mode 100644 index 000000000..fa380d15c Binary files /dev/null and b/WindowsForms/clock/Overview_images/Overview_img6.jpeg differ diff --git a/WindowsForms/clock/Overview_images/Overview_img60.jpeg b/WindowsForms/clock/Overview_images/Overview_img60.jpeg new file mode 100644 index 000000000..45880bb92 Binary files /dev/null and b/WindowsForms/clock/Overview_images/Overview_img60.jpeg differ diff --git a/WindowsForms/clock/Overview_images/Overview_img61.jpeg b/WindowsForms/clock/Overview_images/Overview_img61.jpeg new file mode 100644 index 000000000..6bf4c1a6b Binary files /dev/null and b/WindowsForms/clock/Overview_images/Overview_img61.jpeg differ diff --git a/WindowsForms/clock/Overview_images/Overview_img62.jpeg b/WindowsForms/clock/Overview_images/Overview_img62.jpeg new file mode 100644 index 000000000..a6ce654d8 Binary files /dev/null and b/WindowsForms/clock/Overview_images/Overview_img62.jpeg differ diff --git a/WindowsForms/clock/Overview_images/Overview_img63.jpeg b/WindowsForms/clock/Overview_images/Overview_img63.jpeg new file mode 100644 index 000000000..f5a60bd9a Binary files /dev/null and b/WindowsForms/clock/Overview_images/Overview_img63.jpeg differ diff --git a/WindowsForms/clock/Overview_images/Overview_img64.jpeg b/WindowsForms/clock/Overview_images/Overview_img64.jpeg new file mode 100644 index 000000000..3c3e684f1 Binary files /dev/null and b/WindowsForms/clock/Overview_images/Overview_img64.jpeg differ diff --git a/WindowsForms/clock/Overview_images/Overview_img65.png b/WindowsForms/clock/Overview_images/Overview_img65.png new file mode 100644 index 000000000..09dcd2d43 Binary files /dev/null and b/WindowsForms/clock/Overview_images/Overview_img65.png differ diff --git a/WindowsForms/clock/Overview_images/Overview_img66.jpeg b/WindowsForms/clock/Overview_images/Overview_img66.jpeg new file mode 100644 index 000000000..e16268c5b Binary files /dev/null and b/WindowsForms/clock/Overview_images/Overview_img66.jpeg differ diff --git a/WindowsForms/clock/Overview_images/Overview_img67.jpeg b/WindowsForms/clock/Overview_images/Overview_img67.jpeg new file mode 100644 index 000000000..eabe58f78 Binary files /dev/null and b/WindowsForms/clock/Overview_images/Overview_img67.jpeg differ diff --git a/WindowsForms/clock/Overview_images/Overview_img68.jpeg b/WindowsForms/clock/Overview_images/Overview_img68.jpeg new file mode 100644 index 000000000..ac3cd7f28 Binary files /dev/null and b/WindowsForms/clock/Overview_images/Overview_img68.jpeg differ diff --git a/WindowsForms/clock/Overview_images/Overview_img69.jpeg b/WindowsForms/clock/Overview_images/Overview_img69.jpeg new file mode 100644 index 000000000..eabe58f78 Binary files /dev/null and b/WindowsForms/clock/Overview_images/Overview_img69.jpeg differ diff --git a/WindowsForms/clock/Overview_images/Overview_img7.jpeg b/WindowsForms/clock/Overview_images/Overview_img7.jpeg new file mode 100644 index 000000000..eabe58f78 Binary files /dev/null and b/WindowsForms/clock/Overview_images/Overview_img7.jpeg differ diff --git a/WindowsForms/clock/Overview_images/Overview_img70.jpeg b/WindowsForms/clock/Overview_images/Overview_img70.jpeg new file mode 100644 index 000000000..ab380a1ad Binary files /dev/null and b/WindowsForms/clock/Overview_images/Overview_img70.jpeg differ diff --git a/WindowsForms/clock/Overview_images/Overview_img71.jpeg b/WindowsForms/clock/Overview_images/Overview_img71.jpeg new file mode 100644 index 000000000..70fe63990 Binary files /dev/null and b/WindowsForms/clock/Overview_images/Overview_img71.jpeg differ diff --git a/WindowsForms/clock/Overview_images/Overview_img72.jpeg b/WindowsForms/clock/Overview_images/Overview_img72.jpeg new file mode 100644 index 000000000..6839e33d1 Binary files /dev/null and b/WindowsForms/clock/Overview_images/Overview_img72.jpeg differ diff --git a/WindowsForms/clock/Overview_images/Overview_img73.jpeg b/WindowsForms/clock/Overview_images/Overview_img73.jpeg new file mode 100644 index 000000000..905c95c6c Binary files /dev/null and b/WindowsForms/clock/Overview_images/Overview_img73.jpeg differ diff --git a/WindowsForms/clock/Overview_images/Overview_img74.jpeg b/WindowsForms/clock/Overview_images/Overview_img74.jpeg new file mode 100644 index 000000000..5973e59b6 Binary files /dev/null and b/WindowsForms/clock/Overview_images/Overview_img74.jpeg differ diff --git a/WindowsForms/clock/Overview_images/Overview_img75.jpeg b/WindowsForms/clock/Overview_images/Overview_img75.jpeg new file mode 100644 index 000000000..eabe58f78 Binary files /dev/null and b/WindowsForms/clock/Overview_images/Overview_img75.jpeg differ diff --git a/WindowsForms/clock/Overview_images/Overview_img76.jpeg b/WindowsForms/clock/Overview_images/Overview_img76.jpeg new file mode 100644 index 000000000..ef68b6d01 Binary files /dev/null and b/WindowsForms/clock/Overview_images/Overview_img76.jpeg differ diff --git a/WindowsForms/clock/Overview_images/Overview_img77.png b/WindowsForms/clock/Overview_images/Overview_img77.png new file mode 100644 index 000000000..4b082a98c Binary files /dev/null and b/WindowsForms/clock/Overview_images/Overview_img77.png differ diff --git a/WindowsForms/clock/Overview_images/Overview_img78.png b/WindowsForms/clock/Overview_images/Overview_img78.png new file mode 100644 index 000000000..df5142c8a Binary files /dev/null and b/WindowsForms/clock/Overview_images/Overview_img78.png differ diff --git a/WindowsForms/clock/Overview_images/Overview_img79.jpeg b/WindowsForms/clock/Overview_images/Overview_img79.jpeg new file mode 100644 index 000000000..2334d31f7 Binary files /dev/null and b/WindowsForms/clock/Overview_images/Overview_img79.jpeg differ diff --git a/WindowsForms/clock/Overview_images/Overview_img8.jpeg b/WindowsForms/clock/Overview_images/Overview_img8.jpeg new file mode 100644 index 000000000..9840ae84c Binary files /dev/null and b/WindowsForms/clock/Overview_images/Overview_img8.jpeg differ diff --git a/WindowsForms/clock/Overview_images/Overview_img80.jpeg b/WindowsForms/clock/Overview_images/Overview_img80.jpeg new file mode 100644 index 000000000..5fe29b4b0 Binary files /dev/null and b/WindowsForms/clock/Overview_images/Overview_img80.jpeg differ diff --git a/WindowsForms/clock/Overview_images/Overview_img81.jpeg b/WindowsForms/clock/Overview_images/Overview_img81.jpeg new file mode 100644 index 000000000..711a78013 Binary files /dev/null and b/WindowsForms/clock/Overview_images/Overview_img81.jpeg differ diff --git a/WindowsForms/clock/Overview_images/Overview_img82.jpeg b/WindowsForms/clock/Overview_images/Overview_img82.jpeg new file mode 100644 index 000000000..05217bb06 Binary files /dev/null and b/WindowsForms/clock/Overview_images/Overview_img82.jpeg differ diff --git a/WindowsForms/clock/Overview_images/Overview_img83.jpeg b/WindowsForms/clock/Overview_images/Overview_img83.jpeg new file mode 100644 index 000000000..bc9d4a6f3 Binary files /dev/null and b/WindowsForms/clock/Overview_images/Overview_img83.jpeg differ diff --git a/WindowsForms/clock/Overview_images/Overview_img84.jpeg b/WindowsForms/clock/Overview_images/Overview_img84.jpeg new file mode 100644 index 000000000..fa2435c25 Binary files /dev/null and b/WindowsForms/clock/Overview_images/Overview_img84.jpeg differ diff --git a/WindowsForms/clock/Overview_images/Overview_img85.jpeg b/WindowsForms/clock/Overview_images/Overview_img85.jpeg new file mode 100644 index 000000000..eabe58f78 Binary files /dev/null and b/WindowsForms/clock/Overview_images/Overview_img85.jpeg differ diff --git a/WindowsForms/clock/Overview_images/Overview_img86.jpeg b/WindowsForms/clock/Overview_images/Overview_img86.jpeg new file mode 100644 index 000000000..8a64752d4 Binary files /dev/null and b/WindowsForms/clock/Overview_images/Overview_img86.jpeg differ diff --git a/WindowsForms/clock/Overview_images/Overview_img87.jpeg b/WindowsForms/clock/Overview_images/Overview_img87.jpeg new file mode 100644 index 000000000..eabe58f78 Binary files /dev/null and b/WindowsForms/clock/Overview_images/Overview_img87.jpeg differ diff --git a/WindowsForms/clock/Overview_images/Overview_img88.jpeg b/WindowsForms/clock/Overview_images/Overview_img88.jpeg new file mode 100644 index 000000000..28e261574 Binary files /dev/null and b/WindowsForms/clock/Overview_images/Overview_img88.jpeg differ diff --git a/WindowsForms/clock/Overview_images/Overview_img89.jpeg b/WindowsForms/clock/Overview_images/Overview_img89.jpeg new file mode 100644 index 000000000..eabe58f78 Binary files /dev/null and b/WindowsForms/clock/Overview_images/Overview_img89.jpeg differ diff --git a/WindowsForms/clock/Overview_images/Overview_img9.jpeg b/WindowsForms/clock/Overview_images/Overview_img9.jpeg new file mode 100644 index 000000000..109876f6b Binary files /dev/null and b/WindowsForms/clock/Overview_images/Overview_img9.jpeg differ diff --git a/WindowsForms/clock/Overview_images/Overview_img90.jpeg b/WindowsForms/clock/Overview_images/Overview_img90.jpeg new file mode 100644 index 000000000..eabe58f78 Binary files /dev/null and b/WindowsForms/clock/Overview_images/Overview_img90.jpeg differ diff --git a/WindowsForms/clock/Overview_images/Overview_img91.jpeg b/WindowsForms/clock/Overview_images/Overview_img91.jpeg new file mode 100644 index 000000000..616391a33 Binary files /dev/null and b/WindowsForms/clock/Overview_images/Overview_img91.jpeg differ diff --git a/WindowsForms/clock/Overview_images/Overview_img92.jpeg b/WindowsForms/clock/Overview_images/Overview_img92.jpeg new file mode 100644 index 000000000..1cc5db9cb Binary files /dev/null and b/WindowsForms/clock/Overview_images/Overview_img92.jpeg differ diff --git a/WindowsForms/clock/Overview_images/Overview_img93.jpeg b/WindowsForms/clock/Overview_images/Overview_img93.jpeg new file mode 100644 index 000000000..aa3914e06 Binary files /dev/null and b/WindowsForms/clock/Overview_images/Overview_img93.jpeg differ diff --git a/WindowsForms/clock/Overview_images/Overview_img94.png b/WindowsForms/clock/Overview_images/Overview_img94.png new file mode 100644 index 000000000..d43abe54c Binary files /dev/null and b/WindowsForms/clock/Overview_images/Overview_img94.png differ diff --git a/WindowsForms/clock/Overview_images/Overview_img95.png b/WindowsForms/clock/Overview_images/Overview_img95.png new file mode 100644 index 000000000..a19f2936b Binary files /dev/null and b/WindowsForms/clock/Overview_images/Overview_img95.png differ diff --git a/WindowsForms/clock/Overview_images/Overview_img96.png b/WindowsForms/clock/Overview_images/Overview_img96.png new file mode 100644 index 000000000..893fba961 Binary files /dev/null and b/WindowsForms/clock/Overview_images/Overview_img96.png differ diff --git a/WindowsForms/clock/Overview_images/Overview_img97.png b/WindowsForms/clock/Overview_images/Overview_img97.png new file mode 100644 index 000000000..e70d2c7dc Binary files /dev/null and b/WindowsForms/clock/Overview_images/Overview_img97.png differ diff --git a/WindowsForms/clock/Overview_images/Overview_img98.png b/WindowsForms/clock/Overview_images/Overview_img98.png new file mode 100644 index 000000000..273c61673 Binary files /dev/null and b/WindowsForms/clock/Overview_images/Overview_img98.png differ diff --git a/WindowsForms/clock/Overview_images/Overview_img99.png b/WindowsForms/clock/Overview_images/Overview_img99.png new file mode 100644 index 000000000..552a0e2f1 Binary files /dev/null and b/WindowsForms/clock/Overview_images/Overview_img99.png differ diff --git a/WindowsForms/clock/getting-started_images/windowsforms-analog-clock.png b/WindowsForms/clock/getting-started_images/windowsforms-analog-clock.png new file mode 100644 index 000000000..f6a600c15 Binary files /dev/null and b/WindowsForms/clock/getting-started_images/windowsforms-analog-clock.png differ diff --git a/WindowsForms/clock/getting-started_images/windowsforms-clock-control-added-by-code.png b/WindowsForms/clock/getting-started_images/windowsforms-clock-control-added-by-code.png new file mode 100644 index 000000000..728c12bf4 Binary files /dev/null and b/WindowsForms/clock/getting-started_images/windowsforms-clock-control-added-by-code.png differ diff --git a/WindowsForms/clock/getting-started_images/windowsforms-clock-control-added-by-designer.png b/WindowsForms/clock/getting-started_images/windowsforms-clock-control-added-by-designer.png new file mode 100644 index 000000000..fbc30ed6f Binary files /dev/null and b/WindowsForms/clock/getting-started_images/windowsforms-clock-control-added-by-designer.png differ diff --git a/WindowsForms/clock/getting-started_images/windowsforms-clock-custom-time.png b/WindowsForms/clock/getting-started_images/windowsforms-clock-custom-time.png new file mode 100644 index 000000000..4795a43a9 Binary files /dev/null and b/WindowsForms/clock/getting-started_images/windowsforms-clock-custom-time.png differ diff --git a/WindowsForms/clock/getting-started_images/windowsforms-digital-clock.png b/WindowsForms/clock/getting-started_images/windowsforms-digital-clock.png new file mode 100644 index 000000000..a5ffd1628 Binary files /dev/null and b/WindowsForms/clock/getting-started_images/windowsforms-digital-clock.png differ diff --git a/WindowsForms/clock/overview_images/windowsforms-clock-overview.png b/WindowsForms/clock/overview_images/windowsforms-clock-overview.png new file mode 100644 index 000000000..03e347348 Binary files /dev/null and b/WindowsForms/clock/overview_images/windowsforms-clock-overview.png differ diff --git a/WindowsForms/prompt-library.md b/WindowsForms/prompt-library.md new file mode 100644 index 000000000..e4a28eb85 --- /dev/null +++ b/WindowsForms/prompt-library.md @@ -0,0 +1,203 @@ +--- +layout: post +title: Syncfusion AI Coding Assistants Tools Prompt Library | Syncfusion +description: Explore the AI Coding Assistants Tools Prompt Library to boost WinForms productivity with code generation, configuration examples, and contextual guidance. +control: Syncfusion AI Coding Assistants Tools Prompt Library +platform: WindowsForms +documentation: ug +domainurl: ##DomainURL## +--- + +# Prompt Library for Syncfusion AI Coding Assistants Tools + +Speed up WinForms development using these ready-made prompts for popular Syncfusion components. Each prompt is short, easy to understand, and focused on real tasks—like quick setups, tweaks, and fixes. + +## How to use + +These prompts can be used with the MCP server or agent skills to streamline your development workflows. + +* Choose a prompt that fits your needs. +* Customize the prompt as needed before running it. +* Run the prompt using either of the following AI tools: + * **MCP Server**: Tool can start automatically based on the query, or can be invoked explicitly using `#search_docs`. + * **Skills**: Skills can also run automatically based on the query, or can be called explicitly using the `/syncfusion-winforms-grid` skill. +* Always review and test the generated code before adding it to the project. + +## Component-specific Prompts + +### Grid + +The Syncfusion WinForms Data Grid delivers fast, flexible tables for large datasets with built-in interactivity. + +{% promptcards %} +{% promptcard Paging and Sorting %} +How do I enable paging and sorting in the Syncfusion WinForms Grid? +{% endpromptcard %} +{% promptcard Grouping and Filtering %} +Show me an example of grouping and filtering data in the Grid component. +{% endpromptcard %} +{% promptcard CRUD Operations %} +What's the code to implement full CRUD operations in Syncfusion WinForms Grid? +{% endpromptcard %} +{% promptcard Grid Export to PDF and Excel %} +How can I add PDF and Excel export options to the Grid toolbar? +{% endpromptcard %} +{% promptcard Virtual Scrolling %} +How do I configure virtual scrolling for large datasets in the Grid? +{% endpromptcard %} +{% promptcard Multicolumn Grid Setup %} +Create a multicolumn Grid to display product details with sorting and filtering. +{% endpromptcard %} +{% promptcard Chat Integration %} +How can I integrate a chat widget inside each row of the Syncfusion Grid? +{% endpromptcard %} +{% promptcard Advanced Grid Features %} +Show me a Grid with paging, sorting, grouping, filtering, and virtual scrolling. +{% endpromptcard %} +{% promptcard Troubleshooting Grid Export %} +Why isn't my Grid exporting to PDF and Excel correctly? +{% endpromptcard %} +{% promptcard Inline Editing %} +How do I enable inline editing for CRUD operations in the Grid? +{% endpromptcard %} +{% promptcard Custom Toolbar %} +Add custom toolbar buttons for PDF and Excel export in the Grid. +{% endpromptcard %} +{% promptcard Dynamic Column Configuration %} +How can I dynamically configure multicolumn layout with filtering and sorting? +{% endpromptcard %} +{% endpromptcards %} + +### Chart + +The Syncfusion WinForms Chart suite offers versatile visualization tools across various series types for insightful data representation. + +{% promptcards %} +{% promptcard Local and Remote Data %} +How do I bind both local and remote data sources to a Syncfusion Chart? +{% endpromptcard %} +{% promptcard Range Selection %} +Show me how to enable range selection in a Syncfusion WinForms Chart. +{% endpromptcard %} +{% promptcard Chart Types Overview %} +What chart types are available in Syncfusion WinForms Chart, and how do I configure them? +{% endpromptcard %} +{% promptcard Markers and Data Labels %} +How can I display markers and data labels on a line chart? +{% endpromptcard %} +{% promptcard Annotations %} +Add custom annotations to highlight specific data points in a chart. +{% endpromptcard %} +{% promptcard Chart Export to Image or PDF %} +How do I export a Syncfusion Chart to PDF or image format? +{% endpromptcard %} +{% promptcard Print Support %} +Enable print functionality for a Syncfusion WinForms Chart component. +{% endpromptcard %} +{% promptcard Dynamic Chart with Remote Data %} +Create a chart that updates dynamically with remote API data. +{% endpromptcard %} +{% promptcard Multiple Series Types %} +How do I combine bar and line chart types in a single Syncfusion Chart? +{% endpromptcard %} +{% promptcard Troubleshooting Chart Data Binding %} +Why isn't my remote data showing up in the Syncfusion Chart? +{% endpromptcard %} +{% promptcard Interactive Range Selector %} +Configure a range selector for zooming and filtering in a time-series chart. +{% endpromptcard %} +{% promptcard Custom Markers and Labels %} +Show me an example of customizing chart markers and data label styles. +{% endpromptcard %} +{% endpromptcards %} + +### Schedule + +The Syncfusion WinForms Schedule component helps manage events, resources, and timelines with powerful views and customization. + +{% promptcards %} +{% promptcard Module Injection %} +How do I inject required modules into the Syncfusion WinForms Schedule component? +{% endpromptcard %} +{% promptcard Remote Data Binding %} +Bind the Schedule component to a remote API for dynamic event loading. +{% endpromptcard %} +{% promptcard CRUD Actions %} +Show me how to implement full CRUD operations in the Schedule component. +{% endpromptcard %} +{% promptcard Virtual Scrolling %} +Enable virtual scrolling for large event datasets in the Schedule view. +{% endpromptcard %} +{% promptcard Timezone Support %} +How can I configure timezone support in the Syncfusion WinForms Schedule? +{% endpromptcard %} +{% promptcard Export Schedule to PDF or Excel %} +Add export functionality to download the Schedule view as PDF or Excel. +{% endpromptcard %} +{% promptcard Timeline Header Rows %} +How do I customize timeline header rows in the Schedule component? +{% endpromptcard %} +{% promptcard Multiple Module Injection %} +Inject multiple modules like Day, Week, and Timeline views into the Schedule component. +{% endpromptcard %} +{% promptcard Troubleshooting Schedule CRUD %} +Why aren't my CRUD actions working correctly in the Schedule component? +{% endpromptcard %} +{% promptcard Local and Remote Data %} +Bind both local and remote event data to the Schedule component. +{% endpromptcard %} +{% promptcard Export and Timezone %} +Configure timezone-aware exporting for the Schedule view. +{% endpromptcard %} +{% promptcard Advanced Schedule Setup %} +Create a Schedule with module injection, CRUD, virtual scrolling, and exporting. +{% endpromptcard %} +{% endpromptcards %} + +### Calendar + +The Syncfusion WinForms Calendar supports flexible date selection, localization, and custom rendering. + +{% promptcards %} +{% promptcard Date Range Selection %} +How do I enable date range selection in the Syncfusion WinForms Calendar? +{% endpromptcard %} +{% promptcard Globalization Support %} +Configure the Calendar to support multiple cultures and languages. +{% endpromptcard %} +{% promptcard Multi-Date Selection %} +Show me how to allow users to select multiple dates in the Calendar. +{% endpromptcard %} +{% promptcard Islamic Calendar Support %} +How can I switch the Calendar to use the Islamic calendar system? +{% endpromptcard %} +{% promptcard Skip Months Feature %} +Enable skipping months in the Calendar navigation for faster browsing. +{% endpromptcard %} +{% promptcard Calendar Showing Other Month Days %} +How do I show days from adjacent months in the current Calendar view? +{% endpromptcard %} +{% promptcard Custom Day Cell Format %} +Customize the day cell format in the Calendar to show short weekday names. +{% endpromptcard %} +{% promptcard Calendar Highlighting Weekends %} +Highlight weekends in the Calendar with a different background color. +{% endpromptcard %} +{% promptcard Globalization and Islamic Calendar %} +Configure the Calendar for Arabic culture using the Islamic calendar and localization. +{% endpromptcard %} +{% promptcard Multi-Selection and Range %} +Enable both multi-date selection and range selection in the Calendar. +{% endpromptcard %} +{% promptcard Troubleshooting Calendar Date Range %} +Why isn't my Calendar selecting the correct date range? +{% endpromptcard %} +{% promptcard Advanced Calendar Setup %} +Create a Calendar with date range, multi-selection, globalization, and weekend highlights. +{% endpromptcard %} +{% endpromptcards %} + +## See also + +* [Skills](https://help.syncfusion.com/windowsforms/skills) +* [MCP Server](https://help.syncfusion.com/windowsforms/ai-coding-assistant/mcp-server) \ No newline at end of file diff --git a/WindowsForms/skills/component-skills.md b/WindowsForms/skills/component-skills.md new file mode 100644 index 000000000..b62bffa66 --- /dev/null +++ b/WindowsForms/skills/component-skills.md @@ -0,0 +1,220 @@ +--- +layout: post +title: Syncfusion Windows Forms Agent Skills for AI Assistants | Syncfusion +description: Learn how to install and use Syncfusion Agent Skills to enhance AI assistants with accurate Syncfusion Windows Forms component guidance. +control: Skills +platform: windowsforms +documentation: ug +domainurl: ##DomainURL## +--- + +# Syncfusion Windows Forms Agent Skills for AI Assistants + +This guide introduces **Syncfusion Windows Forms Skills**, a knowledge package that enables AI assistants (Visual Studio Code, Cursor, CodeStudio, etc.) to understand and generate accurate Windows Forms code using official APIs, patterns, and theming guidelines. + +These skills eliminate common issues with generic AI suggestions by grounding the assistant in accurate component usage patterns, API structures, supported features, and project‑specific configuration. + +## Prerequisites + +Before installing Syncfusion® Windows Forms Agent Skills, ensure the following: + +- Required [Node.js](https://nodejs.org/en/) version >= 16 +- Windows Forms application (existing or new); see [Overview](https://help.syncfusion.com/windowsforms/overview) +- A supported AI agent or IDE that integrates with the Skills CLI (Visual Studio Code, Syncfusion® Code Studio, Cursor, etc.) + +## Key Benefits + +**Component Usage & API Knowledge** +- Accurate guidance for adding and configuring Syncfusion® Windows Forms components +- Component‑specific properties, events, and required assemblies +- Guidance for component initialization and designer integration patterns + +**Patterns & Best Practices** +- Recommended API structures and composition patterns for Windows Forms +- Data‑binding approaches for common scenarios +- Feature‑injection workflows (for example, paging, sorting, filtering) +- All guidance is authored directly in Skill files and does not rely on external documentation fetches + +**Design‑System Guidance** +- Theme usage, including light and dark variants +- [VisualStyle](https://help.syncfusion.com/windowsforms/visualstyle) patterns and customization approaches +- Consistent design alignment across Syncfusion® Windows Forms components + +## Installation + +Install [Syncfusion® Windows Forms components skills](https://github.com/syncfusion/winforms-ui-components-skills.git) using the Skills CLI. Users can also explore available skills from the [marketplace](https://www.skills.sh/syncfusion). + +### Install all skills + +Use the following command to install all component skills at once in the `.agents/skills` directory: + +{% tabs %} +{% highlight bash tabtitle="NPM" %} + +npx skills add syncfusion/winforms-ui-components-skills -y + +{% endhighlight %} +{% endtabs %} + +### Install selected skills + +Use the following command to install skills interactively: + +{% tabs %} +{% highlight bash tabtitle="NPM" %} + +npx skills add syncfusion/winforms-ui-components-skills + +{% endhighlight %} +{% endtabs %} + +The terminal will display a list of available skills. Use the **arrow keys** to move between skills, the **space bar** to toggle a skill on or off, and the **Enter** key to confirm. +{% highlight bash tabtitle="CMD" %} + + Select skills to install (space to toggle) +│ ◻ syncfusion-winforms-ai-assistview +│ ◻ syncfusion-winforms-autocomplete +│ ◻ syncfusion-winforms-autolabel +│ ◻ syncfusion-winforms-button +│ ◻ syncfusion-winforms-calculator +│ ◻ syncfusion-winforms-calendar +│ ◻ syncfusion-winforms-chart +│ ◻ syncfusion-winforms-checkbox +│ ◻ syncfusion-winforms-combobox +│ ◻ syncfusion-winforms-datagrid +│ ◻ syncfusion-winforms-datetimepicker +| ..... + +{% endhighlight %} +{% endtabs %} + +Next, select which AI agent you're using and where to store the skills. +{% tabs %} +{% highlight bash tabtitle="CMD" %} + +│ ── Additional agents ───────────────────────────── +│ Search: +│ ↑↓ move, space select, enter confirm +│ +│ ❯ ○ Augment (.augment/skills) +│ ○ Claude Code (.claude/skills) +│ ○ OpenClaw (skills) +│ ○ CodeBuddy (.codebuddy/skills) +│ ○ Command Code (.commandcode/skills) +│ ○ Continue (.continue/skills) +│ ○ Cortex Code (.cortex/skills) +│ ○ Crush (.crush/skills) +| .... + +{% endhighlight %} +{% endtabs %} + +Choose your installation scope (project-level or global), then confirm to complete the installation. + +{% tabs %} +{% highlight bash tabtitle="CMD" %} + +◆ Installation scope +│ ● Project (Install in current directory (committed with your project)) +│ ○ Global + +◆ Proceed with installation? +│ ● Yes / ○ No + +{% endhighlight %} +{% endtabs %} + +This registers the Syncfusion® skill pack so your AI assistant can automatically load it in supported IDEs such as [Code Studio](https://help.syncfusion.com/code-studio/reference/configure-properties/skills), [Visual Studio Code](https://code.visualstudio.com/docs/copilot/customization/agent-skills), and [Cursor](https://cursor.com/docs/skills). After installation, restart your IDE (or use the **Reload Window** command) so the IDE can detect the newly added skill files. + +To learn more about the Skills CLI, refer [here](https://www.skills.sh/docs). + +## How Syncfusion® Agent Skills Work + +1. **Reads relevant Skill files based on queries**, retrieving component usage patterns, APIs, and best‑practice guidance from installed Syncfusion® Skills. The assistant initially loads only skill names and descriptions, then dynamically loads the required skill and reference files as needed to provide accurate Syncfusion guidance. +2. **Enforces Syncfusion® best practices**, including: + + - Using the required assemblies for each component. + - Injecting applicable component controls (for example, paging, sorting, filtering, and other feature controls). + - Adding the correct theme and VisualStyle settings. +3. **Generates component‑accurate code**, avoiding invalid properties or unsupported patterns. + +### Using the AI Assistant + +Once skills are installed, the assistant can be used to generate and update Syncfusion® Windows Forms code for tasks such as: + +- "Add a DataGrid with paging, sorting, and filtering." +- "Create a Schedule control with week view and drag‑drop." + +## Skills CLI Commands + +After installation, manage Syncfusion® Agent Skills using the following commands: + +### List Skills + +View all installed skills in your current project or global environment: + +{% tabs %} +{% highlight bash tabtitle="NPM" %} + +npx skills list + +{% endhighlight %} +{% endtabs %} + +### Remove a Skill + +Uninstall a specific skill from your environment: + +{% tabs %} +{% highlight bash tabtitle="NPM" %} + +npx skills remove + +{% endhighlight %} +{% endtabs %} + +Replace `` with the name of the skill you want to remove (for example, `syncfusion-winforms-datagrid`). + +### Check for Updates + +Check if updates are available for your installed skills: + +{% tabs %} +{% highlight bash tabtitle="NPM" %} + +npx skills check + +{% endhighlight %} +{% endtabs %} + +### Update All Skills + +Update all installed skills to their latest versions: + +{% tabs %} +{% highlight bash tabtitle="NPM" %} + +npx skills update + +{% endhighlight %} +{% endtabs %} + +## FAQ + +**Which agents and IDEs are supported?** + +Any Skills compatible agent or IDE that loads local skill files (Visual Studio Code, Cursor, CodeStudio, etc.). + +**Are skills loaded automatically?** + +Yes. Once installed, supported agents automatically detect and load relevant skills for Syncfusion‑related queries without requiring additional configuration. + +**Skills are not being loaded** + +Verify that skills are installed in the correct agent directory (for example, `.agents/skills/`), confirm with `npx skills list`, restart the IDE (or run the **Reload Window** command), and confirm that the agent supports external skill files. + +## See also + +- [Agent Skills Standards](https://agentskills.io/home) +- [Skills CLI](https://www.skills.sh/docs) +- [VisualStyle](https://help.syncfusion.com/windowsforms/visualstyle) \ No newline at end of file diff --git a/WindowsForms/skills/images/UI-Builder-Agent.png b/WindowsForms/skills/images/UI-Builder-Agent.png new file mode 100644 index 000000000..b7191faa2 Binary files /dev/null and b/WindowsForms/skills/images/UI-Builder-Agent.png differ diff --git a/WindowsForms/skills/ui-builder-skill.md b/WindowsForms/skills/ui-builder-skill.md new file mode 100644 index 000000000..6021eb369 --- /dev/null +++ b/WindowsForms/skills/ui-builder-skill.md @@ -0,0 +1,202 @@ +--- +layout: post +title: Syncfusion® WinForms UI Builder Skill for AI Assistants | Syncfusion® +description: Install Syncfusion® Windows Forms UI Builder to generate production-ready Windows Forms controls from natural-language prompts. +control: Skills +platform: windowsforms +documentation: ug +domainurl: ##DomainURL## +--- + +# Syncfusion® Windows Forms UI Builder Skill for AI Assistants + +**Syncfusion® Windows Forms UI Builder** is an AI-powered skill and companion agent that accelerates Windows Forms application development by transforming natural-language UI requirements into production-ready controls using Syncfusion® Windows Forms libraries. + +Integrated with your AI-powered IDE, it leverages deep knowledge of **Syncfusion® controls** to deliver accurate and ready-to-use code. +By combining intelligent code generation with best practices, accessibility standards, and design-system consistency, Windows Forms UI Builder helps you rapidly build scalable dashboards and user interfaces without leaving your development workflow. + +## Prerequisites + +Before installing Windows Forms UI Builder, ensure the following: + +- Install [APM (Agent Package Manager)](https://microsoft.github.io/apm/getting-started/installation/#quick-install-recommended) +- Required [.NET SDK](https://dotnet.microsoft.com/en-us/download) version ≥ 6 +- Windows Forms application (existing or new); see [Overview](https://help.syncfusion.com/windowsforms/overview) +- A supported AI agent or IDE that integrates with the Skills (VS Code, Cursor, Syncfusion® Code Studio, etc.) +- Active Syncfusion® license(any of the following): + - [Commercial](https://www.syncfusion.com/sales/unlimitedlicense) + - [Community License](https://www.syncfusion.com/products/communitylicense) + - [Free Trial](https://www.syncfusion.com/account/manage-trials/start-trials) + +## Key Benefits + +### **AI-Driven UI Generation** +- Converts prompts into complete Windows Forms components—not just snippets +- Automatically selects appropriate Syncfusion® controls and features +- Produces structured, maintainable C# code + +### **Control Usage & API Accuracy** +- Uses correct Syncfusion® control APIs and properties +- Injects required feature controls and behaviors (paging, sorting, filtering, etc.) +- Ensures proper assembly references and control initialization +- Avoids unsupported or deprecated patterns for Windows Forms + +### **Patterns & Best Practices** +- Recommended control composition and data-binding patterns +- Event handling aligned with Windows Forms standards and designer integration +- Secure and scalable coding patterns with proper resource management +- Designer-friendly code that works in both code-behind and UI designer + +### **Accessibility & Design System** +- Follows Windows accessibility guidelines +- Supports keyboard navigation and accessibility standards +- Theme consistency across desktop applications + +### **Design-System Integration** +- Supports Syncfusion® Windows Forms themes via SkinManager (Office2007, Office2010, Office2013, Office2016, Office2019, Metro, HighContrast) +- SkinManager integration for consistent theming +- Theme Studio support for customizing Office2019Colorful and HighContrastBlack themes +- Ensures consistent Syncfusion® styling across controls + +## Installation + +Before installing WinForms UI Builder, ensure that APM (Agent Package Manager) is installed and available in your environment. + +### Verify APM Installation + +Run the following command to confirm APM is installed: + +```bash +apm --version +``` + +### Install the Syncfusion® Windows Forms UI Builder package using APM + +Use the APM CLI to install the WinForms UI Builder skill for your preferred environment: + +{% tabs %} +{% highlight bash tabtitle="Copilot" %} + +apm install syncfusion/winforms-ui-builder -t copilot + +{% endhighlight %} +{% highlight bash tabtitle="Cursor" %} + +apm install syncfusion/winforms-ui-builder -t cursor + +{% endhighlight %} +{% highlight bash tabtitle="Codex" %} + +apm install syncfusion/winforms-ui-builder -t codex + +{% endhighlight %} +{% highlight bash tabtitle="Claude" %} + +apm install syncfusion/winforms-ui-builder -t claude + +{% endhighlight %} +{% endtabs %} + +After installation, the following artifacts are added to your project for the GitHub Copilot target: + +- `.agent/skills/` – contains the skill files +- `.github/agents/` – contains the agent configuration + +Refer to the [documentation](https://microsoft.github.io/apm/reference/cli/targets/#detection-signals) for details about supported deployment targets. + +> For Syncfusion® Code Studio, use the Copilot command above to install the WinForms UI Builder. + +## How the Syncfusion® Windows Forms UI Builder Skill Works + +1. **Intent Analysis** — Parse the user's prompt to identify control types and high-level form layout intent. +2. **Project Detection** — Automatically detects .NET framework (Framework, Core, or .NET 5+) and existing Syncfusion® configurations. +3. **Control Mapping** — Map intent to Syncfusion® Windows Forms controls and required feature controls. +4. **Theming & Design System** + Load required theming guidelines and confirm key design choices: + - Syncfusion® Windows Forms theme (Office2007, Office2010, Office2013, Office2016, Office2019, Metro, HighContrast) + - Core design basics (colors, fonts, control appearance, DPI awareness) + - Light and dark theme variants per theme family +5. **Code Generation** — Produce C# Windows Forms controls, data bindings, event handlers, and styling. +6. **Dependency Management** — Recommend or install required Syncfusion® NuGet packages and .NET dependencies. +7. **Validation** — Run code compatibility and basic security checks, request confirmation for changes. +8. **Code Insertion** — Create Form classes, user controls, or patch existing files following Windows Forms conventions. + +Key enforcement points: + +- Adds correct SkinManager configuration and theme settings for chosen Syncfusion® themes (loads required theme assemblies) +- Injects only the feature controls and behaviors required by generated controls +- Follows Windows Forms conventions for control naming, initialization, and event handling +- Generates designer-compatible code with proper control hierarchy and parent-child relationships +- Ensures all required Syncfusion® assemblies and theme NuGet packages are referenced and configured +- Avoids unsupported or deprecated API usages for Syncfusion® Windows Forms controls + +> The assistant handles most stages automatically and may request confirmation where required. + +## Using the AI Assistant + +After installing Windows Forms UI Builder with APM, the relevant agent and skill files are added to your project under: + +- `.agents/skills/` (skill files) +- `.github/agents/` (Windows Forms UI builder agent configuration, based on the selected target) + +To start using the skill: + +1. Open your supported IDE. +2. In the chat panel, select the `syncfusion-winforms-ui-builder` agent from the **Agent dropdown**. + +![Set Agent](images/UI-Builder-Agent.png) + +3. Start prompting the agent with a clear description of your UI requirements. + +Examples Prompts: + +{% promptcards %} +{% promptcard Authentication %} +Create a login form using the Office2019Colorful theme with a centered TableLayoutPanel containing email and password TextBox controls with validation. Include a "Remember Me" CheckBox, a forgot password LinkLabel, and a primary login Button. Add a secondary "Create Account" button below. Ensure the form is well-organized and follows Windows Forms best practices with proper SkinManager configuration. +{% endpromptcard %} +{% promptcard Admin Dashboard %} +Create a CMS Admin Dashboard UI featuring a collapsible TreeView in a left panel (docked) with navigation items for Dashboard, Content, Users, Analytics, and Settings; a top StatusBar showing the title "CMS Admin Dashboard" and user name; and a main content area with a SplitContainer containing three compact summary panels in a FlowLayoutPanel displaying Total Content, Total Users, and Active Sessions (each showing a label, count value, and percentage change), followed by a "Content Management" section with a DataGrid containing columns for Title, Author, Status, Date, and Actions, and finally two charts displayed side by side—a column chart titled "Content Over Time" and a pie chart titled "Content by Category"—using realistic sample data. +{% endpromptcard %} +{% endpromptcards %} + +Generated code follows Windows Forms best practices with proper control layout, event handling, data bindings, strong C# typing, and built-in security measures such as input validation and avoidance of hard-coded secrets. The code is fully compatible with Visual Studio designer and Windows Forms conventions. + +## Best Practices + +Follow these guidelines to get the most out of UI Builder and ensure high-quality production-ready results: + +- **Stay consistent** — Maintain consistent file organization, naming conventions (PascalCase for classes, camelCase for variables), and Windows Forms coding standards throughout your project. +- **Use advanced AI models** — For best results, use **Claude Sonnet 4.6 or higher** capability models to produce better code quality and more accurate implementations. +- **Review all content before production** — Validate the logic, security, and compatibility with your existing code and target .NET framework before deployment. Test control functionality within Visual Studio designer and at runtime. +- **Verify Syncfusion® licenses** — Ensure all required Syncfusion® controls have valid licenses before deploying to production. +- **Test across platforms** — Verify DPI awareness, high-resolution display support, and Windows accessibility features. + +## Troubleshooting + +- **APM installation failure**: Refer to this [documentation](https://microsoft.github.io/apm/getting-started/installation/#troubleshooting). + +- **Skills not loading**: Ensure the **.agent/** and **.github/agents/** folders exist in your project and that the skill was installed successfully using APM. Verify that the correct agent is selected from the Agent dropdown in your IDE. + +- **Control not rendering**: Retry generation using the specific control skill to resolve the issue, and ensure required Syncfusion® packages and themes are properly configured. + +- **Syncfusion license banner appears**: Use the licensing skill to correctly register and validate your Syncfusion® license key in the application. + + +## FAQ + +**Which agents/IDEs are supported?** +Any Skills-compatible agent that reads local skill files (Code Studio, VS Code, Cursor, etc.). + +**Are skills loaded automatically?** +Yes. Supported agents automatically load relevant skills based on your query. + +**Can I customize the generated styles?** +Yes — the generated Windows Forms controls include clear integration points for style adjustments. + +**Does it modify files automatically?** +The skill proposes changes and requires confirmation for insertion. Automatic dependency installation may be offered depending on agent permissions + +## See also + +- [Agent Skills Standards](https://agentskills.io/home) +- [Agent Package Manager](https://microsoft.github.io/apm/getting-started/quick-start/) \ No newline at end of file