Skip to content

Commit 49d1417

Browse files
saiganesh-sakthivelsaiganesh-sakthivel
authored
Merge pull request #1 from SyncfusionExamples/Treemap_layout_type
TreeMap layout type change sample added
2 parents 8283d27 + 21b2808 commit 49d1417

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

42 files changed

+1318
-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-layout-type-change
2-
This repository holds the sample of TreeMap layout type change in the .NET MAUI platform.
1+
# How to Change the Layout Type in .NET MAUI TreeMap (SfTreeMap)
2+
This repository holds a sample of how to change the layout type 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/15783)
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.

‎TreeMapLayoutTypeChange/TreeMapLayoutTypeChange.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}") = "TreeMapLayoutTypeChange", "TreeMapLayoutTypeChange\TreeMapLayoutTypeChange.csproj", "{313F6948-6014-4667-BDE2-922D0D1B7F01}"
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+
{313F6948-6014-4667-BDE2-922D0D1B7F01}.Debug|Any CPU.ActiveCfg = Debug|Any CPU
15+
{313F6948-6014-4667-BDE2-922D0D1B7F01}.Debug|Any CPU.Build.0 = Debug|Any CPU
16+
{313F6948-6014-4667-BDE2-922D0D1B7F01}.Debug|Any CPU.Deploy.0 = Debug|Any CPU
17+
{313F6948-6014-4667-BDE2-922D0D1B7F01}.Release|Any CPU.ActiveCfg = Release|Any CPU
18+
{313F6948-6014-4667-BDE2-922D0D1B7F01}.Release|Any CPU.Build.0 = Release|Any CPU
19+
{313F6948-6014-4667-BDE2-922D0D1B7F01}.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 = {284566A8-7DE9-4D09-8295-7C90658DB650}
26+
EndGlobalSection
27+
EndGlobal

‎TreeMapLayoutTypeChange/TreeMapLayoutTypeChange/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:TreeMapLayoutTypeChange"
5+
x:Class="TreeMapLayoutTypeChange.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>

‎TreeMapLayoutTypeChange/TreeMapLayoutTypeChange/App.xaml.cs‎

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

‎TreeMapLayoutTypeChange/TreeMapLayoutTypeChange/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="TreeMapLayoutTypeChange.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:TreeMapLayoutTypeChange"
7+
Shell.FlyoutBehavior="Disabled"
8+
Title="TreeMapLayoutTypeChange">
9+
10+
<ShellContent
11+
Title="Home"
12+
ContentTemplate="{DataTemplate local:MainPage}"
13+
Route="MainPage" />
14+
15+
</Shell>

‎TreeMapLayoutTypeChange/TreeMapLayoutTypeChange/AppShell.xaml.cs‎

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

‎TreeMapLayoutTypeChange/TreeMapLayoutTypeChange/Behaviour/LayoutTypeBehaviour.cs‎

Lines changed: 98 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,98 @@
1+
using System;
2+
using System.Collections.Generic;
3+
using System.Linq;
4+
using System.Text;
5+
using System.Threading.Tasks;
6+
using Syncfusion.Maui.Inputs;
7+
using Syncfusion.Maui.TreeMap;
8+
9+
namespace TreeMapLayoutTypeChange
10+
{
11+
public class LayoutTypeBehaviour : Behavior<ContentPage>
12+
{
13+
#region Fields
14+
15+
/// <summary>
16+
/// The tree map instance.
17+
/// </summary>
18+
private SfTreeMap? treeMap;
19+
20+
/// <summary>
21+
/// The combobox instance
22+
/// </summary>
23+
private SfComboBox? comboBox;
24+
25+
#endregion
26+
27+
#region Override methods
28+
29+
/// <summary>
30+
/// Invoked when behavior is attached to a view.
31+
/// </summary>
32+
/// <param name="sampleView">The sample view to which the behavior is attached.</param>
33+
protected override void OnAttachedTo(ContentPage sampleView)
34+
{
35+
base.OnAttachedTo(sampleView);
36+
this.treeMap = sampleView.FindByName<SfTreeMap>("treeMap");
37+
this.comboBox = sampleView.FindByName<SfComboBox>("comboBox");
38+
if (this.comboBox != null)
39+
{
40+
this.comboBox.SelectionChanged += OnComboBoxSelectionChanged;
41+
}
42+
}
43+
44+
/// <summary>
45+
/// Invoked when behavior is detached from a view.
46+
/// </summary>
47+
/// <param name="sampleView">The sample view from which the behavior is detached.</param>
48+
protected override void OnDetachingFrom(ContentPage sampleView)
49+
{
50+
base.OnDetachingFrom(sampleView);
51+
52+
if (this.treeMap != null)
53+
{
54+
this.treeMap = null;
55+
}
56+
57+
if (this.comboBox != null)
58+
{
59+
this.comboBox.SelectionChanged -= OnComboBoxSelectionChanged;
60+
this.comboBox = null;
61+
}
62+
}
63+
64+
#endregion
65+
66+
#region Property changed
67+
68+
/// <summary>
69+
/// Invokes on combobox selection changed.
70+
/// </summary>
71+
/// <param name="sender">The combobox.</param>
72+
/// <param name="e">The event args.</param>
73+
private void OnComboBoxSelectionChanged(object? sender, Syncfusion.Maui.Inputs.SelectionChangedEventArgs e)
74+
{
75+
if (comboBox.SelectedIndex == 0)
76+
{
77+
treeMap.LayoutType = LayoutType.Squarified;
78+
}
79+
80+
else if (comboBox.SelectedIndex == 1)
81+
{
82+
treeMap.LayoutType = LayoutType.SliceAndDiceAuto;
83+
}
84+
85+
else if (comboBox.SelectedIndex == 2)
86+
{
87+
treeMap.LayoutType = LayoutType.SliceAndDiceHorizontal;
88+
}
89+
90+
else if (comboBox.SelectedIndex == 3)
91+
{
92+
treeMap.LayoutType = LayoutType.SliceAndDiceVertical;
93+
}
94+
}
95+
96+
#endregion
97+
}
98+
}

