Un TimeSpanPicker pour le Toolkit Windows Phone 7

 English speaker ? jump to English version of this post

 [21/01/2011 : Le TimeSpanPicker fait à présent partie du Toolkit Coding4Fun https://coding4fun.codeplex.com/]

J’avais besoin d’un joli picker pour représenter une durée dans une application Silverlight pour Windows Phone 7.

Les pickers du toolkit pour WP7 sont parfaits mais n’existent que pour les types DateTime sous la forme DatePicker et TimePicker.

J’ai modifié les sources du toolkit et rendu le code du DateTimePicker générique, pour qu’il prenne en charge un type TimeSpan aussi bien qu’un type DateTime.

Voici donc le toolkit complété d’un nouveau contrôle : le TimeSpanPicker qui possède les propriétés additionnelles suivantes :

• Value : la durée affichée par le picker
• Max : la durée maximale proposée par le picker
• Step : le pas d’incrément du picker

Elles sont toutes les trois de type TimeSpan.

Il y a 3 sélecteurs pour sélectionner respectivement le nombre d’heures, de minutes, de secondes de la durée à saisir.

Utilisation

Voici comment vous pourrez l’utiliser :

1. Référencez l’assembly Microsoft.Phone.Controls.Toolkit dans votre application Silverlight pour WP7

2. Ajoutez le namespace dans votre page xaml :

   xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit"

3. Déclarez le contrôle TimeSpanPicker dans votre page xaml, par-exemple :

   <toolkit:TimeSpanPicker Value="{Binding Duration}" Max="{Binding MaxDuration}" Step="{Binding StepDuration}"/>

   ou 

   <toolkit:TimeSpanPicker ValueChanged="TimeSpanPicker_ValueChanged"/>

Fonctionnement

Le contrôle bénéficie de certains comportements dynamiques comme par-exemple n’afficher que les sélecteurs nécessaires, en fonction de la durée max et du step.

Les valeurs par défaut sont:

• Max = 24 heures
• Step = 1 seconde

Et vous obtiendrez ce résultat :

Et après validation:

Evidemment, vous pouvez personnaliser ces valeurs à votre convenance, comme dans les exemples suivants.

Exemples

Si vous souhaitez proposer une durée avec une précision à la minute vous obtiendrez uniquement l’affichage des sélecteurs de heures et minutes

   public TimeSpan StepDuration
    {
     get
     {
        return TimeSpan.FromMinutes(1);
     }
    }

Si vous précisez en plus une valeur Max inférieure à 1 heure, le sélecteur des heures disparaitra:

         public TimeSpan MaxDuration
        {
            get
            {
                return TimeSpan.FromMinutes(40);
            }
        }
 
        public TimeSpan StepDuration
        {
            get
            {
                return TimeSpan.FromMinutes(1);
            }
        }

Précisez un step de 5 minutes, et vous obtiendrez :

         public TimeSpan MaxDuration
        {
            get
            {
                return TimeSpan.FromMinutes(40);
            }
        }
 
        public TimeSpan StepDuration
        {
            get
            {
                return TimeSpan.FromMinutes(5);
            }
        }

Voici les sources et les binaires:

Silverlight for Windows Phone Toolkit Binaries v1_1.zip

Silverlight for Windows Phone Toolkit Source Code v1_1.zip

Signalez-moi si vous rencontrez des soucis avec le TimeSpanPicker.

A bientôt !