Un contrôle Tag Cloud pour Windows Phone 7

Voici un contrôle bien pratique sur Windows Phone, où la place est assez limitée.
Il permet de refléter le poids d’éléments identiques d’une collection. Ce type de contrôle se rencontre très souvent sur les blogs, pour représenter la variété de mots-clé adressés dans les billets.
Dans le cas d’une liste contenant beaucoup d’éléments, le tag cloud peut faciliter la navigation en première intention et éviter de faire défiler la liste par une gestuelle répétitive.

Voici un exemple de rendu pour 2 tag clouds. Vous pouvez jouer sur la couleur de fond (Background), d’avant plan (Foreground) et sur le style de la police de caractères (FontFamily) du contrôle.
Le contrôle est compatible avec le mode portrait et paysage.

La source de données utilisée par le contrôle est une collection d’objets dont on affiche le .ToString().
Dans mon cas, c’est une collection d’entiers pour le premier tag cloud et une collection de chaines de caractères pour le second.
Il vous suffit de renseigner/binder la propriété ItemsSource de votre tag cloud avec cette collection, comme vous le feriez avec une ListBox.
La taille de la police de caractères sera calculée automatiquement en fonction du nombre d’occurrences de l’élément dans la liste.

Utilisez la propriété SelectedItem ou l’événement SelectionChanged pour récupérer le tag sélectionné.

Dans l’exemple ci-dessus, je souhaite afficher une collection de DataSample:

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

D’où les sources de données de mes 2 tag clouds, où dataSampleList est une collection de DataSample :

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

Côté XAML, la déclaration du namespace:

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

Le code xaml correspondant au premier tag cloud:

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

 Le code xaml correspondant au second, avec un textblock “bindé” sur l’élément sélectionné est:

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

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

Voici l’assembly vous permettant d’utiliser le Tag Cloud.

Les sources devraient être disponibles bientôt dans le toolkit Coding4Fun sur CodePlex