Skip to content

Commit 05b906c

Browse files
saiganesh-sakthivelsaiganesh-sakthivel
authored
Merge pull request #1 from SyncfusionExamples/Hierarchical_data_visualize
TreeMap hierarchical data visualization sample added
2 parents e9ff422 + e83547d commit 05b906c

39 files changed

+1268
-2
lines changed

‎README.md‎

Lines changed: 44 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,44 @@
1-
# MAUI-TreeMap-hierarchical-data-visualization-
2-
This repository holds the sample of TreeMap hierarchical data visualization in the .NET MAUI platform.
1+
# How to visualize hierarchical data in .NET MAUI TreeMap (SfTreeMap)
2+
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.
3+
4+
Please refer the KB through this [link](https://syncfusion.bolddesk.com/agent/kb/15784)
5+
6+
## Syncfusion Controls
7+
This project used the following Syncfusion control(s):
8+
9+
* [SfTreeMap](https://www.syncfusion.com/maui-controls/maui-tree-map)
10+
11+
## Supported platforms
12+
13+
.NET Multi-platform App UI (.NET MAUI) apps can be written for the following platforms:
14+
* Android 5.0 (API 21) or higher.
15+
* iOS 11 or higher, using the latest release of Xcode.
16+
* macOS 10.15 or higher, using Mac Catalyst.
17+
* 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/).
18+
19+
## How to run the sample
20+
21+
1. Clone the sample and open it in Visual Studio 2022 preview.
22+
23+
*Note: If you download the sample using the "Download ZIP" option, right-click it, select Properties, and then select Unblock.*
24+
25+
2. Register your license key in the App.cs file as demonstrated in the following code.
26+
27+
public App()
28+
{
29+
//Register Syncfusion license
30+
Syncfusion.Licensing.SyncfusionLicenseProvider.RegisterLicense("YOUR LICENSE KEY");
31+
32+
InitializeComponent();
33+
34+
MainPage = new MainPage();
35+
}
36+
37+
Refer to this [link](https://help.syncfusion.com/maui/licensing/overview) for more details.
38+
39+
3. Clean and build the application.
40+
41+
4. Run the application.
42+
43+
## License
44+
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‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
2+
Microsoft Visual Studio Solution File, Format Version 12.00
3+
# Visual Studio Version 17
4+
VisualStudioVersion = 17.9.34701.34
5+
MinimumVisualStudioVersion = 10.0.40219.1
6+
Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "TreeMapVisualizeHierarchicalData", "TreeMapVisualizeHierarchicalData\TreeMapVisualizeHierarchicalData.csproj", "{49D47250-F17B-47E3-81FC-B6E927F0D00F}"
7+
EndProject
8+
Global
9+
GlobalSection(SolutionConfigurationPlatforms) = preSolution
10+
Debug|Any CPU = Debug|Any CPU
11+
Release|Any CPU = Release|Any CPU
12+
EndGlobalSection
13+
GlobalSection(ProjectConfigurationPlatforms) = postSolution
14+
{49D47250-F17B-47E3-81FC-B6E927F0D00F}.Debug|Any CPU.ActiveCfg = Debug|Any CPU
15+
{49D47250-F17B-47E3-81FC-B6E927F0D00F}.Debug|Any CPU.Build.0 = Debug|Any CPU
16+
{49D47250-F17B-47E3-81FC-B6E927F0D00F}.Debug|Any CPU.Deploy.0 = Debug|Any CPU
17+
{49D47250-F17B-47E3-81FC-B6E927F0D00F}.Release|Any CPU.ActiveCfg = Release|Any CPU
18+
{49D47250-F17B-47E3-81FC-B6E927F0D00F}.Release|Any CPU.Build.0 = Release|Any CPU
19+
{49D47250-F17B-47E3-81FC-B6E927F0D00F}.Release|Any CPU.Deploy.0 = Release|Any CPU
20+
EndGlobalSection
21+
GlobalSection(SolutionProperties) = preSolution
22+
HideSolutionNode = FALSE
23+
EndGlobalSection
24+
GlobalSection(ExtensibilityGlobals) = postSolution
25+
SolutionGuid = {2FE862FA-EBF5-42A5-B59B-C4FBA65D4447}
26+
EndGlobalSection
27+
EndGlobal

‎TreeMapVisualizeHierarchicalData/TreeMapVisualizeHierarchicalData/App.xaml‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
<?xml version = "1.0" encoding = "UTF-8" ?>
2+
<Application xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
3+
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
4+
xmlns:local="clr-namespace:TreeMapVisualizeHierarchicalData"
5+
x:Class="TreeMapVisualizeHierarchicalData.App">
6+
<Application.Resources>
7+
<ResourceDictionary>
8+
<ResourceDictionary.MergedDictionaries>
9+
<ResourceDictionary Source="Resources/Styles/Colors.xaml" />
10+
<ResourceDictionary Source="Resources/Styles/Styles.xaml" />
11+
</ResourceDictionary.MergedDictionaries>
12+
</ResourceDictionary>
13+
</Application.Resources>
14+
</Application>

‎TreeMapVisualizeHierarchicalData/TreeMapVisualizeHierarchicalData/App.xaml.cs‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
namespace TreeMapVisualizeHierarchicalData
2+
{
3+
public partial class App : Application
4+
{
5+
public App()
6+
{
7+
InitializeComponent();
8+
9+
MainPage = new AppShell();
10+
}
11+
}
12+
}

‎TreeMapVisualizeHierarchicalData/TreeMapVisualizeHierarchicalData/AppShell.xaml‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
<?xml version="1.0" encoding="UTF-8" ?>
2+
<Shell
3+
x:Class="TreeMapVisualizeHierarchicalData.AppShell"
4+
xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
5+
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
6+
xmlns:local="clr-namespace:TreeMapVisualizeHierarchicalData"
7+
Shell.FlyoutBehavior="Disabled"
8+
Title="TreeMapVisualizeHierarchicalData">
9+
10+
<ShellContent
11+
Title="Home"
12+
ContentTemplate="{DataTemplate local:MainPage}"
13+
Route="MainPage" />
14+
15+
</Shell>

‎TreeMapVisualizeHierarchicalData/TreeMapVisualizeHierarchicalData/AppShell.xaml.cs‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
namespace TreeMapVisualizeHierarchicalData
2+
{
3+
public partial class AppShell : Shell
4+
{
5+
public AppShell()
6+
{
7+
InitializeComponent();
8+
}
9+
}
10+
}

‎TreeMapVisualizeHierarchicalData/TreeMapVisualizeHierarchicalData/MainPage.xaml‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
<?xml version="1.0" encoding="utf-8" ?>
2+
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
3+
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
4+
xmlns:treemap="clr-namespace:Syncfusion.Maui.TreeMap;assembly=Syncfusion.Maui.TreeMap"
5+
xmlns:local="clr-namespace:TreeMapVisualizeHierarchicalData"
6+
x:Class="TreeMapVisualizeHierarchicalData.MainPage">
7+
8+
<ContentPage.BindingContext>
9+
<local:PopulationViewModel />
10+
</ContentPage.BindingContext>
11+
<Grid RowDefinitions="0.05*, 0.95*">
12+
<VerticalStackLayout>
13+
<Label Text="American Countries Ordered by Population and Grouped by Continent – 2023"
14+
VerticalTextAlignment="Center"
15+
HorizontalTextAlignment="Center"
16+
FontSize="{OnPlatform Default=14, iOS=14, Android=10 }"
17+
Grid.Row="0"
18+
Padding="3"
19+
FontAttributes="Bold" />
20+
</VerticalStackLayout>
21+
<treemap:SfTreeMap x:Name="treeMap"
22+
DataSource="{Binding PopulationDetails}"
23+
RangeColorValuePath="Population"
24+
PrimaryValuePath="Population"
25+
Margin="8"
26+
Grid.Row="1"
27+
ShowToolTip="True">
28+
<treemap:SfTreeMap.LeafItemSettings>
29+
<treemap:TreeMapLeafItemSettings LabelPath="Country">
30+
<treemap:TreeMapLeafItemSettings.TextStyle>
31+
<treemap:TreeMapTextStyle TextColor="#000000" />
32+
</treemap:TreeMapLeafItemSettings.TextStyle>
33+
</treemap:TreeMapLeafItemSettings>
34+
</treemap:SfTreeMap.LeafItemSettings>
35+
<treemap:SfTreeMap.LeafItemBrushSettings>
36+
<treemap:TreeMapUniformBrushSettings Brush="Orange" />
37+
</treemap:SfTreeMap.LeafItemBrushSettings>
38+
<treemap:SfTreeMap.LegendSettings>
39+
<treemap:TreeMapLegendSettings ShowLegend="True" />
40+
</treemap:SfTreeMap.LegendSettings>
41+
<treemap:SfTreeMap.Levels>
42+
<treemap:TreeMapLevel GroupPath="Continent" />
43+
</treemap:SfTreeMap.Levels>
44+
</treemap:SfTreeMap>
45+
46+
</Grid>
47+
48+
</ContentPage>

‎TreeMapVisualizeHierarchicalData/TreeMapVisualizeHierarchicalData/MainPage.xaml.cs‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+

2+
namespace TreeMapVisualizeHierarchicalData
3+
{
4+
public partial class MainPage : ContentPage
5+
{
6+
public MainPage()
7+
{
8+
InitializeComponent();
9+
}
10+
11+
}
12+
}

‎TreeMapVisualizeHierarchicalData/TreeMapVisualizeHierarchicalData/MauiProgram.cs‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
using Microsoft.Extensions.Logging;
2+
using Syncfusion.Maui.Core.Hosting;
3+
4+
namespace TreeMapVisualizeHierarchicalData
5+
{
6+
public static class MauiProgram
7+
{
8+
public static MauiApp CreateMauiApp()
9+
{
10+
var builder = MauiApp.CreateBuilder();
11+
builder
12+
.ConfigureSyncfusionCore()
13+
.UseMauiApp<App>()
14+
.ConfigureFonts(fonts =>
15+
{
16+
fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
17+
fonts.AddFont("OpenSans-Semibold.ttf", "OpenSansSemibold");
18+
});
19+
20+
#if DEBUG
21+
builder.Logging.AddDebug();
22+
#endif
23+
24+
return builder.Build();
25+
}
26+
}
27+
}

‎TreeMapVisualizeHierarchicalData/TreeMapVisualizeHierarchicalData/Model/PopulationDetails.cs‎

Lines changed: 109 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,109 @@
1+
using System;
2+
using System.Collections.Generic;
3+
using System.ComponentModel;
4+
using System.Linq;
5+
using System.Text;
6+
using System.Threading.Tasks;
7+
8+
namespace TreeMapVisualizeHierarchicalData
9+
{
10+
public class PopulationDetails
11+
{
12+
#region Fields
13+
14+
/// <summary>
15+
/// The name of the country.
16+
/// </summary>
17+
private string country;
18+
19+
/// <summary>
20+
/// The continent where the country is located.
21+
/// </summary>
22+
private string continent;
23+
24+
/// <summary>
25+
/// The population of the country.
26+
/// </summary>
27+
private double population;
28+
29+
#endregion
30+
31+
#region Constructor
32+
33+
/// <summary>
34+
/// Initializes a new instance of the <see cref="PopulationDetails"/> class.
35+
/// </summary>
36+
public PopulationDetails()
37+
{
38+
this.country = string.Empty;
39+
this.continent = string.Empty;
40+
}
41+
42+
#endregion
43+
44+
#region Properties
45+
46+
/// <summary>
47+
/// Gets or sets the name of the country.
48+
/// </summary>
49+
public string Country
50+
{
51+
get { return this.country; }
52+
set
53+
{
54+
this.country = value;
55+
this.RaisePropertyChanged(nameof(Country));
56+
}
57+
}
58+
59+
/// <summary>
60+
/// Gets or sets the continent where the country is located.
61+
/// </summary>
62+
public string Continent
63+
{
64+
get { return this.continent; }
65+
set
66+
{
67+
this.continent = value;
68+
this.RaisePropertyChanged(nameof(Continent));
69+
}
70+
}
71+
72+
/// <summary>
73+
/// Gets or sets the population of the country.
74+
/// </summary>
75+
public double Population
76+
{
77+
get { return this.population; }
78+
set
79+
{
80+
this.population = value;
81+
this.RaisePropertyChanged(nameof(Population));
82+
}
83+
}
84+
85+
#endregion
86+
87+
#region Event
88+
89+
/// <summary>
90+
/// Occurs when a property value is changed.
91+
/// </summary>
92+
public event PropertyChangedEventHandler? PropertyChanged;
93+
94+
#endregion
95+
96+
#region PropertyChanged
97+
98+
/// <summary>
99+
/// Method to raise the PropertyChanged event.
100+
/// </summary>
101+
/// <param name="propertyName">The property name.</param>
102+
private void RaisePropertyChanged(string propertyName)
103+
{
104+
this.PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
105+
}
106+
107+
#endregion
108+
}
109+
}

0 commit comments

Comments
 (0)