Infragistics logo
메뉴
.NET and JavaScript UI Controls
Version

Binding xamTagCloud to Data

Before You Begin

You can bind the xamTagCloud™ control to any object that implements the IEnumerable interface. However, if you want to enable all of the xamTagCloud control’s functionality, you should add XamTagCloudItem objects to the xamTagCloud Items collection.

The XamTagCloudItem objects contain Weight and Content properties which are used to determine the tags in the cloud and the size of the font of each individual tag. However, if you bind xamTagCloud to a different data source, you can set the Weight and Content properties.

The observable collection used in this walkthrough is a collection of Product objects. The DataUtil class is available for you in C# and VB.NET to download and use in your project while working through this sample. However, the DataUtil class is not discussed, as it is beyond the scope of this topic.

What You Will Accomplish

You will create a xamTagCloud control bound to data and you will specify which properties on the data source to use for providing the content and weight information to the control.

Follow these Steps

  1. Create a Microsoft® WPF™ application.

  1. Add the following NuGet package reference to your application:

    • Infragistics.WPF.TagCloud

    For more information on setting up the NuGet feed and adding NuGet packages, you can take a look at the following documentation: NuGet Feeds.

  1. Attach an event handler to the UserControl’s Loaded event.

In XAML:

<UserControl Loaded="UserControl_Loaded"
… >
   …
</UserControl>

  1. Place using/Imports directives in your code-behind or add the following XML namespace declarations for xamTagCloud and the DataUtil class.

In XAML:

xmlns:local="clr-namespace:xamTagCloud2XAML"
xmlns:ig="http://schemas.infragistics.com/xaml"

In Visual Basic:

Imports Infragistics.Controls.Menus

In C#:

using Infragistics.Controls.Menus;

  1. If you are using XAML, add the DataUtil object as a user control resource.

In XAML:

<UserControl.Resources>
   <local:DataUtil x:Key="DataUtil" />
</UserControl.Resources>

  1. Add an instance of the xamDataTree control to the default Grid layout panel named LayoutRoot. If you are doing this in procedural code, you can handle the user control’s Loaded event and place the code in the event handler.

    • MaxScale – 5

    • MinScale - 1

    • Set the ItemsSource property to the Products property of the DataUtil object, which returns the Products collection.

    • Set the WeightMemberPath property to the ProductID property.

    • Set the DisplayMemberPath property to the ProductName property.

In XAML:

<Grid x:Name="LayoutRoot" Background="White">
   <ig:XamTagCloud x:Name="myTagCloud" MaxScale="2"
             MinScale="1"
             ItemsSource="{Binding Source={StaticResource DataUtil},Path=Products}"
             WeightMemberPath="ProductID" DisplayMemberPath="ProductName">
   </ig:XamTagCloud>
</Grid>

In Visual Basic:

Dim myTagCloud As New XamTagCloud()
myTagCloud.MaxScale = 5
myTagCloud.MinScale = 1
myTagCloud.ItemsSource = DataUtil.Products
myTagCloud.WeightMemberPath = "ProductID"
myTagCloud.DisplayMemberPath = "ProductName"

In C#:

XamTagCloud myTagCloud = new XamTagCloud();
myTagCloud.MaxScale = 5;
myTagCloud.MinScale = 1;
myTagCloud.ItemsSource = DataUtil.Products;
myTagCloud.WeightMemberPath = "ProductID";
myTagCloud.DisplayMemberPath = "ProductName";

  1. Add the instance of xamTagCloud to the Grid panel’s Children collection.

Note: When you initially create a new page, a grid panel is created by default and named LayoutRoot.

In Visual Basic:

Me.LayoutRoot.Children.Add(myTagCloud)

In C#:

this.LayoutRoot.Children.Add(myTagCloud);

  1. Save and run your application.

Related Topics

Adding xamTagCloud to Your Page