diff --git a/GettingStarted.png b/GettingStarted.png new file mode 100644 index 0000000..74512c0 Binary files /dev/null and b/GettingStarted.png differ diff --git a/GettingStarted_Sample/GettingStarted_Sample.csproj b/GettingStarted_Sample/GettingStarted_Sample.csproj index 102037b..2c08f0e 100644 --- a/GettingStarted_Sample/GettingStarted_Sample.csproj +++ b/GettingStarted_Sample/GettingStarted_Sample.csproj @@ -11,7 +11,7 @@ GettingStarted_Sample en-US UAP - 10.0.16299.0 + 10.0.26100.0 10.0.16299.0 14 512 @@ -154,7 +154,7 @@ - 6.2.7 + 6.2.14 * diff --git a/README.md b/README.md index c5caa81..f87a82a 100644 --- a/README.md +++ b/README.md @@ -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(); + 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 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 + + + + + + + + + + + +``` + +## 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)