Merge pull request #1 from SyncfusionExamples/Bind-the-WinUI-circular-pie-chart-data-label-to-Others-category-values

WINUI-3442-Bind the WinUI circular pie chart data label to others category values.

Author: SyncfusionKarthikeyan

PieChart_GroupedDataLabel/PieChart_GroupedDataLabel/App.xaml

@@ -0,0 +1,18 @@
+<!-- Copyright (c) Microsoft Corporation and Contributors. -->
+<!-- Licensed under the MIT License. -->
+
+<Application
+    x:Class="PieChart_GroupedDataLabel.App"
+    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:local="using:PieChart_GroupedDataLabel">
+    <Application.Resources>
+        <ResourceDictionary>
+            <ResourceDictionary.MergedDictionaries>
+                <XamlControlsResources xmlns="using:Microsoft.UI.Xaml.Controls" />
+                <!-- Other merged dictionaries here -->
+            </ResourceDictionary.MergedDictionaries>
+            <!-- Other app resources here -->
+        </ResourceDictionary>
+    </Application.Resources>
+</Application>

PieChart_GroupedDataLabel/PieChart_GroupedDataLabel/App.xaml.cs

@@ -0,0 +1,53 @@
+// Copyright (c) Microsoft Corporation and Contributors.
+// Licensed under the MIT License.
+
+using Microsoft.UI.Xaml;
+using Microsoft.UI.Xaml.Controls;
+using Microsoft.UI.Xaml.Controls.Primitives;
+using Microsoft.UI.Xaml.Data;
+using Microsoft.UI.Xaml.Input;
+using Microsoft.UI.Xaml.Media;
+using Microsoft.UI.Xaml.Navigation;
+using Microsoft.UI.Xaml.Shapes;
+using System;
+using System.Collections.Generic;
+using System.IO;
+using System.Linq;
+using System.Runtime.InteropServices.WindowsRuntime;
+using Windows.ApplicationModel;
+using Windows.ApplicationModel.Activation;
+using Windows.Foundation;
+using Windows.Foundation.Collections;
+
+// To learn more about WinUI, the WinUI project structure,
+// and more about our project templates, see: http://aka.ms/winui-project-info.
+
+namespace PieChart_GroupedDataLabel
+{
+    /// <summary>
+    /// Provides application-specific behavior to supplement the default Application class.
+    /// </summary>
+    public partial class App : Application
+    {
+        /// <summary>
+        /// Initializes the singleton application object.  This is the first line of authored code
+        /// executed, and as such is the logical equivalent of main() or WinMain().
+        /// </summary>
+        public App()
+        {
+            this.InitializeComponent();
+        }
+
+        /// <summary>
+        /// Invoked when the application is launched.
+        /// </summary>
+        /// <param name="args">Details about the launch request and process.</param>
+        protected override void OnLaunched(Microsoft.UI.Xaml.LaunchActivatedEventArgs args)
+        {
+            m_window = new MainWindow();
+            m_window.Activate();
+        }
+
+        private Window m_window;
+    }
+}

PieChart_GroupedDataLabel/PieChart_GroupedDataLabel/Assets/LockScreenLogo.scale-200.png

@@ -0,0 +1,59 @@
+<!-- Copyright (c) Microsoft Corporation and Contributors. -->
+<!-- Licensed under the MIT License. -->
+
+<Window
+    x:Class="PieChart_GroupedDataLabel.MainWindow"
+    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:local="using:PieChart_GroupedDataLabel"
+     xmlns:chart="using:Syncfusion.UI.Xaml.Charts"
+    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+    mc:Ignorable="d">
+    <Grid>
+        <Grid.DataContext>
+            <local:ViewModel x:Name="viewModel"/>
+        </Grid.DataContext>
+        <Grid.Resources>
+            <local:DataLabelXValueConverter x:Key="dataLabelXValue"/>
+            <local:DataLabelYValueConverter x:Key="dataLabelYValue" />
+            <DataTemplate x:Key="dataMarkerTemplate">
+                <StackPanel BorderBrush="Black" BorderThickness="1"  CornerRadius="2" Orientation="Horizontal">
+                    <TextBlock Foreground="Black" FontWeight="Bold" Text="{Binding Converter={StaticResource dataLabelXValue}}" />
+                    <TextBlock Text=":  " Foreground="Black" FontWeight="Bold"/>
+                    <TextBlock Foreground="Black" FontWeight="Bold" Text="{Binding Converter={StaticResource dataLabelYValue}}"  />
+                </StackPanel>
+            </DataTemplate>
+            <BrushCollection x:Key="customBrushes">
+                <SolidColorBrush Color="#585DAC"/>
+                <SolidColorBrush Color="#B28DD4"/>
+                <SolidColorBrush Color="#5DAC88"/>
+                <SolidColorBrush Color="#F2BB30"/>
+                <SolidColorBrush Color="#E66C69"/>
+                <SolidColorBrush Color="#27B9B4"/>
+                <SolidColorBrush Color="#FB6690"/>
+            </BrushCollection>
+        </Grid.Resources>
+        <Grid.ColumnDefinitions>
+            <ColumnDefinition/>
+        </Grid.ColumnDefinitions>
+        <chart:SfCircularChart Margin="10">
+            <chart:SfCircularChart.Header>
+                <TextBlock Text="Sales Percentage" FontWeight="Bold" />
+            </chart:SfCircularChart.Header>
+            <chart:PieSeries XBindingPath="Product" ShowDataLabels="True" Radius="0.7"
+                             GroupTo="10" GroupMode="Percentage" YBindingPath="SalesPercentage"
+                             ItemsSource="{Binding Data}" 
+                             PaletteBrushes="{StaticResource customBrushes}">
+                <chart:PieSeries.DataLabelSettings>
+                    <chart:CircularDataLabelSettings ShowConnectorLine="True" 
+                                                     Context="DataLabelItem" 
+                                                 Position="OutsideExtended"
+                                                 UseSeriesPalette="True" 
+                                                 ContentTemplate="{StaticResource dataMarkerTemplate}" />
+                </chart:PieSeries.DataLabelSettings>
+
+            </chart:PieSeries>
+        </chart:SfCircularChart>
+    </Grid>
+</Window>