Migrer le LongListSelector vers Windows Phone 8

Le LongListSelector

Lors de la sortie du SDK Windows Phone 7 en 2010 certains contrôles natifs ont fait leur apparition comme l’application bar, d’autres managés hérités de Silverlight comme la ListBox. Ce dernier nous permettait d’afficher des éléments sous forme d’une liste déroulante. Mais la ListBox a été vite reconnue comme souffrant de problèmes de performances.

C’est en partie pour ces soucis de performances que le Silverlight Toolkit pour Windows Phone a intégré le contrôle LongListSelector qui nous permettait de même de faire un groupement d’éléments où la navigation d’un groupe à l’autre se faisait par l’intérmédiaire d’une “JumpList”.

Avec la sortie du SDK Windows Phone 8, celui ici intègre dorénavant directement le contrôle LongListSelector qui est à présent un contrôle natif, comme l’AppBar. Simultanément avec son arrivée  dans le SDK, il a été retiré du toolkit. Cet article a pour but de vous guider pour migrer vos projets Windows Phone 7 avec LongListSelector du toolkit vers un projet Windows Phone 8 avec LongListSelector du SDK.

Tout d’abord, les namespaces

Côté C#, aucun changement, le LongListSelector est toujours présent dans le namespace Microsoft.Phone.Controls mais si vous tentez de générer votre projet directement après le passage de votre projet en Windows Phone 8 sans mettre à jour le toolkit, le projet vous signalera un conflit de nommage. En effet, le LongListSelector sera présent deux fois dans le même namespace mais dans deux assemblies différentes. Commencez tout d’abord pour mettre à jour le tookit, vous pouvez le télécharger sur codeplex à cette adresse ou bien l’intégrer directement depuis NuGet.

