Un TimeSpanPicker pour le Toolkit Windows Phone 7

 

 

Un TimeSpanPicker pour le Toolkit Windows Phone 7

  • Comments 2
English speaker ? jump to English version of this post
[21/01/2011 : Le TimeSpanPicker fait à présent partie du Toolkit Coding4Fun http://coding4fun.codeplex.com/]
image

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 :

image

Et après validation:

image

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);
     }
}

image

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);
            }
        }

image

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);
            }
        }
image

Voici les sources et les binaires:

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

A bientôt !

Leave a Comment
  • Please add 8 and 6 and type the answer here:
  • Post
  • Bonjour,

    j'ai besoin pour mon application d'avoir un DatePicker qui propose de sélcetionner uniquement une année.

    Est-ce que votre composant prend en charge cette fonctionnalité.

    Si non, puis tenter de ré utiliser les sources pour arriver à mes fins ?

    Cordialement

  • La sélection d'une année correspond davantage à un type DateTime (date) qu'à un type TimeSpan (durée).

    Le DateTimePicker existe de base dans le toolkit et j'ai créé une classe de base commune au DateTimePicker et au TimeSpanPicker.

    Vous pouvez donc vous baser sur les sources fournies ici, car elles intègrent déjà la souplesse du min/max et du step ainsi que le fait de rendre invisible une partie du masque de saisie en fonction de cela.

    Il vous faudra ensuite adapter ces sources à votre besoin, pour n'afficher que des années.

    Happy coding :)

Page 1 of 1 (2 items)
Page 1 of 4 (87 items) 1234