‎TreeMapLayoutTypeChange/TreeMapLayoutTypeChange/MainPage.xaml‎

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
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:editors="clr-namespace:Syncfusion.Maui.Inputs;assembly=Syncfusion.Maui.Inputs"
6+
xmlns:local="clr-namespace:TreeMapLayoutTypeChange"
7+
x:Class="TreeMapLayoutTypeChange.MainPage">
8+
9+
<Grid>
10+
<Grid.RowDefinitions>
11+
<RowDefinition Height="auto" />
12+
<RowDefinition Height="0.85*" />
13+
<RowDefinition Height="0.15*" />
14+
</Grid.RowDefinitions>
15+
16+
<Label Text="American Countries Ordered by Population - 2023"
17+
Grid.Row="0"
18+
VerticalTextAlignment="Center"
19+
HorizontalTextAlignment="Center"
20+
FontSize="14"
21+
Padding="3"
22+
FontAttributes="Bold" />
23+
24+
<editors:SfComboBox x:Name="comboBox"
25+
Grid.Row="2"
26+
WidthRequest="250"
27+
HeightRequest="50"
28+
DisplayMemberPath="Name"
29+
TextMemberPath="Name"
30+
SelectionChanged="comboBox_SelectionChanged"
31+
SelectedIndex="0"
32+
ItemsSource="{Binding LayoutType}">
33+
<editors:SfComboBox.BindingContext>
34+
<local:LayoutTypeViewModel />
35+
</editors:SfComboBox.BindingContext>
36+
</editors:SfComboBox>
37+
38+
<treemap:SfTreeMap x:Name="treeMap"
39+
Margin="8"
40+
Grid.Row="1"
41+
DataSource="{Binding PopulationDetails}"
42+
LayoutType="SliceAndDiceHorizontal"
43+
PrimaryValuePath="Population"
44+
ShowToolTip="True">
45+
<treemap:SfTreeMap.BindingContext>
46+
<local:PopulationViewModel />
47+
</treemap:SfTreeMap.BindingContext>
48+
<treemap:SfTreeMap.LeafItemSettings>
49+
<treemap:TreeMapLeafItemSettings LabelPath="Country">
50+
</treemap:TreeMapLeafItemSettings>
51+
</treemap:SfTreeMap.LeafItemSettings>
52+
<treemap:SfTreeMap.LeafItemBrushSettings>
53+
<treemap:TreeMapUniformBrushSettings Brush="#D21243" />
54+
</treemap:SfTreeMap.LeafItemBrushSettings>
55+
</treemap:SfTreeMap>
56+
57+
</Grid>
58+
59+
<ContentPage.Behaviors>
60+
<local:LayoutTypeBehaviour />
61+
</ContentPage.Behaviors>
62+
63+
</ContentPage>

‎TreeMapLayoutTypeChange/TreeMapLayoutTypeChange/MainPage.xaml.cs‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
namespace TreeMapLayoutTypeChange
2+
{
3+
public partial class MainPage : ContentPage
4+
{
5+
public MainPage()
6+
{
7+
InitializeComponent();
8+
}
9+
10+
private void comboBox_SelectionChanged(object sender, Syncfusion.Maui.Inputs.SelectionChangedEventArgs e)
11+
{
12+
13+
}
14+
}
15+
16+
}

‎TreeMapLayoutTypeChange/TreeMapLayoutTypeChange/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 TreeMapLayoutTypeChange
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+
}

0 commit comments

Comments
 (0)