A Tag Cloud control for Windows Phone 7

 

 

A Tag Cloud control for Windows Phone 7

  • Comments 9

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.

  image[19] image[4]

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 Winking smile).

Leave a Comment
  • Please add 2 and 3 and type the answer here:
  • Post
  • 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.

  • Lucas, I'll check that as soon as possible

  • Lucas, I juste fixed it : can you check ?

    Thanks for your feedback !

  • 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?

  • To use my control, you should provide a list of strings having as many occurrences of the same string than the corresponding number (double).

    If it leads to a large number of occurences in the string list, you can provide an equivalent repartition (percentage) of string occurencies for each number.

    Example : if you have ((Foo, 25000) (Bar, 50000)) you can provide the list (Foo, Bar, Bar).

    This list should be easy to provide from your existing structure.

    Hope it helps

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

  • 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?

  • Hello Tushar,

    You have a link to the assembly just under the code in this article.

  • Can we have access to the source code for this project??

Page 1 of 1 (9 items)
Page 1 of 4 (88 items) 1234