Skip to content

Commit 655ca84

Browse files
VimalaThirumalaikumarVimalaThirumalaikumar
committed
Merge branch 'development' of https://github.com/syncfusion-content/maui-docs into Document-for-.NET-MAUI-Sunburst-DrillDown-support
# Conflicts: # maui-toc.html
2 parents 18bdec5 + c40d9af commit 655ca84

File tree

6 files changed

+284
-2
lines changed

6 files changed

+284
-2
lines changed

‎MAUI/DatePicker/events.md‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -44,6 +44,8 @@ private void OnDatePickerSelectionChanged(object sender, DatePickerSelectionChan
4444

4545
{% endtabs %}
4646

47+
N> In `SfDatePicker`, the [SelectedDate](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Picker.SfDatePicker.html#Syncfusion_Maui_Picker_SfDatePicker_SelectedDate) is confirmed only when the OK button in the footer view is tapped. This behavior applies when the [Mode](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Picker.PickerBase.html#Syncfusion_Maui_Picker_PickerBase_Mode) is set to `Dialog` or `RelativeDialog`, the [Height](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Picker.PickerFooterView.html#Syncfusion_Maui_Picker_PickerFooterView_Height) of the PickerFooterView is greater than zero, and [ShowOkButton](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Picker.PickerFooterView.html#Syncfusion_Maui_Picker_PickerFooterView_ShowOkButton) is enabled. Ensuring intentional selection and preventing `SelectionChanged` events during scrolling.
48+
4749
## Events in dialog mode (SfDatePicker)
4850

4951
In `SfDatePicker`, three events are used while the date picker is in Dialog mode.

‎MAUI/DateTimePicker/events.md‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -42,6 +42,8 @@ private void OnDateTimePickerSelectionChanged(object sender, DateTimePickerSelec
4242
{% endhighlight %}
4343
{% endtabs %}
4444

45+
N> In `SfDateTimePicker`, the [SelectedDate](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Picker.SfDateTimePicker.html#Syncfusion_Maui_Picker_SfDateTimePicker_SelectedDate) is confirmed only when the OK button in the footer view is tapped. This behavior applies when the [Mode](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Picker.PickerBase.html#Syncfusion_Maui_Picker_PickerBase_Mode) is set to `Dialog` or `RelativeDialog`, the [Height](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Picker.PickerFooterView.html#Syncfusion_Maui_Picker_PickerFooterView_Height) of the PickerFooterView is greater than zero, and [ShowOkButton](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Picker.PickerFooterView.html#Syncfusion_Maui_Picker_PickerFooterView_ShowOkButton) is enabled. Ensuring intentional selection and preventing `SelectionChanged` events during scrolling.
46+
4547
## Events in dialog mode
4648

4749
In `SfDateTimePicker`, three events are used while the date time picker is in Dialog mode.

‎MAUI/Picker/events.md‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,8 @@ The [Closed](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Picker.PickerBa
3333
## SelectionChanged Event
3434
The [SelectionChanged](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Picker.SfPicker.html#Syncfusion_Maui_Picker_SfPicker_SelectionChanged) is raised after the selected index changed on the `SfPicker`.
3535

36+
N> In `SfPicker`, the [SelectedIndex](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Picker.PickerColumn.html#Syncfusion_Maui_Picker_PickerColumn_SelectedIndex) and [SelectedItem](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Picker.PickerColumn.html#Syncfusion_Maui_Picker_PickerColumn_SelectedItem) are confirmed only when the OK button in the footer view is tapped. This behavior applies when the [Mode](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Picker.PickerBase.html#Syncfusion_Maui_Picker_PickerBase_Mode) is set to `Dialog` or `RelativeDialog`, the [Height](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Picker.PickerFooterView.html#Syncfusion_Maui_Picker_PickerFooterView_Height) of the PickerFooterView is greater than zero, and [ShowOkButton](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Picker.PickerFooterView.html#Syncfusion_Maui_Picker_PickerFooterView_ShowOkButton) is enabled. Ensuring intentional selection and preventing `SelectionChanged` events during scrolling.
37+
3638
## OkButtonClicked Event
3739

3840
The [OkButtonClicked](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Picker.PickerBase.html#Syncfusion_Maui_Picker_PickerBase_OkButtonClicked) event is raised after the `ok` button clicked on the `SfPicker`. This event is not applicable while the footer view and `ok` button are not visible.

‎MAUI/SunburstChart/Selection.md‎

Lines changed: 274 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,274 @@
1+
---
2+
layout: post
3+
title: Selection in .NET MAUI Sunburst Chart control | Syncfusion
4+
description: This section explains how to enable and customize selection in the Syncfusion<sup>®</sup> .NET MAUI Sunburst Chart control.
5+
platform: maui
6+
control: SfSunburstChart
7+
documentation: ug
8+
---
9+
# Selection in .NET MAUI Sunburst Chart
10+
11+
The Sunburst Chart supports segment selection and highlighting. Selection is triggered by a tap gesture on a segment, allowing users to interact with hierarchical data.
12+
13+
## Type
14+
15+
The `Type` property allows you to select a segment based on the following categories:
16+
* Child: Highlights the selected segment along with its children in all levels.
17+
* Group: Highlights the entire group of the selected segment in a hierarchy.
18+
* Parent: Highlights the parent of the selected segment in the hierarchy.
19+
* Single: Highlights the selected segment alone.
20+
21+
The default value of the `Type` property is `Single`.
22+
23+
The following code shows the `Child` selection type.
24+
25+
{% tabs %}
26+
27+
{% highlight xaml %}
28+
29+
<chart:SfSunburstChart>
30+
. . .
31+
<chart:SfSunburstChart.SelectionSettings>
32+
<chart:SunburstSelectionSettings Type="Child"/>
33+
</chart:SfSunburstChart.SelectionSettings>
34+
</chart:SfSunburstChart>
35+
36+
{% endhighlight %}
37+
38+
{% highlight c# %}
39+
40+
SfSunburstChart sunburstChart = new SfSunburstChart();
41+
. . .
42+
SunburstSelectionSettings selectionSettings = new SunburstSelectionSettings
43+
{
44+
Type = SunburstSelectionType.Child
45+
};
46+
sunburstChart.SelectionSettings = selectionSettings;
47+
this.Content = sunburst;
48+
49+
{% endhighlight %}
50+
51+
{% endtabs %}
52+
53+
The following code shows the `Group` selection type.
54+
55+
{% tabs %}
56+
57+
{% highlight xaml %}
58+
59+
<chart:SfSunburstChart>
60+
. . .
61+
<chart:SfSunburstChart.SelectionSettings>
62+
<chart:SunburstSelectionSettings Type="Group"/>
63+
</chart:SfSunburstChart.SelectionSettings>
64+
</chart:SfSunburstChart>
65+
66+
{% endhighlight %}
67+
68+
{% highlight c# %}
69+
70+
SfSunburstChart sunburstChart = new SfSunburstChart();
71+
. . .
72+
SunburstSelectionSettings selectionSettings = new SunburstSelectionSettings
73+
{
74+
Type = SunburstSelectionType.Group
75+
};
76+
sunburstChart.SelectionSettings = selectionSettings;
77+
this.Content = sunburst;
78+
79+
{% endhighlight %}
80+
81+
{% endtabs %}
82+
83+
The following code shows the `Parent` selection type.
84+
85+
{% tabs %}
86+
87+
{% highlight xaml %}
88+
89+
<chart:SfSunburstChart>
90+
. . .
91+
<chart:SfSunburstChart.SelectionSettings>
92+
<chart:SunburstSelectionSettings Type="Parent"/>
93+
</chart:SfSunburstChart.SelectionSettings>
94+
</chart:SfSunburstChart>
95+
96+
{% endhighlight %}
97+
98+
{% highlight c# %}
99+
100+
SfSunburstChart sunburstChart = new SfSunburstChart();
101+
. . .
102+
SunburstSelectionSettings selectionSettings = new SunburstSelectionSettings
103+
{
104+
Type = SunburstSelectionType.Parent
105+
};
106+
sunburstChart.SelectionSettings = selectionSettings;
107+
this.Content = sunburst;
108+
109+
{% endhighlight %}
110+
111+
{% endtabs %}
112+
113+
The following code shows the `Single` selection type.
114+
115+
{% tabs %}
116+
117+
{% highlight xaml %}
118+
119+
<chart:SfSunburstChart>
120+
. . .
121+
<chart:SfSunburstChart.SelectionSettings>
122+
<chart:SunburstSelectionSettings Type="Single"/>
123+
</chart:SfSunburstChart.SelectionSettings>
124+
</chart:SfSunburstChart>
125+
126+
{% endhighlight %}
127+
128+
{% highlight c# %}
129+
130+
SfSunburstChart sunburstChart = new SfSunburstChart();
131+
. . .
132+
SunburstSelectionSettings selectionSettings = new SunburstSelectionSettings
133+
{
134+
Type = SunburstSelectionType.Single
135+
};
136+
sunburstChart.SelectionSettings = selectionSettings;
137+
this.Content = sunburst;
138+
139+
{% endhighlight %}
140+
141+
{% endtabs %}
142+
143+
## DisplayMode
144+
145+
The `DisplayMode` property provides the following selection options to highlight the segments:
146+
147+
* By Brush
148+
* By opacity
149+
* By stroke
150+
151+
The default value of `DisplayMode` is `HighlightByBrush`.
152+
153+
### Brush
154+
155+
This mode highlights the selected segment using the brush defined in the `Fill` property of the `SunburstSelectionSettings`.
156+
157+
{% tabs %}
158+
159+
{% highlight xaml %}
160+
161+
<chart:SfSunburstChart>
162+
. . .
163+
<chart:SfSunburstChart.SelectionSettings>
164+
<chart:SunburstSelectionSettings Fill="Pink" DisplayMode="HighlightByBrush" Type="Child"/>
165+
</chart:SfSunburstChart.SelectionSettings>
166+
</chart:SfSunburstChart>
167+
168+
{% endhighlight %}
169+
170+
{% highlight c# %}
171+
172+
SfSunburstChart sunburstChart = new SfSunburstChart();
173+
. . .
174+
SunburstSelectionSettings selectionSettings = new SunburstSelectionSettings
175+
{
176+
Fill = Colors.Pink,
177+
DisplayMode = SunburstSelectionDisplayMode.HighlightByBrush,
178+
Type = SunburstSelectionType.Child,
179+
};
180+
sunburstChart.SelectionSettings = selectionSettings;
181+
this.Content = sunburst;
182+
183+
{% endhighlight %}
184+
185+
{% endtabs %}
186+
187+
### Opacity
188+
189+
This mode highlights the selected segment with full opacity as 1, while unselected segments use the opacity value defined in the `Opacity` property.
190+
191+
{% tabs %}
192+
193+
{% highlight xaml %}
194+
195+
<chart:SfSunburstChart>
196+
. . .
197+
<chart:SfSunburstChart.SelectionSettings>
198+
<chart:SunburstSelectionSettings Opacity="0.6" DisplayMode="HighlightByOpacity" Type="Child"/>
199+
</chart:SfSunburstChart.SelectionSettings>
200+
</chart:SfSunburstChart>
201+
202+
{% endhighlight %}
203+
204+
{% highlight c# %}
205+
206+
SfSunburstChart sunburstChart = new SfSunburstChart();
207+
. . .
208+
SunburstSelectionSettings selectionSettings = new SunburstSelectionSettings
209+
{
210+
Opacity = 0.6,
211+
DisplayMode = SunburstSelectionDisplayMode.HighlightByOpacity,
212+
Type = SunburstSelectionType.Child,
213+
};
214+
sunburstChart.SelectionSettings = selectionSettings;
215+
this.Content = sunburst;
216+
217+
{% endhighlight %}
218+
219+
{% endtabs %}
220+
221+
### Stoke
222+
223+
This mode highlights the selected segment by applying stroke to it. The color and thickness of the stroke can be customized using the `Stroke` and `StrokeWidth` properties.
224+
225+
{% tabs %}
226+
227+
{% highlight xaml %}
228+
229+
<chart:SfSunburstChart>
230+
. . .
231+
<chart:SfSunburstChart.SelectionSettings>
232+
<chart:SunburstSelectionSettings Stroke="Black" StrokeWidth="3" DisplayMode="HighlightByStroke" Type="Child"/>
233+
</chart:SfSunburstChart.SelectionSettings>
234+
</chart:SfSunburstChart>
235+
236+
{% endhighlight %}
237+
238+
{% highlight c# %}
239+
240+
SfSunburstChart sunburstChart = new SfSunburstChart();
241+
. . .
242+
SunburstSelectionSettings selectionSettings = new SunburstSelectionSettings
243+
{
244+
Stroke = Colors.Black,
245+
StrokeWidth = 3,
246+
DisplayMode = SunburstSelectionDisplayMode.HighlightByStroke,
247+
Type = SunburstSelectionType.Child,
248+
};
249+
sunburstChart.SelectionSettings = selectionSettings;
250+
this.Content = sunburst;
251+
252+
{% endhighlight %}
253+
254+
{% endtabs %}
255+
256+
## Events
257+
258+
### SelectionChanging
259+
260+
The `SelectionChanging` occurs when a segment in the Sunburst chart is being selected.
261+
This is a cancelable event. The following properties are contained in the event arguments:
262+
263+
* `NewSegment`: Gets the new segment that was selected.
264+
* `OldSegment`: Gets the old segment that was selected or deselected.
265+
* `Cancel` - Gets or sets the value whether to continue selection or not.
266+
267+
268+
### Selection Changed
269+
270+
The `SelectionChanged` event occurs when a segment in the Sunburst chart is selected or deselected. The following properties are contained in the event arguments:
271+
272+
* `IsSelected`: Indicates whether a segment is selected.
273+
* `NewSegment`: Gets the new segment that was selected.
274+
* `OldSegment`: Gets the old segment that was selected or deselected.

‎MAUI/TimePicker/events.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -45,6 +45,7 @@ private void OnTimePickerSelectionChanged(object sender, TimePickerSelectionChan
4545

4646
{% endtabs %}
4747

48+
N> In `SfTimePicker`, the [SelectedTime](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Picker.SfTimePicker.html#Syncfusion_Maui_Picker_SfTimePicker_SelectedTime) is confirmed only when the OK button in the footer view is tapped. This behavior applies when the [Mode](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Picker.PickerBase.html#Syncfusion_Maui_Picker_PickerBase_Mode) is set to `Dialog` or `RelativeDialog`, the [Height](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Picker.PickerFooterView.html#Syncfusion_Maui_Picker_PickerFooterView_Height) of the PickerFooterView is greater than zero, and [ShowOkButton](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Picker.PickerFooterView.html#Syncfusion_Maui_Picker_PickerFooterView_ShowOkButton) is enabled. Ensuring intentional selection and preventing `SelectionChanged` events during scrolling.
4849
## Events in dialog mode
4950

5051
In `SfTimePicker`, three events are used while the time picker is in Dialog mode.

‎maui-toc.html‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1295,10 +1295,11 @@
12951295
<li><a href="/maui/SunburstChart/Getting-Started">Getting Started</a></li>
12961296
<li><a href="/maui/SunburstChart/Migration">Migrate from Xamarin.Forms</a></li>
12971297
<li><a href="/maui/SunburstChart/Appearance">Appearance</a></li>
1298+
<li><a href="/maui/SunburstChart/CenterView">Center View</a></li>
12981299
<li><a href="/maui/SunburstChart/DataLabels">Data Label</a></li>
1300+
<li><a href="/maui/SunburstChart/DrillDown">Drill Down</a></li>
1301+
<li><a href="/maui/SunburstChart/Selection">Selection</a></li>
12991302
<li><a href="/maui/SunburstChart/Tooltip">Tooltip</a></li>
1300-
<li><a href="/maui/SunburstChart/drillDown">Drill Down</a></li>
1301-
<li><a href="/maui/SunburstChart/CenterView">Center View</a></li>
13021303
</ul>
13031304
</li>
13041305
<li>

0 commit comments

Comments
 (0)