Merge pull request #3536 from syncfusion-content/UG-Document-for-.NET-MAUI-Sunburst-Selection-support

973016-Added images for .NET MAUI Sunburst Selection and drill down support

Author: SyncfusionKarthikeyan

MAUI/SunburstChart/DrillDown.md

@@ -34,6 +34,8 @@ this.Content = sunburst;
 
 {% endtabs %}
 
+![Drill Down in MAUI Sunburst Chart.](drill_down_images/maui_drill_down.gif)
+
 ## Toolbar Alignment
 
 The vertical and the horizontal alignments of the toolbar can be customized using the `VerticalAlignment` and `HorizontalAlignment` properties, respectively.
@@ -52,7 +54,7 @@ Both the alignment properties has the following enum types:
     . . .
     <chart:SfSunburstChart.ToolbarSettings>
         <chart:SunburstToolbarSettings HorizontalAlignment="Center" 
-                                                VerticalAlignment="Center"/>
+                                       VerticalAlignment="Center"/>
     </chart:SfSunburstChart.ToolbarSettings>
 </sunburst:SfSunburstChart>
 
@@ -75,6 +77,8 @@ this.Content = sunburst;
 
 {% endtabs %}
 
+![Drill Down Toolbar Alignment.](drill_down_images/maui_toolbar_alignment.png)
+
 ## Toolbar Positioning
 
 The toolbar's position within the Sunburst Chart can be adjusted both horizontally and vertically using the `OffsetX` and `OffsetY` properties of the `SunburstToolbarSettings` class.
@@ -86,7 +90,7 @@ The toolbar's position within the Sunburst Chart can be adjusted both horizontal
 <sunburst:SfSunburstChart EnableDrillDown="True">
     . . .
     <chart:SfSunburstChart.ToolbarSettings >
-        <chart:SunburstToolbarSettings OffsetX="50" OffsetY="100"/>
+        <chart:SunburstToolbarSettings OffsetX="-50" OffsetY="200"/>
     </chart:SfSunburstChart.ToolbarSettings>
 </sunburst:SfSunburstChart>
 
@@ -99,8 +103,8 @@ sunburst.EnableDrillDown = true;
 . . .
 SunburstToolbarSettings toolbarSettings = new SunburstToolbarSettings()
 {
-    OffsetX = 50,
-    OffsetY = 100,
+    OffsetX = -50,
+    OffsetY = 200,
 };
 sunburst.ToolbarSettings = toolbarSettings;
 this.Content = sunburst;
@@ -109,6 +113,8 @@ this.Content = sunburst;
 
 {% endtabs %}
 
+![Drill Down Toolbar Positioning.](drill_down_images/maui_toolbar_positioning.png)
+
 ## Toolbar Customization  
 
 The appearance of the drill-down toolbar in the Sunburst Chart can be customized using the following properties
@@ -145,3 +151,5 @@ this.Content = sunburst;
 {% endhighlight %}
 
 {% endtabs %}
+
+![Drill Down TToolbar Customization.](drill_down_images/maui_toolbar_customization.png)

MAUI/SunburstChart/Drill_down_images/maui_drill_down.gif

@@ -50,6 +50,8 @@ this.Content = sunburst;
 
 {% endtabs %}
 
+![Child selection in MAUI Sunburst Chart.](Selection_images/maui_selection_type_child.png)
+
 The following code shows the `Group` selection type.
 
 {% tabs %}
@@ -80,6 +82,8 @@ this.Content = sunburst;
 
 {% endtabs %}
 
+![Group selection in MAUI Sunburst Chart.](Selection_images/maui_selection_type_group.png)
+
 The following code shows the `Parent` selection type.
 
 {% tabs %}
@@ -110,6 +114,8 @@ this.Content = sunburst;
 
 {% endtabs %}
 
+![Parent selection in MAUI Sunburst Chart.](Selection_images/maui_selection_type_parent.png)
+
 The following code shows the `Single` selection type.
 
 {% tabs %}
@@ -140,6 +146,8 @@ this.Content = sunburst;
 
 {% endtabs %}
 
+![Single selection in MAUI Sunburst Chart.](Selection_images/maui_selection_type_single.png)
+
 ## DisplayMode
 
 The `DisplayMode` property provides the following selection options to highlight the segments:
@@ -161,7 +169,7 @@ This mode highlights the selected segment using the brush defined in the `Fill`
 <chart:SfSunburstChart>
     . . .
     <chart:SfSunburstChart.SelectionSettings>
-        <chart:SunburstSelectionSettings Fill="Pink" DisplayMode="HighlightByBrush" Type="Child"/>
+        <chart:SunburstSelectionSettings Fill="DarkRed" DisplayMode="HighlightByBrush" Type="Child"/>
     </chart:SfSunburstChart.SelectionSettings>
 </chart:SfSunburstChart>
 
@@ -173,7 +181,7 @@ SfSunburstChart sunburstChart = new SfSunburstChart();
 . . .
 SunburstSelectionSettings selectionSettings = new SunburstSelectionSettings
 {
-    Fill = Colors.Pink,
+    Fill = Colors.DarkRed,
     DisplayMode = SunburstSelectionDisplayMode.HighlightByBrush,
     Type = SunburstSelectionType.Child,
 };
@@ -184,6 +192,8 @@ this.Content = sunburst;
 
 {% endtabs %}
 
+![ DisplayMode HighlightByBrush.](Selection_images/maui_selection_highlight_by_brush.png)
+
 ### Opacity
 
 This mode highlights the selected segment with full opacity as 1, while unselected segments use the opacity value defined in the `Opacity` property.
@@ -218,6 +228,8 @@ this.Content = sunburst;
 
 {% endtabs %}
 
+![ DisplayMode HighlightByOpacity.](Selection_images/maui_selection_highlight_by_opacity.png)
+
 ### Stoke 
 
 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.
@@ -253,6 +265,8 @@ this.Content = sunburst;
 
 {% endtabs %}
 
+![ DisplayMode HighlightByOpacity.](Selection_images/maui_selection_highlight_by_stroke.png)
+
 ## Events 
 
 ### SelectionChanging