diff --git a/MAUI/Scheduler/drag-and-drop-appointments.md b/MAUI/Scheduler/drag-and-drop-appointments.md index ed23a40b7..1568b82bc 100644 --- a/MAUI/Scheduler/drag-and-drop-appointments.md +++ b/MAUI/Scheduler/drag-and-drop-appointments.md @@ -1,7 +1,7 @@ --- layout: post -Title: Appointment Drag and Drop in .NET MAUI Scheduler Control | Syncfusion® -Description: Learn here all about Appointment drag and drop support in the Syncfusion® .NET MAUI Scheduler(SfScheduler) control. +title: Appointment Drag and Drop in .NET MAUI Scheduler Control | Syncfusion® +description: Learn here all about Appointment drag and drop support in the Syncfusion® .NET MAUI Scheduler(SfScheduler) control. platform: maui control: SfScheduler documentation: ug @@ -98,6 +98,7 @@ Using the [AppointmentDrop](https://help.syncfusion.com/cr/maui/Syncfusion.Maui. [DropTime](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Scheduler.AppointmentDropEventArgs.html#Syncfusion_Maui_Scheduler_AppointmentDropEventArgs_DropTime) - Get or set the date and time at which the appointment is being dropped. [SourceResource](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Scheduler.AppointmentDropEventArgs.html#Syncfusion_Maui_Scheduler_AppointmentDropEventArgs_SourceResource) - Get the original resource of the appointment that is being dropped. [TargetResource](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Scheduler.AppointmentDropEventArgs.html#Syncfusion_Maui_Scheduler_AppointmentDropEventArgs_TargetResource) - Get the resource into which the appointment is being dropped. +`IsDroppingToAllDay` - Gets a value indicating whether an appointment is being dropped into an all-day slot. {% tabs %} {% highlight c# %} @@ -107,10 +108,31 @@ scheduler.AppointmentDrop += OnSchedulerAppointmentDrop; private void OnSchedulerAppointmentDrop(object? sender, AppointmentDropEventArgs e) { - var appointment = e.Appointment; - e.Cancel = false; - var dropTime = e.DropTime; + var appointment = e.Appointment; + e.Cancel = false; + var dropTime = e.DropTime; +} + +{% endhighlight %} +{% endtabs %} + +### Prevent dropping appointments into the all-day panel + +You can prevent appointments from being dropped into the all-day panel by checking the `IsDroppingToAllDay` property in the `AppointmentDrop` event and canceling the operation. + +{% tabs %} +{% highlight c# %} +scheduler.AppointmentDrop += OnSchedulerAppointmentDrop; +... + +private void OnSchedulerAppointmentDrop(object? sender, AppointmentDropEventArgs e) +{ + if (e.IsDroppingToAllDay) + { + e.Cancel = true; + } } + {% endhighlight %} {% endtabs %} diff --git a/MAUI/Scheduler/month-view.md b/MAUI/Scheduler/month-view.md index ef7e5a112..a606e5d2c 100644 --- a/MAUI/Scheduler/month-view.md +++ b/MAUI/Scheduler/month-view.md @@ -83,6 +83,30 @@ this.Scheduler.MonthView.AppointmentIndicatorCount = 1; ![change-appointment-indicator-count-in-maui-scheduler](images/month-view/change-appointment-indicator-count-in-maui-scheduler.jpeg) +## Appointment indicator size + +The scheduler month view allows you to customize the size of the appointment indicator by using the `AppointmentIndicatorSize` property of the [MonthView](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Scheduler.SchedulerMonthView.html). By default, the `AppointmentIndicatorSize` is set to 6d. + +{% tabs %} +{% highlight XAML hl_lines="5" %} + + + + + + + +{% endhighlight %} +{% highlight C# hl_lines="3" %} + +this.Scheduler.View = SchedulerView.Month; +this.Scheduler.MonthView.AppointmentDisplayMode = SchedulerMonthAppointmentDisplayMode.Indicator; +this.Scheduler.MonthView.AppointmentIndicatorSize = 10; + +{% endhighlight %} +{% endtabs %} + ## Hide leading and trailing dates The previous and next month dates from a Scheduler month view can be hidden by using the [ShowLeadingAndTrailingDates](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Scheduler.SchedulerMonthView.html#Syncfusion_Maui_Scheduler_SchedulerMonthView_ShowLeadingAndTrailingDates) property in the [MonthView](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Scheduler.SchedulerMonthView.html). The `ShowLeadingAndTrailingDates` property defaults to `true.` diff --git a/MAUI/Scheduler/resource-view.md b/MAUI/Scheduler/resource-view.md index 2cf0d7ed9..e907e4670 100644 --- a/MAUI/Scheduler/resource-view.md +++ b/MAUI/Scheduler/resource-view.md @@ -172,13 +172,47 @@ this.Scheduler.ResourceView.ResourceGroupType = SchedulerResourceGroupType.Date; ![Resource Grouping By Date in Days View in .NET MAUI Scheduler.](images/resource-view/group-resources-by-date-in-days-view-in-net-maui-scheduler.png) -## Visible Resource Count in Days View +## Visible Resource Count -The number of resources shown in the day, week, and work week views can be controlled using the [`VisibleResourceCount`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Scheduler.SchedulerResourceView.html#Syncfusion_Maui_Scheduler_SchedulerResourceView_VisibleResourceCount) property of the [`SchedulerResourceView`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Scheduler.SchedulerResourceView.html#Syncfusion_Maui_Scheduler_SchedulerResourceView_Resources) class. This lets you define how many resources are visible at a time. +The number of resources shown in the day, week, work week, timelineday, timelineweek, timelineworkweek views can be controlled using the [`VisibleResourceCount`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Scheduler.SchedulerResourceView.html#Syncfusion_Maui_Scheduler_SchedulerResourceView_VisibleResourceCount) property of the [`SchedulerResourceView`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Scheduler.SchedulerResourceView.html#Syncfusion_Maui_Scheduler_SchedulerResourceView_Resources) class. This lets you define how many resources are visible at a time. + +### Days View {% tabs %} {% highlight xaml tabtitle="MainPage.xaml" hl_lines="3" %} + + + + +{% endhighlight %} +{% highlight c# tabtitle="MainPage.xaml.cs" hl_lines="12" %} +var Resources = new ObservableCollection() +{ + new SchedulerResource { Name = "Sophia", Foreground = Colors.White, Background = Colors.LightGreen, Id = "1000" }, + new SchedulerResource { Name = "Zoey Addison", Foreground = Colors.White, Background = Colors.Gold, Id = "1001" }, + new SchedulerResource { Name = "Aiden Clark", Foreground = Colors.White, Background = Colors.LightSkyBlue,Id = "1002" }, + new SchedulerResource { Name = "Mia Johnson", Foreground = Colors.White, Background = Colors.Tomato, Id = "1003" }, + new SchedulerResource { Name = "Liam Parker", Foreground = Colors.White, Background = Colors.Orchid, Id = "1004" }, + new SchedulerResource { Name = "Olivia Bennett", Foreground = Colors.White, Background = Colors.SlateBlue, Id = "1005" }, + new SchedulerResource { Name = "Noah Ramirez", Foreground = Colors.White, Background = Colors.SeaGreen, Id = "1006" }, + new SchedulerResource { Name = "Ava Thompson", Foreground = Colors.White, Background = Colors.Coral, Id = "1007" }, + new SchedulerResource { Name = "Ethan Davis", Foreground = Colors.White, Background = Colors.DodgerBlue, Id = "1008" }, + new SchedulerResource { Name = "Isabella Moore", Foreground = Colors.White, Background = Colors.MediumOrchid,Id = "1009" }, +}; + +this.Scheduler.ResourceView.Resources = Resources; +this.Scheduler.ResourceView.VisibleResourceCount = 6; +{% endhighlight %} +{% endtabs %} + +![Visible Resource Count in Days View in .NET MAUI Scheduler.](images/resource-view/visible-resource-count-for-resources-in-days-view-in-.net-maui-scheduler.png) + +### Timeline View + +{% tabs %} +{% highlight xaml tabtitle="MainPage.xaml" hl_lines="3" %} + @@ -200,11 +234,9 @@ this.Scheduler.ResourceView.VisibleResourceCount = 4; {% endhighlight %} {% endtabs %} -![Visible Resource Count in Days View in .NET MAUI Scheduler.](images/resource-view/visible-resource-count-for-resources-in-days-view-in-.net-maui-scheduler.png) - N> -* When [`VisibleResourceCount`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Scheduler.SchedulerResourceView.html#Syncfusion_Maui_Scheduler_SchedulerResourceView_VisibleResourceCount) is set to -1, the `SfScheduler` displays up to three resources. If the total number of resources is less than three, it displays all available resources. -* When [`VisibleResourceCount`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Scheduler.SchedulerResourceView.html#Syncfusion_Maui_Scheduler_SchedulerResourceView_VisibleResourceCount) is set to 0, the resource view layout is removed, and only the plain Scheduler view (e.g., Day view without resources) is shown. +* When [`VisibleResourceCount`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Scheduler.SchedulerResourceView.html#Syncfusion_Maui_Scheduler_SchedulerResourceView_VisibleResourceCount) is set to 0, the resource view layout is removed, and only the plain Scheduler view is shown. +* [`VisibleResourceCount`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Scheduler.SchedulerResourceView.html#Syncfusion_Maui_Scheduler_SchedulerResourceView_VisibleResourceCount) applies to the horizontal resource view on Windows and macOS, and to the timeline resource view on all platforms. When the value is -1 (default), the horizontal resource view displays three resources. In timeline resource views, the number of visible resource rows is determined by the minimum row height, and the auto row height. ## Resource Header Height in Days View @@ -233,6 +265,31 @@ this.Scheduler.ResourceView.ResourceHeaderHeight = 100; ![Resource Header Height in Days View in .NET MAUI Scheduler.](images/resource-view/resource-header-height-for-resources-in-days-view-in-.net-maui-scheduler.png) +## Resource Header Width in Timeline View + +In the timelineday, timelineweek, and timeline work week views, resources are arranged vertically. The width of the resource headers can be customized using the `ResourceHeaderWidth` property of the [`SchedulerResourceView`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Scheduler.SchedulerResourceView.html#Syncfusion_Maui_Scheduler_SchedulerResourceView_Resources) class. + +{% tabs %} +{% highlight xaml tabtitle="MainPage.xaml" hl_lines="3" %} + + + + + +{% endhighlight %} +{% highlight C# tabtitle="MainPage.xaml.cs" hl_lines="9" %} +var Resources = new ObservableCollection() +{ + new SchedulerResource() { Name = "Sophia", Foreground = Colors.White, Background = Colors.LightGreen, Id = "1000" }, + new SchedulerResource() { Name = "Zoey Addison", Foreground = Colors.White, Background = Colors.Gold, Id = "1001" }, + new SchedulerResource() { Name = "James William", Foreground = Colors.White, Background = Colors.Violet, Id = "1002" }, +}; + +this.Scheduler.ResourceView.Resources = Resources; +this.Scheduler.ResourceView.ResourceHeaderWidth = 250; +{% endhighlight %} +{% endtabs %} + ## Resource minimum row height You can customize resource minimum row height of visible resources in timeline day, timeline week, timeline workweek and timeline month views by using the [MinimumRowHeight](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Scheduler.SchedulerResourceView.html#Syncfusion_Maui_Scheduler_SchedulerResourceView_MinimumRowHeight) property of [SchedulerResourceView](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Scheduler.SchedulerResourceView.html) in [SfScheduler.](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Scheduler.SfScheduler.html) By default, resource row height will be auto-expanded from minimum height based on the appointment counts. diff --git a/MAUI/Segmented-Control/customization.md b/MAUI/Segmented-Control/customization.md index de07ff19b..1fc0c3a7d 100644 --- a/MAUI/Segmented-Control/customization.md +++ b/MAUI/Segmented-Control/customization.md @@ -435,4 +435,94 @@ Use the [SegmentTemplate](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Bu {% endhighlight %} {% endtabs %} -![Appearance customization using DataTemplate in .NET MAUI Segmented control.](images/customization/segment-template.png) \ No newline at end of file +![Appearance customization using DataTemplate in .NET MAUI Segmented control.](images/customization/segment-template.png) + +## Customize selected segment item appearance using DataTemplate + +Use the `IsSelected` property of `SfSegmentItem` to customize the selected segment item appearance. The following example code shows how to create a custom segmented control using a data template. + +{% tabs %} +{% highlight XAML %} + + + + + + + + + + + + Day + Week + Month + Year + + + + + + + + + + + + +{% endhighlight %} +{% highlight C# tabtitle="MainPage.xaml.cs" %} + +using Syncfusion.Maui.Buttons; +. . . + +public partial class MainPage : ContentPage +{ + public MainPage() + { + InitializeComponent(); + SfSegmentedControl segmentedControl = new SfSegmentedControl(); + List segmentItems = new List + { + new SfSegmentItem() {Text="Day", Background = Colors.LightBlue}, + new SfSegmentItem() {Text="Week", Background = Colors.LightBlue}, + new SfSegmentItem() {Text="Month", Background = Colors.LightBlue}, + new SfSegmentItem() {Text="Year", Background = Colors.LightBlue}, + }; + segmentedControl.ItemsSource = segmentItems; + this.Content = segmentedControl; + } +} + +{% endhighlight %} +{% highlight C# tabtitle="TextColorConverter.cs" %} + +public class TextColorConverter : IValueConverter +{ + public object Convert(object value, Type targetType, object parameter, CultureInfo culture) + { + if (value is bool isSelected) + { + return isSelected ? Colors.Green : Colors.Red; + } + + return Colors.Black; + } + + public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture) + { + } +} + +{% endhighlight %} +{% endtabs %} + +N> +* The BindingContext of the `SegmentTemplate` is the `SfSegmentItem`. + +![Customization for the selected segment item in .NET MAUI Segmented control.](images/customization/selected-segment.png) \ No newline at end of file diff --git a/MAUI/Segmented-Control/events.md b/MAUI/Segmented-Control/events.md new file mode 100644 index 000000000..8f28d6c34 --- /dev/null +++ b/MAUI/Segmented-Control/events.md @@ -0,0 +1,59 @@ +--- +layout: post +title: Events in .NET MAUI Segmented control | Syncfusion +description: Learn here all about the Events support in Syncfusion® .NET MAUI Segmented Control (SfSegmentedControl). +platform: maui +control: SfSegmentedControl +documentation: ug +--- + +# Events in .NET MAUI Segmented Control (SfSegmentedControl) + +The Segmented Control supports the `Tapped,` and `SelectionChanged` events to interact with .NET MAUI Segmented Control + +## Tapped + +A Tapped event occurs, each time a segment tapped. + +Below is a list of the arguments: + +* `Sender`: This contains the `SfSegmentedControl` object. + +* `Tapped`: The tapped action performed on an Segment can be found in the `SegmentTappedEventArgs`, you can see details about the `SegmentItem`. + +## SelectionChanged + +The [SelectionChanged](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.SfSegmentedControl.html#Syncfusion_Maui_Buttons_SfSegmentedControl_SelectionChanged) event is triggered once the segment is selected in the segmented control. The [SelectionChangedEventArgs](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.SelectionChangedEventArgs.html) has the following values, which provide information for the `SelectionChanged` event. + +* OldIndex +* NewIndex +* OldValue +* NewValue + +{% tabs %} +{% highlight C# %} + +using Syncfusion.Maui.Buttons; +. . . + +public partial class MainPage : ContentPage +{ + public MainPage() + { + InitializeComponent(); + SfSegmentedControl segmentedControl = new SfSegmentedControl(); + segmentedControl.SelectionChanged += OnSegmentedControlSelectionChanged; + this.Content = segmentedControl; + } + + private void OnSegmentedControlSelectionChanged(object sender, Syncfusion.Maui.Buttons.SelectionChangedEventArgs e) + { + var newValue = e.NewValue; + var oldValue = e.OldValue; + var newIndex = e.NewIndex; + var oldIndex = e.OldIndex; + } +} + +{% endhighlight %} +{% endtabs %} \ No newline at end of file diff --git a/MAUI/Segmented-Control/images/customization/selected-segment.png b/MAUI/Segmented-Control/images/customization/selected-segment.png new file mode 100644 index 000000000..03592df61 Binary files /dev/null and b/MAUI/Segmented-Control/images/customization/selected-segment.png differ diff --git a/MAUI/Segmented-Control/selection.md b/MAUI/Segmented-Control/selection.md index bb7c0f144..235682bc5 100644 --- a/MAUI/Segmented-Control/selection.md +++ b/MAUI/Segmented-Control/selection.md @@ -213,6 +213,86 @@ public partial class MainPage : ContentPage ![Bottom border selection in .NET MAUI Segmented control.](images/selection/bottom-border.png) +## Selection Mode + +You can select the segment item by tapping the item in the Segmented Control. SfSegmentedControl provides two types of modes such as `Single` and `SingleDeselect`. The default `SelectionMode` is `Single`. + +### Single Selection + +The Single selection can be performed in the `Segmented Control` by setting the `SelectionMode` property to `Single`. In this selection, you can select a single item at a time in the segmented control. + +{% tabs %} +{% highlight XAML %} + + + + + + + + + +{% endhighlight %} +{% highlight C# %} + +using Syncfusion.Maui.Buttons; +. . . + +public partial class MainPage : ContentPage +{ + public MainPage() + { + InitializeComponent(); + SfSegmentedControl segmentedControl = new SfSegmentedControl(); + segmentedControl.SelectionMode = SegmentSelectionMode.Single; + this.Content = segmentedControl; + } +} + +{% endhighlight %} +{% endtabs %} + +### Single Deselection + +The Single Deselection can be performed in the `Segmented Control` by setting the `SelectionMode` property to `SingleDeselect`. In this mode, only one item can be selected at a time, and you can deselect the currently selected item by simply clicking on it again. This provides a quick way to clear the selection without needing additional actions. + +{% tabs %} +{% highlight XAML %} + + + + + + + + + +{% endhighlight %} +{% highlight C# %} + +using Syncfusion.Maui.Buttons; +. . . + +public partial class MainPage : ContentPage +{ + public MainPage() + { + InitializeComponent(); + SfSegmentedControl segmentedControl = new SfSegmentedControl(); + segmentedControl.SelectionMode = SegmentSelectionMode.SingleDeselect; + this.Content = segmentedControl; + } +} + +{% endhighlight %} +{% endtabs %} + ## Customize selected segment The selected segment of the Segmented control is customized using the [SelectionIndicatorSettings](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.SfSegmentedControl.html#Syncfusion_Maui_Buttons_SfSegmentedControl_SelectionIndicatorSettings) property of [SfSegmentedControl](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.SfSegmentedControl.html). @@ -512,40 +592,4 @@ public partial class MainPage : ContentPage {% endhighlight %} {% endtabs %} -![Enable or Disable Ripple Effect Animation in .NET MAUI Segmented control.](images/selection/enable-ripple-effect.gif) - -## Notifying segment selection changes -The [SelectionChanged](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.SfSegmentedControl.html#Syncfusion_Maui_Buttons_SfSegmentedControl_SelectionChanged) event is triggered once the segment is selected in the segmented control. The [SelectionChangedEventArgs](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.SelectionChangedEventArgs.html) has the following values, which provide information for the `SelectionChanged` event. - -* OldIndex -* NewIndex -* OldValue -* NewValue - -{% tabs %} -{% highlight C# %} - -using Syncfusion.Maui.Buttons; -. . . - -public partial class MainPage : ContentPage -{ - public MainPage() - { - InitializeComponent(); - SfSegmentedControl segmentedControl = new SfSegmentedControl(); - segmentedControl.SelectionChanged += OnSegmentedControlSelectionChanged; - this.Content = segmentedControl; - } - - private void OnSegmentedControlSelectionChanged(object sender, Syncfusion.Maui.Buttons.SelectionChangedEventArgs e) - { - var newValue = e.NewValue; - var oldValue = e.OldValue; - var newIndex = e.NewIndex; - var oldIndex = e.OldIndex; - } -} - -{% endhighlight %} -{% endtabs %} \ No newline at end of file +![Enable or Disable Ripple Effect Animation in .NET MAUI Segmented control.](images/selection/enable-ripple-effect.gif) \ No newline at end of file diff --git a/maui-toc.html b/maui-toc.html index af95fd56a..4ea406e42 100644 --- a/maui-toc.html +++ b/maui-toc.html @@ -1200,6 +1200,7 @@
  • Disabled segment items
  • Layout
  • Customization
  • +
  • Events
  • Right To Left
  • Accessibility