Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file added GettingStarted.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
4 changes: 2 additions & 2 deletions GettingStarted_Sample/GettingStarted_Sample.csproj
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@
<AssemblyName>GettingStarted_Sample</AssemblyName>
<DefaultLanguage>en-US</DefaultLanguage>
<TargetPlatformIdentifier>UAP</TargetPlatformIdentifier>
<TargetPlatformVersion Condition=" '$(TargetPlatformVersion)' == '' ">10.0.16299.0</TargetPlatformVersion>
<TargetPlatformVersion Condition=" '$(TargetPlatformVersion)' == '' ">10.0.26100.0</TargetPlatformVersion>
<TargetPlatformMinVersion>10.0.16299.0</TargetPlatformMinVersion>
<MinimumVisualStudioVersion>14</MinimumVisualStudioVersion>
<FileAlignment>512</FileAlignment>
Expand Down Expand Up @@ -154,7 +154,7 @@
</ItemGroup>
<ItemGroup>
<PackageReference Include="Microsoft.NETCore.UniversalWindowsPlatform">
<Version>6.2.7</Version>
<Version>6.2.14</Version>
</PackageReference>
<PackageReference Include="Syncfusion.SfTreeMap.UWP">
<Version>*</Version>
Expand Down
156 changes: 128 additions & 28 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,42 +1,142 @@
# SfTreeMap Getting Started UWP
# Getting Started with UWP TreeMap (SfTreeMap)

