Utiliser un DataTemplateSelector en Silverlight

Il existe en WPF beaucoup de classes intervenant dans une utilisation avancée du DataBinding. Certaines d’entre elles ne sont pas présentes à ce jour dans Silverlight. Parmi elles, la classe System.Windows.Controls.DataTemplateSelector qui permet de choisir un DataTemplate s’appliquant à un objet selon des règles définies par le développeur. Heureusement, il est très facile de recréer cette classe en Silverlight et cet article va vous permettre de voir comment.

Note : cet article reprend la solution proposé par Raul Mainardi Neto proposée sur CodeProject.

Le problème

Imaginons que vous ayez une ListBox dans laquelle se trouvent plusieurs objets métiers avec des caractéristiques différentes. Pour définir l’affichage de vos éléments, vous allez remplir la propriété ItemTemplate du ListBox. Seulement voilà, vous souhaiteriez changer quelque peu, voir intégralement, l’affichage de l’élément selon ses caractéristiques. C’est dans ce cas que le DataTemplateSelector va vous être utile ; comme son nom l’indique il permet de sélectionner le Template.

C’est par exemple le problème auquel j’ai été confronté dans mon application WP7 proposé pour le concours SNCF (qui soit dit en passant a été sélectionnée pour les phases finales) dans laquelle je voulais varier les logos des transports depuis une gare, selon le type de transport.

La solution

Pour résoudre ce problème, nous allons d’abord créer une classe abstraite, qu’il faudra ensuite dériver selon nos besoins. Cette classe, très simple est la classe DataTemplateSelector. Elle étend la classe ContentControl, car effectivement elle va appliquer un Template au contenu qui lui est passé.

    public abstract class DataTemplateSelector : ContentControl
    {
        public virtual DataTemplate SelectTemplate(object item, DependencyObject container)
        {
            return null;
        }

        protected override void OnContentChanged(object oldContent, object newContent)
        {
            base.OnContentChanged(oldContent, newContent);

            ContentTemplate = SelectTemplate(newContent, this);
        }
    }

Ceci étant fait, créons maintenant une classe fille qui ajoute des propriétés de type DataTemplate (les Templates qui seront sélectionnable par la classe) et qui redéfinit la méthode SelectTemplate, méthode qui va définir selon quelles règles il faut choisir le Template.

    public class TransportDataTemplateSelector : DataTemplateSelector
    {
        public DataTemplate MetroDataTemplate { get; set; }
        public DataTemplate RerDataTemplate { get; set; }
        public DataTemplate BusDataTemplate { get; set; }

        public override DataTemplate SelectTemplate(object item, DependencyObject container)
        {
            Transport t = item as Transport;
            if (t != null)
            {
                switch (t.Type)
                {
                    case TransportType.None:
                        break;
                    case TransportType.Metro:
                        return MetroDataTemplate;
                    case TransportType.Rer:
                        return RerDataTemplate;
                    case TransportType.Bus:
                        return BusDataTemplate;
                    default:
                        break;
                }
            }

            return base.SelectTemplate(item, container);
        }
    }

Il ne reste plus qu’à l’utiliser depuis votre code XAML. Ajouter un namespace xml et utiliser votre TransportDataTemplateSelctor de la manière suivante :

<ListBox Grid.Row="1" ItemsSource="{Binding CurrentStation.Transports}">
  <ListBox.ItemTemplate>
    <DataTemplate>
      <views:TransportDataTemplateSelector Content="{Binding}">
        <views:TransportDataTemplateSelector.MetroDataTemplate>
          <DataTemplate>
            <StackPanel … />
          </DataTemplate>

Et voilà rien de plus simple, pour un résultat très appréciable !

Publicités

4 Responses to Utiliser un DataTemplateSelector en Silverlight

  1. Mille fois merci, tu viens de m’enlever une enorme epine du pied

  2. tagazok says:

    Très sympa comme astuce 🙂

    Saurais-tu comment faire lorsque j’ai un controle diaporama et une seule liste faire en sorte d’afficher des items sur une page ou l’autre.
    Ex : une application de mails ou jai une liste de tous les mails et ou les nouveaux s’affichent dans une liste et les autres dans une autre (mais incluant quand même ceux de la 1ère liste) ?

    Merci et bravo pour ton blog que je viens de découvrir 🙂

    • smornas says:

      Salut et merci pour ton commentaire. Pour ce que tu veux faire, pas besoin de template selector à priori ! Il suffit de binder tes deux listbox sur la même ObservableCollection avec un DataTemplate différent : typiquement tu peux utiliser un Converter qui va donner la valeur de Visibility en fonction de chaque élément. Comme un élément qui est en Collapsed ne prend pas de place du tout, c’est comme s’il n’était même pas là !
      Petit exemple avec un Pivot, mais c’est facilement adaptable avec un Panorama :
      Exemple de code

  3. Ping: Ajouter des éléments spéciaux dans une collection liée via Binding « Sebastien Mornas's Blog

Laisser un commentaire

Entrez vos coordonnées ci-dessous ou cliquez sur une icône pour vous connecter:

Logo WordPress.com

Vous commentez à l'aide de votre compte WordPress.com. Déconnexion / Changer )

Image Twitter

Vous commentez à l'aide de votre compte Twitter. Déconnexion / Changer )

Photo Facebook

Vous commentez à l'aide de votre compte Facebook. Déconnexion / Changer )

Photo Google+

Vous commentez à l'aide de votre compte Google+. Déconnexion / Changer )

Connexion à %s

%d blogueurs aiment cette page :