In this article you will learn how to bind the xamTreemap™ control to an ADO.NET Entity Data Model .
Create a new Windows Presentation Foundation Application in Visual Studio 2010 named WpfTreemapDemo.
Add the following NuGet package to your application:
Infragistics.WPF.Treemap
For more information on setting up the NuGet feed and adding NuGet packages, you can take a look at the following documentation: NuGet Feeds.
Right-click on your project and select Add > New Item .
Create a new ADO.NET Entity Data Model named TreemapModel.
Choose your database. For this sample we are going to connect to a sample database – AdventureWorks2008.
Select the tables you need. For this sample we are going to work with ProductCategory, ProductSubcategory and Product.
These tables linked together will produce a hierarchical data source which we will pass to the xamTreemap control. Visual Studio automatically creates navigation properties from which we will use:
ProductCategory.ProductSubcategories
ProductSubcategory.Products
Edit MainWindow.xaml:
In XAML:
<Window x:Class="WpfTreemapDemo.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:ig="http://schemas.infragistics.com/xaml" Loaded="MainWindow_Loaded" Title="MainWindow"> <Window.Resources> <!--The data source for the xamTreemap control--> <CollectionViewSource x:Key="ProductCategoriesViewSource" /> </Window.Resources> <Grid DataContext="{StaticResource ProductCategoriesViewSource}"> <ig:XamTreemap x:Name="Treemap" ItemsSource="{Binding}"> <ig:XamTreemap.NodeBinders> <!--Binder for the ProductCategory items--> <ig:NodeBinder TextPath="Name" TargetTypeName="ProductCategory" ItemsSourcePath="ProductSubcategories" /> <!--Binder for the ProductSubcategory items--> <ig:NodeBinder TextPath="Name" TargetTypeName="ProductSubcategory" ItemsSourcePath="Products" /> <!--Binder for the Product items--> <ig:NodeBinder TextPath="Name" ValuePath="StandardCost" TargetTypeName="Product" /> </ig:XamTreemap.NodeBinders> </ig:XamTreemap> </Grid> </Window>
In the code-behind file for MainWindow.xaml add:
In Visual Basic:
Imports System.Data.Objects Class MainWindow Private Sub Window_Loaded _ (ByVal sender As System.Object, ByVal e As System.Windows.RoutedEventArgs) Dim adventureWorks2008Entities As New AdventureWorks2008Entities() 'Get an instance of the CollectionViewSource resource from MainWindow.xaml Dim productCategoriesViewSource As CollectionViewSource = DirectCast(Me.FindResource("ProductCategoriesViewSource"), CollectionViewSource) 'Create a new query for the ProductCategory items Dim productCategoriesQuery As ObjectQuery(Of WpfTreemapDemo.ProductCategory) = adventureWorks2008Entities.ProductCategories 'Execute the query productCategoriesViewSource.Source = productCategoriesQuery.Execute(MergeOption.AppendOnly) End Sub End Class
In C#:
using System.Data.Objects; using System.Windows; using System.Windows.Data; namespace WpfTreemapDemo { public partial class MainWindow : Window { public MainWindow() { InitializeComponent(); } void MainWindow_Loaded(object sender, RoutedEventArgs e) { AdventureWorks2008Entities adventureWorks2008Entities = new AdventureWorks2008Entities(); //Get an instance of the CollectionViewSource resource from MainWindow.xaml CollectionViewSource productCategoriesViewSource = (CollectionViewSource)(this.FindResource("ProductCategoriesViewSource")); //Create a new query for the ProductCategory items ObjectQuery<WpfTreemapDemo.ProductCategory> productCategoriesQuery = adventureWorks2008Entities.ProductCategories; //Execute the query productCategoriesViewSource.Source = productCategoriesQuery.Execute(MergeOption.AppendOnly); } } }
Execute your application.