TreeMap hierarchical data visualization sample added

README.md

@@ -1,2 +1,44 @@
-# MAUI-TreeMap-hierarchical-data-visualization-
-This repository holds the sample of TreeMap hierarchical data visualization in the .NET MAUI platform.
+# How to visualize hierarchical data in .NET MAUI TreeMap (SfTreeMap)
+This repository holds a sample of how to visualize the hierarchical data in [.NET MAUI TreeMap](https://help.syncfusion.com/maui/treemap/getting-started) control.
+
+Please refer the KB through this [link](https://syncfusion.bolddesk.com/agent/kb/15784)
+
+## Syncfusion Controls
+This project used the following Syncfusion control(s):
+
+* [SfTreeMap](https://www.syncfusion.com/maui-controls/maui-tree-map)
+
+## Supported platforms
+
+.NET Multi-platform App UI (.NET MAUI) apps can be written for the following platforms:
+* Android 5.0 (API 21) or higher.
+* iOS 11 or higher, using the latest release of Xcode.
+* macOS 10.15 or higher, using Mac Catalyst.
+* Windows 11 and Windows 10 version 1809 or higher, using [Windows UI Library (WinUI) 3](https://learn.microsoft.com/en-us/windows/apps/winui/winui3/).
+
+## How to run the sample
+
+1. Clone the sample and open it in Visual Studio 2022 preview.
+
+   *Note: If you download the sample using the "Download ZIP" option, right-click it, select Properties, and then select Unblock.*
+
+2. Register your license key in the App.cs file as demonstrated in the following code.
+
+		public App()
+		{
+			//Register Syncfusion license
+			Syncfusion.Licensing.SyncfusionLicenseProvider.RegisterLicense("YOUR LICENSE KEY");
+
+			InitializeComponent();
+
+			MainPage = new MainPage();
+		}
+
+	Refer to this [link](https://help.syncfusion.com/maui/licensing/overview) for more details.
+
+3. Clean and build the application.
+
+4. Run the application.
+
+## License
+Syncfusion has no liability for any damage or consequence that may arise from using or viewing the samples. The samples are for demonstrative purposes. If you choose to use or access the samples, you agree to not hold Syncfusion liable, in any form, for any damage related to use, for accessing, or viewing the samples. By accessing, viewing, or seeing the samples, you acknowledge and agree Syncfusion’s samples will not allow you seek injunctive relief in any form for any claim related to the sample. If you do not agree to this, do not view, access, utilize, or otherwise do anything with Syncfusion’s samples.

TreeMapVisualizeHierarchicalData/TreeMapVisualizeHierarchicalData.sln

@@ -0,0 +1,27 @@
+
+Microsoft Visual Studio Solution File, Format Version 12.00
+# Visual Studio Version 17
+VisualStudioVersion = 17.9.34701.34
+MinimumVisualStudioVersion = 10.0.40219.1
+Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "TreeMapVisualizeHierarchicalData", "TreeMapVisualizeHierarchicalData\TreeMapVisualizeHierarchicalData.csproj", "{49D47250-F17B-47E3-81FC-B6E927F0D00F}"
+EndProject
+Global
+	GlobalSection(SolutionConfigurationPlatforms) = preSolution
+		Debug|Any CPU = Debug|Any CPU
+		Release|Any CPU = Release|Any CPU
+	EndGlobalSection
+	GlobalSection(ProjectConfigurationPlatforms) = postSolution
+		{49D47250-F17B-47E3-81FC-B6E927F0D00F}.Debug|Any CPU.ActiveCfg = Debug|Any CPU
+		{49D47250-F17B-47E3-81FC-B6E927F0D00F}.Debug|Any CPU.Build.0 = Debug|Any CPU
+		{49D47250-F17B-47E3-81FC-B6E927F0D00F}.Debug|Any CPU.Deploy.0 = Debug|Any CPU
+		{49D47250-F17B-47E3-81FC-B6E927F0D00F}.Release|Any CPU.ActiveCfg = Release|Any CPU
+		{49D47250-F17B-47E3-81FC-B6E927F0D00F}.Release|Any CPU.Build.0 = Release|Any CPU
+		{49D47250-F17B-47E3-81FC-B6E927F0D00F}.Release|Any CPU.Deploy.0 = Release|Any CPU
+	EndGlobalSection
+	GlobalSection(SolutionProperties) = preSolution
+		HideSolutionNode = FALSE
+	EndGlobalSection
+	GlobalSection(ExtensibilityGlobals) = postSolution
+		SolutionGuid = {2FE862FA-EBF5-42A5-B59B-C4FBA65D4447}
+	EndGlobalSection
+EndGlobal

TreeMapVisualizeHierarchicalData/TreeMapVisualizeHierarchicalData/App.xaml

@@ -0,0 +1,14 @@
+<?xml version = "1.0" encoding = "UTF-8" ?>
+<Application xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
+             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
+             xmlns:local="clr-namespace:TreeMapVisualizeHierarchicalData"
+             x:Class="TreeMapVisualizeHierarchicalData.App">
+    <Application.Resources>
+        <ResourceDictionary>
+            <ResourceDictionary.MergedDictionaries>
+                <ResourceDictionary Source="Resources/Styles/Colors.xaml" />
+                <ResourceDictionary Source="Resources/Styles/Styles.xaml" />
+            </ResourceDictionary.MergedDictionaries>
+        </ResourceDictionary>
+    </Application.Resources>
+</Application>

TreeMapVisualizeHierarchicalData/TreeMapVisualizeHierarchicalData/App.xaml.cs

@@ -0,0 +1,12 @@
+namespace TreeMapVisualizeHierarchicalData
+{
+    public partial class App : Application
+    {
+        public App()
+        {
+            InitializeComponent();
+
+            MainPage = new AppShell();
+        }
+    }
+}

TreeMapVisualizeHierarchicalData/TreeMapVisualizeHierarchicalData/AppShell.xaml

@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<Shell
+    x:Class="TreeMapVisualizeHierarchicalData.AppShell"
+    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
+    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
+    xmlns:local="clr-namespace:TreeMapVisualizeHierarchicalData"
+    Shell.FlyoutBehavior="Disabled"
+    Title="TreeMapVisualizeHierarchicalData">
+
+    <ShellContent
+        Title="Home"
+        ContentTemplate="{DataTemplate local:MainPage}"
+        Route="MainPage" />
+
+</Shell>

TreeMapVisualizeHierarchicalData/TreeMapVisualizeHierarchicalData/AppShell.xaml.cs

@@ -0,0 +1,10 @@
+namespace TreeMapVisualizeHierarchicalData
+{
+    public partial class AppShell : Shell
+    {
+        public AppShell()
+        {
+            InitializeComponent();
+        }
+    }
+}

TreeMapVisualizeHierarchicalData/TreeMapVisualizeHierarchicalData/MainPage.xaml

@@ -0,0 +1,48 @@
+<?xml version="1.0" encoding="utf-8" ?>
+<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
+             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
+             xmlns:treemap="clr-namespace:Syncfusion.Maui.TreeMap;assembly=Syncfusion.Maui.TreeMap"
+             xmlns:local="clr-namespace:TreeMapVisualizeHierarchicalData"
+             x:Class="TreeMapVisualizeHierarchicalData.MainPage">
+
+    <ContentPage.BindingContext>
+        <local:PopulationViewModel />
+    </ContentPage.BindingContext>
+    <Grid RowDefinitions="0.05*, 0.95*">
+        <VerticalStackLayout>
+            <Label Text="American Countries Ordered by Population and Grouped by Continent – 2023"
+                   VerticalTextAlignment="Center"
+                   HorizontalTextAlignment="Center"
+                   FontSize="{OnPlatform Default=14, iOS=14, Android=10 }"
+                   Grid.Row="0"
+                   Padding="3"
+                   FontAttributes="Bold" />
+        </VerticalStackLayout>
+        <treemap:SfTreeMap x:Name="treeMap"
+                           DataSource="{Binding PopulationDetails}"
+                           RangeColorValuePath="Population"
+                           PrimaryValuePath="Population"
+                           Margin="8"
+                           Grid.Row="1"
+                           ShowToolTip="True">
+            <treemap:SfTreeMap.LeafItemSettings>
+                <treemap:TreeMapLeafItemSettings LabelPath="Country">
+                    <treemap:TreeMapLeafItemSettings.TextStyle>
+                        <treemap:TreeMapTextStyle TextColor="#000000" />
+                    </treemap:TreeMapLeafItemSettings.TextStyle>
+                </treemap:TreeMapLeafItemSettings>
+            </treemap:SfTreeMap.LeafItemSettings>
+            <treemap:SfTreeMap.LeafItemBrushSettings>
+                <treemap:TreeMapUniformBrushSettings Brush="Orange" />
+            </treemap:SfTreeMap.LeafItemBrushSettings>
+            <treemap:SfTreeMap.LegendSettings>
+                <treemap:TreeMapLegendSettings ShowLegend="True" />
+            </treemap:SfTreeMap.LegendSettings>
+            <treemap:SfTreeMap.Levels>
+                <treemap:TreeMapLevel GroupPath="Continent" />
+            </treemap:SfTreeMap.Levels>
+        </treemap:SfTreeMap>
+
+    </Grid>
+
+</ContentPage>

TreeMapVisualizeHierarchicalData/TreeMapVisualizeHierarchicalData/MainPage.xaml.cs

@@ -0,0 +1,12 @@
+
+namespace TreeMapVisualizeHierarchicalData
+{
+    public partial class MainPage : ContentPage
+    {
+        public MainPage()
+        {
+            InitializeComponent();
+        }
+
+    }
+}

TreeMapVisualizeHierarchicalData/TreeMapVisualizeHierarchicalData/MauiProgram.cs

@@ -0,0 +1,27 @@
+using Microsoft.Extensions.Logging;
+using Syncfusion.Maui.Core.Hosting;
+
+namespace TreeMapVisualizeHierarchicalData
+{
+    public static class MauiProgram
+    {
+        public static MauiApp CreateMauiApp()
+        {
+            var builder = MauiApp.CreateBuilder();
+            builder
+                .ConfigureSyncfusionCore()
+                .UseMauiApp<App>()
+                .ConfigureFonts(fonts =>
+                {
+                    fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
+                    fonts.AddFont("OpenSans-Semibold.ttf", "OpenSansSemibold");
+                });
+
+#if DEBUG
+    		builder.Logging.AddDebug();
+#endif
+
+            return builder.Build();
+        }
+    }
+}

TreeMapVisualizeHierarchicalData/TreeMapVisualizeHierarchicalData/Model/PopulationDetails.cs

@@ -0,0 +1,109 @@
+using System;
+using System.Collections.Generic;
+using System.ComponentModel;
+using System.Linq;
+using System.Text;
+using System.Threading.Tasks;
+
+namespace TreeMapVisualizeHierarchicalData
+{
+    public class PopulationDetails
+    {
+        #region Fields
+
+        /// <summary>
+        /// The name of the country.
+        /// </summary>
+        private string country;
+
+        /// <summary>
+        /// The continent where the country is located.
+        /// </summary>
+        private string continent;
+
+        /// <summary>
+        /// The population of the country.
+        /// </summary>
+        private double population;
+
+        #endregion
+
+        #region Constructor
+
+        /// <summary>
+        /// Initializes a new instance of the <see cref="PopulationDetails"/> class.
+        /// </summary>
+        public PopulationDetails()
+        {
+            this.country = string.Empty;
+            this.continent = string.Empty;
+        }
+
+        #endregion
+
+        #region Properties
+
+        /// <summary>
+        /// Gets or sets the name of the country.
+        /// </summary>
+        public string Country
+        {
+            get { return this.country; }
+            set
+            {
+                this.country = value;
+                this.RaisePropertyChanged(nameof(Country));
+            }
+        }
+
+        /// <summary>
+        /// Gets or sets the continent where the country is located.
+        /// </summary>
+        public string Continent
+        {
+            get { return this.continent; }
+            set
+            {
+                this.continent = value;
+                this.RaisePropertyChanged(nameof(Continent));
+            }
+        }
+
+        /// <summary>
+        /// Gets or sets the population of the country.
+        /// </summary>
+        public double Population
+        {
+            get { return this.population; }
+            set
+            {
+                this.population = value;
+                this.RaisePropertyChanged(nameof(Population));
+            }
+        }
+
+        #endregion
+
+        #region Event
+
+        /// <summary>
+        /// Occurs when a property value is changed.
+        /// </summary>
+        public event PropertyChangedEventHandler? PropertyChanged;
+
+        #endregion
+
+        #region PropertyChanged
+
+        /// <summary>
+        /// Method to raise the PropertyChanged event.
+        /// </summary>
+        /// <param name="propertyName">The property name.</param>
+        private void RaisePropertyChanged(string propertyName)
+        {
+            this.PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
+        }
+
+        #endregion
+    }
+}

TreeMapVisualizeHierarchicalData/TreeMapVisualizeHierarchicalData/Platforms/Android/AndroidManifest.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="utf-8"?>
+<manifest xmlns:android="http://schemas.android.com/apk/res/android">
+	<application android:allowBackup="true" android:icon="@mipmap/appicon" android:roundIcon="@mipmap/appicon_round" android:supportsRtl="true"></application>
+	<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
+	<uses-permission android:name="android.permission.INTERNET" />
+</manifest>

TreeMapVisualizeHierarchicalData/TreeMapVisualizeHierarchicalData/Platforms/Android/MainActivity.cs

@@ -0,0 +1,11 @@
+using Android.App;
+using Android.Content.PM;
+using Android.OS;
+
+namespace TreeMapVisualizeHierarchicalData
+{
+    [Activity(Theme = "@style/Maui.SplashTheme", MainLauncher = true, ConfigurationChanges = ConfigChanges.ScreenSize | ConfigChanges.Orientation | ConfigChanges.UiMode | ConfigChanges.ScreenLayout | ConfigChanges.SmallestScreenSize | ConfigChanges.Density)]
+    public class MainActivity : MauiAppCompatActivity
+    {
+    }
+}

TreeMapVisualizeHierarchicalData/TreeMapVisualizeHierarchicalData/Platforms/Android/MainApplication.cs

@@ -0,0 +1,16 @@
+using Android.App;
+using Android.Runtime;
+
+namespace TreeMapVisualizeHierarchicalData
+{
+    [Application]
+    public class MainApplication : MauiApplication
+    {
+        public MainApplication(IntPtr handle, JniHandleOwnership ownership)
+            : base(handle, ownership)
+        {
+        }
+
+        protected override MauiApp CreateMauiApp() => MauiProgram.CreateMauiApp();
+    }
+}

TreeMapVisualizeHierarchicalData/TreeMapVisualizeHierarchicalData/Platforms/Android/Resources/values/colors.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="utf-8"?>
+<resources>
+    <color name="colorPrimary">#512BD4</color>
+    <color name="colorPrimaryDark">#2B0B98</color>
+    <color name="colorAccent">#2B0B98</color>
+</resources>

TreeMapVisualizeHierarchicalData/TreeMapVisualizeHierarchicalData/Platforms/MacCatalyst/AppDelegate.cs

@@ -0,0 +1,10 @@
+using Foundation;
+
+namespace TreeMapVisualizeHierarchicalData
+{
+    [Register("AppDelegate")]
+    public class AppDelegate : MauiUIApplicationDelegate
+    {
+        protected override MauiApp CreateMauiApp() => MauiProgram.CreateMauiApp();
+    }
+}