Dans votre xaml, modifiez simplement le préfixe de namespace de vos LongListSelector pour passer de celui du toolkit (par défaut “toolkit:” à celui du sdk (par défaut “phone:”).

Templates et Styles

Globalement, les propriétés de styles et templates restent inchangées. La seule exception est l’ancienne propriété de template “GroupItemTemplate” qui n’existe plus et qui a été remplacée par une propriété Style “JumpListStyle” dont vous devez modifier les propriétés LayoutMode et  GridCellSize. En gros votre code passera de ceci :

<toolkit:LongListSelector.GroupItemTemplate>
   <DataTemplate>
      <Border Width="40" Height="40">
         <TextBlock Text="{Binding Key}" />
      </Border>
   </DataTemplate>
</toolkit:LongListSelector.GroupItemTemplate>

A ceci :

<phone:LongListSelector.JumpListStyle>
   <Style TargetType="phone:LongListSelector">
      <Setter Property="GridCellSize"  Value="113,113"/>
      <Setter Property="LayoutMode" Value="Grid" />
      <Setter Property="ItemTemplate">
         <Setter.Value>
            <DataTemplate>
               <Border Width="40" Height="40">
                  <TextBlock Text="{Binding Key}" />
               </Border>
            </DataTemplate>
         </Setter.Value>
      </Setter>
   </Style>
</phone:LongListSelector.JumpListStyle>

Activer le groupement

Pour utiliser le groupement dans vos LongListSelector, deux propriétés doivent être renseignées : LayoutMode et IsGroupingEnabled. La première indique si les éléments sont placés sous forme de liste dans une seule dimension ou sous forme de grille (un peu comme le controle GridView sous Windows 8). La seconde doit être obligatoirement mise à “true” pour pouvoir grouper vos éléments.

Vous devrez OBLIGATOIREMENT renseigner la propriété JumpListStyle, sous peine de faire crasher votre page (notamment lié au fait de ne pas avoir renseigné la propriété GridCellSize).

Vous pouvez, si vous le désirez, mettre la valeur “true” à la propriété “HideEmptyGroups” pour ne pas afficher les groupes qui n’ont aucun sous-élément.

Modèle supportant le groupement

Avec le LongListSelector du Toolkit, le contrôle supportait d’assembler les éléments d’un groupe dans une collection héritant directement de IEnumerable<T>, ainsi nous utilisions directement le résultat de l’appel de la methode GroupBy(…). Avec la nouvelle version du contrôle, les éléments d’un sous-groupe doivent être dans une collection héritant de IList<T>, ceci empêche d’utiliser directement le résultat de l’appel de GroupBy mais il nous suffit de passer par une petite classe générique faisant l’intermédiaire telle que celle-ci:

public class Group<Tkey, TElement> : List<TElement>
{
    public Tkey Key { get; set; }
    public Group(IGrouping<Tkey, TElement> group)
        : base(group)
    {
        this.Key = group.Key;
    }
}

Il vous suffira ensuite de suivre votre GroupBy par un Select qui vous retourne des éléments “Group” et le tour est joué pour votre liaison de données

Conclusion

Même si Visual Studio s’occupe de migrer votre projet Windows Phone 7.1 vers Windows Phone 8, certaines modification manuelles restent à faire, notamment lorsque des librairies externes au SDK sont incluses, c’est le cas pour le Windows Phone Toolkit qui n’implémente plus le LongListSelector qui est maintenant implémenté directement dans le SDK. Mais des choix de développement différents ont été fait et des petites modifications mineures restent à faire. Néanmoins nous pouvons profiter maintenant d’un LongListSelector directement présent dans le SDK et de manière native, ce qui apporte des performance améliorées.

Par Mathieu Hollebecq

[TIP] Changer la couleur de l’état indéterminé d’une ProgressBar sous Windows 8

Si vous avez essayé de modifier la couleur de la ProgressBar en changeant sa propriété « Foreground », vous avez pu vous rendre compte que celle ne faisait rien…. Ceci est dû au fait que la couleur est définie par la couleur d’accentuation de l’utilisateur (modifiable depuis les paramètres du PC, champs Personnaliser, onglet Ecran d’accueil) et non pas par la propriété Foreground.

Vous pouvez tout de même la modifier en déclarant une chaîne de caractère portant la clé « ProgressBarIndeterminateForegroundThemeBrush »dans les ressources de votre application. Cela aura pour effet de surcharger la couleur de la ProgressBar sur toute l’application :

<x:String x:Key="ProgressBarIndeterminateForegroundThemeBrush">#FF1E4C82</x:String>


Solution par Mathieu Hollebecq
Mise en forme par JC VASSELON

Pimp ma listbox

On va découvrir ici comment éditer et transformer une ListBox. L’exemple sera fait sur du Windows Phone, mais pourra être facilement répliqué en WPF, Silverlight, … En Xaml quoi !

Je vais rapidement rappeler les bases d’une ListBox et nous passerons ensuite sur quelques exemples concrets (ListBox horizontale, ListBox wrappée).

Pour cet article, j’ai utilisé Expression Blend, qui permet d’éditer les styles rapidement et facilement :
Un clic droit sur la ListBox, et dans le menu additionnal template vous pourrez éditer facilement les éléments que je signale.

Structure d’une ListBox

Comme son nom l’indique, une ListBox sert à afficher une liste d’éléments, une collection d’objets. En plus de son template, elle est constituée de trois autres templates qui permettent de la personnaliser plus précisément. C’est à eux que l’on va s’intéresser.

Illustrons ces différents templates, avec un exemple simple : une boîte de bonbons :

• ItemTemplate : La forme sous laquelle vont s’afficher les objets contenus dans la collection. Le bonbon brut.
• ItemContainerStyle : Le conteneur de l’item. le papier autour du bonbon. C’est sur lui qu’on gèrera l’espacement entre chaque item.
• ItemsPanel : Le conteneur général. La boîte.

ListBox Horizontale

En partant de cette base, comment faire une ListBox Horizontale ?

1. On édite l’ItemsPanel, on veut un conteneur horizontal. On passe donc la propriété Orientation du StackPanel sur “Horizontal”;
2. On revient à notre ListBox, on édite les propriétés liées au Layout, on passe HorizontalScrollBarVisibility sur “Auto” ou “Visible” et VerticalScrollBarVisibility sur “Disabled” (Si vous êtes sur Blend, et que vous ne trouvez pas ces propriétés, cliquez sur la petite flèche en bas de Layout);
3. On édite l’ItemContainerStyle en mettant une marge à droite sur notre bordure (12px est le nombre magique en général) pour pas que les éléments soit collés;
4. Il ne vous reste plus qu’à éditer l’ItemTemplate en quelques clics en fonction de vos goûts.

Et nous avons une belle ListBox horizontale !

ListBox Wrapped

Pour rappel, le wrap est le système qui permet à des éléments de revenir à la ligne automatiquement et de s’adapter à différentes tailles d’écrans :

(oui ce sont des carottes wrappées)

Donc si on a bien suivi, qu’a-t-on à faire ?

1. Modifier l’ItemsPanel, oui ! On supprime le StackPanel qu’on remplace par le WrapPanel disponible dans le Silverlight Toolkit For Windows Phone (disponible via Nuggets);
2. Régler l’HorizontalScrollBarVisibility et la VericalScrollBarVisibility en fonction du sens dans lequel vous voulez faire aller vos éléments (verticaux ou horizontaux);
3. Editer l’ItemContainerStyle avec une marge en bas et à droite pour “décoller” les éléments entre eux;
4. Et éditer l’ItemTemplate en fonction de vos goûts !

Conclusion

On a donc vu rapidement la structure d’une ListBox et comment faire facilement différents types de listes.

Par JC VASSELON