A Tag Cloud control for Windows Phone 7

The tag cloud represents items size according to the sum of their occurences in the list. This is typically the kind of control that you see on blogs, to show the post tags.
When having a large list containing lots of items, the tag cloud can be used for a first filter to avoid sliding in the list for too long.

Here is an example of 2 tag clouds. You can change the background, foreground and the font family of the control. The tag cloud is compatible with both portrait and landscape mode.

 

The datasource used by the control is a collection of objects, and uses .ToString() for its representation.

In my case it is a collection of int for the first tag cloud and a collection of string for the second tag cloud. Bind the ItemsSource property of the tag cloud with this collection just like you would for a ListBox.
The font size will be computed automatically, according to the item occurrences in the source list.

Use SelectedItem property or SelectionChanged event to get the selected tag.

In my example, I use a collection of DataSample:

 public class DataSample
{
    public string City { get; set; }
    public int Year { get; set; }
}

The datasources of my 2 tag clouds are like follows, where dataSampleList is a collection of DataSample :

ct1.ItemsSource = dataSampleList.Select(d => d.Year);

ct2.ItemsSource = dataSampleList.Select(d => d.City);

In the XAML code, the namespace should be declared like this:

 xmlns:cloud="clr-namespace:Wp7TagCloud;assembly=Wp7TagCloud"

Here is the code to declare the first tag cloud:

 <cloud:TagCloud x:Name="ct1" FontFamily="Georgia"/>

 Here is the second one, added with a TextBlock binded on the SelectedItem of the tag cloud and also handling the SelectionChanged event:

 <cloud:TagCloud x:Name="ct2"
      Foreground="Black" 
      Background="DarkKhaki"
      SelectionChanged="ct2_SelectionChanged"/>

<TextBlock Text="Selected City:"/>
<TextBlock Text="{Binding ElementName=ct2, Path=SelectedItem}"/>

Here is the assembly you should download to use the tag cloud control.

The source code should be available soon in the Coding4Fun Toolkit (thanks Clint ).

Comments

• Anonymous
  September 01, 2011
  Hi, I tried to use your control but I had some problems. When I add an ItemsSource manually in Page constructor everything goes right, but when I set ItemsSource after an event call the data is not refreshed. Any hints or tips? Thanks in advance.

• Anonymous
  September 06, 2011
  Lucas, I'll check that as soon as possible

• Anonymous
  September 08, 2011
  Lucas, I juste fixed it : can you check ? Thanks for your feedback !

• Anonymous
  March 29, 2012
  What if I have a collection of strings and doubles and I need to make a tag cloud (the largest string is one with the biggest number). Do you have or know solution for that?

• Anonymous
  April 03, 2012
  The comment has been removed

• Anonymous
  May 30, 2012
  Setting the selectedItem (or the item selected item is bound to) from code doesn't seem to update the highlight color :|

• Anonymous
  August 15, 2012
  I don't see the assembly here - could you please point to that or the code? I don't think its there yet in Coding4Fun toolkik?

• Anonymous
  August 22, 2012
  Hello Tushar, You have a link to the assembly just under the code in this article.

• Anonymous
  December 19, 2012
  Can we have access to the source code for this project??