This repository contains sample to getting started with the [Syncfusion UWP TreeMap](https://help.syncfusion.com/uwp/treemap/getting-started) control.
This sample demonstrates how to create a UWP TreeMap using the Syncfusion `SfTreeMap` control.

## Syncfusion controls
## Prerequisites

This project used the following Syncfusion control(s):
* [SfTreeMap](https://www.syncfusion.com/uwp-ui-controls/treemap)
- Visual Studio 2022 or later
- Windows 10 SDK (10.0.16299.0 or later)
- [Syncfusion.SfTreeMap.UWP](https://www.nuget.org/packages/Syncfusion.SfTreeMap.UWP) NuGet package (latest)

## Requirements to run the sample
## Adding Assembly Reference

* [Visual Studio](https://visualstudio.microsoft.com/downloads/)
* Windows 10 SDK
### Option 1: Via NuGet Package Manager

Refer to the following link for more details - [System Requirements](https://help.syncfusion.com/uwp/system-requirements)
1. Right-click on the project in **Solution Explorer** and select **Manage NuGet Packages**.
2. Search for `Syncfusion.SfTreeMap.UWP` and install it.

## How to run the sample
### Option 2: Via Extension Reference

1. Clone the sample and open it in Visual Studio.
1. Open the **Add Reference** window from your project.
2. Choose **Windows > Extensions > Syncfusion Controls for UWP XAML**.

*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.
## Adding Namespace

public App()
{
//Register Syncfusion license
Syncfusion.Licensing.SyncfusionLicenseProvider.RegisterLicense("YOUR LICENSE KEY");
After adding the reference, include the following namespace in your `MainPage.xaml`:

this.InitializeComponent();
this.Suspending += OnSuspending;
}

Refer to this [link](https://help.syncfusion.com/uwp/licensing/overview) for more details.

3. Clean and build the application.
```xml
xmlns:syncfusion="using:Syncfusion.UI.Xaml.TreeMap"
```

4. Run the application.
## Creating the Data Model for TreeMap

## License
Create a `PopulationDetail` model class (`Model/PopulationDetail.cs`) to hold the data:

Syncfusion has no liability for any damage or consequence that may arise by using or viewing the samples. The samples are for demonstrative purposes, and if you choose to use or access the samples, you agree to not hold Syncfusion liable, in any form, for any damage that is 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.
```csharp
namespace GettingStarted_Sample
{
public class PopulationDetail
{
public string Continent { get; set; }
public string Country { get; set; }
public double Growth { get; set; }
public double Population { get; set; }
}
}
```

## Creating the ViewModel for TreeMap

Create a `PopulationViewModel` class (`ViewModel/PopulationViewModel.cs`) with sample data:

```csharp
using System.Collections.ObjectModel;

namespace GettingStarted_Sample
{
public class PopulationViewModel
{
public PopulationViewModel()
{
this.PopulationDetails = new ObservableCollection<PopulationDetail>();
PopulationDetails.Add(new PopulationDetail() { Continent = "Asia", Country = "Indonesia", Growth = 3, Population = 237641326 });
PopulationDetails.Add(new PopulationDetail() { Continent = "Asia", Country = "Russia", Growth = 2, Population = 152518015 });
PopulationDetails.Add(new PopulationDetail() { Continent = "Asia", Country = "Malaysia", Growth = 1, Population = 29672000 });
PopulationDetails.Add(new PopulationDetail() { Continent = "North America", Country = "United States", Growth = 4, Population = 315645000 });
PopulationDetails.Add(new PopulationDetail() { Continent = "North America", Country = "Mexico", Growth = 2, Population = 112336538 });
PopulationDetails.Add(new PopulationDetail() { Continent = "North America", Country = "Canada", Growth = 1, Population = 35056064 });
PopulationDetails.Add(new PopulationDetail() { Continent = "South America", Country = "Colombia", Growth = 1, Population = 47000000 });
PopulationDetails.Add(new PopulationDetail() { Continent = "South America", Country = "Brazil", Growth = 3, Population = 193946886 });
PopulationDetails.Add(new PopulationDetail() { Continent = "Africa", Country = "Nigeria", Growth = 2, Population = 170901000 });
PopulationDetails.Add(new PopulationDetail() { Continent = "Africa", Country = "Egypt", Growth = 1, Population = 83661000 });
PopulationDetails.Add(new PopulationDetail() { Continent = "Europe", Country = "Germany", Growth = 1, Population = 81993000 });
PopulationDetails.Add(new PopulationDetail() { Continent = "Europe", Country = "France", Growth = 1, Population = 65605000 });
PopulationDetails.Add(new PopulationDetail() { Continent = "Europe", Country = "UK", Growth = 1, Population = 63181775 });
}

public ObservableCollection<PopulationDetail> PopulationDetails
{
get;
set;
}
}
}
```

## Initializing the TreeMap (XAML)

In `MainPage.xaml`, set the `DataContext` to `PopulationViewModel`, then initialize `SfTreeMap` by binding `ItemsSource` to the data collection and setting `WeightValuePath` to the data property:

```xml
<Page
x:Class="GettingStarted_Sample.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:GettingStarted_Sample"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:syncfusion="using:Syncfusion.UI.Xaml.TreeMap"
mc:Ignorable="d"
Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

<Grid>
<Grid.DataContext>
<local:PopulationViewModel/>
</Grid.DataContext>

<syncfusion:SfTreeMap ItemsSource="{Binding PopulationDetails}"
WeightValuePath="Population">
</syncfusion:SfTreeMap>
</Grid>
</Page>
```

## Initializing the TreeMap (Code-Behind)

Alternatively, you can create the TreeMap entirely in C# code-behind:

```csharp
using Syncfusion.UI.Xaml.TreeMap;

// Creating the ViewModel
PopulationViewModel viewModel = new PopulationViewModel();

// Assigning the data context
this.DataContext = viewModel;

// Initializing the TreeMap
SfTreeMap sfTreeMap = new SfTreeMap();

// Setting ItemsSource and WeightValuePath
sfTreeMap.ItemsSource = viewModel.PopulationDetails;
sfTreeMap.WeightValuePath = "Population";

// Adding TreeMap to the Grid
grid.Children.Add(sfTreeMap);
```

![Getting started with uwp treemap](GettingStarted.png)

## Reference

- [Syncfusion UWP TreeMap Getting Started Documentation](https://help.syncfusion.com/uwp/treemap/getting-started)
Loading