existe-t'il un input mask pour un textBox?

**Golzinne** · 04/10/2011, 19h16

Bonjour,

J'aimerais pouvoir encoder une heure et les minutes dans un textbox sous le format suivant:

"09:15" pour neuf heures et quart par exemple.

Comment faire pour que quand je clique sur la zone, le 09 soit sélectionné, que si je tappe par exemple 11, la zone affiche "11:15" avec le 15 sélectionné (en attente d'un changement des minutes) ?

En plus, je ne devrais jamais à avoir à frapper les ":".

**GuruuMeditation** · 05/10/2011, 09h13

Il y a un TimePicker dans le Silverlight Toolkit (http://silverlight.codeplex.com/releases/view/43528), tu peux essayer avec ça.

Sinon, Telerik à aussi de chouettes contrôles, mais evidemment c'est pas gratuit

**Samuel Blanchard** · 05/10/2011, 11h59

Si tu veux vraiment avoir un controle heure/minute voila comment tu peux faire.

Tout d'abord tu crées un controle : un Templated Control si tu te sens à l'aise ou un bête UserControl sinon.

Dedans tu crées deux textbox representant heures et minutes comme suit :

Code XAML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
 
<Border HorizontalAlignment="Center" VerticalAlignment="Center" BorderThickness="1" Background="White">
		<StackPanel Orientation="Horizontal">
                <TextBox x:Name="TextboxHour"  BorderThickness="0" MaxLength="2" Text="09" HorizontalContentAlignment="Center" TextAlignment="Right" VerticalContentAlignment="Center" Width="30" LostFocus="HourTextBox_LostFocus" KeyDown="TextboxHour_KeyDown"  />
			<TextBlock Margin="2,-2,2,0" Text=":" VerticalAlignment="Center"></TextBlock>
			<TextBox x:Name="TextboxMinute" BorderThickness="0" MaxLength="2" Text="12" HorizontalContentAlignment="Center" TextAlignment="Left"  VerticalContentAlignment="Center" Width="30" LostFocus="MinuteTextBox_LostFocus" KeyDown="TextboxMinute_KeyDown"/>
		</StackPanel>		
</Border>

Ensuite dans tes deux textbox tu gères les evenements LostFocus pour le mise en forme des heures et minutes ( 9 devient 09, remplacement d'un nombre invalide par 00) et l'evenement KeyDown pour le passage d'une boite à l'autre :

Code C# :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
 
        /// <summary>
        /// On a quitté la boite heure
        /// </summary>
        /// <param name="sender"></param>
        /// <param name="e"></param>
 
        private void HourTextBox_LostFocus(object sender, RoutedEventArgs e)
        {
            this.Hour = this.Hour;
 
		}
 
        /// <summary>
        /// On a quitté le boite Minute
        /// </summary>
        /// <param name="sender"></param>
        /// <param name="e"></param>
 
        private void MinuteTextBox_LostFocus(object sender, System.Windows.RoutedEventArgs e)
        {
            this.Minute = this.Minute;
        }
 
        /// <summary>
        /// Les heures
        /// </summary>
 
        public int Hour
        {
            get
            {
                string hour = this.TextboxHour.Text;
 
                int value;
 
                if (int.TryParse(hour, out value) == false)
                {
                    value = 0;
                }
 
                return value;
            }
 
            set
            {
                if (value > 23)
                {
                    value = 0;
                }
 
                if (value < 0)
                {
                    value = 0;
                }
 
                string hour = string.Format("{0:00}", value);
 
                TextboxHour.Text = hour;
            }
        }
 
        /// <summary>
        /// Minute
        /// </summary>
 
        public int Minute
        {
            get
            {
                string minute = this.TextboxMinute.Text;
 
                int value;
 
                if (int.TryParse(minute, out value) == false)
                {
                    value = 0;
                }
 
                return value;
            }
 
            set
            {
                if (value > 59)
                {
                    value = 0;
                }
 
                if (value < 0)
                {
                    value = 0;
                }
 
                string minute = string.Format("{0:00}", value);
 
                TextboxMinute.Text = minute;
            }
        }
 
        /// <summary>
        /// Permet de passer des hours vers les minutes automatiquement
        /// </summary>
        /// <param name="sender"></param>
        /// <param name="e"></param>
 
        private void TextboxHour_KeyDown(object sender, KeyEventArgs e)
        {
            TextBox textboxHour = sender as TextBox;
 
            if (textboxHour.SelectionStart == textboxHour.Text.Length && textboxHour.SelectedText == "")
            {
                if (e.Key == Key.Enter || e.Key == Key.Right)
                {
                    e.Handled = true;
                    this.TextboxMinute.Focus();
                    this.TextboxMinute.SelectionStart = 0;
                    return;
                }
 
                // deplacemment par caractere
                if (textboxHour.Text.Length == textboxHour.MaxLength)
                {
                    char nextChar = char.MinValue;
 
                    if ((e.Key >= Key.D0 && e.Key <= Key.D9))
                    {
                        nextChar = (char)('0' + (e.Key - Key.D0));
                    }
 
                    if ((e.Key >= Key.NumPad0 && e.Key <= Key.NumPad9))
                    {
                        nextChar = (char)('0' + (e.Key - Key.NumPad0));
                    }
 
                    if (nextChar != char.MinValue)
                    {
                        e.Handled = true;
                        this.TextboxMinute.Focus();
                        // remplacemment du text existant
                        this.TextboxMinute.Text = new string(nextChar, 1);
                        // placement du caret
                        this.TextboxMinute.SelectionStart = 1;
                    }
 
                    return;
                }
            }
        }
 
        /// <summary>
        /// une touche est frappée : on passe peut être chez les heures
        /// </summary>
        /// <param name="sender"></param>
        /// <param name="e"></param>
 
        private void TextboxMinute_KeyDown(object sender, KeyEventArgs e)
        {
            TextBox textboxMinute = sender as TextBox;
 
            if (textboxMinute.SelectionStart == 0 && textboxMinute.SelectedText == "")
            {
                if (e.Key == Key.Left || e.Key == Key.Back)
                {
                    e.Handled = true;
                    this.TextboxHour.Focus();
                    this.TextboxHour.SelectionStart = this.TextboxHour.Text.Length;
                    return;
                }
            }
        }

Tu peux aller plus loin en reprenant le look de base d'un Textbox avec Blend et en l'appliquant au border de ton control.

**Golzinne** · 05/10/2011, 13h58

Merci Samuel,

C'est plus (+) dans cette voie que je souhaite aller.

Je suis dans l'optique de créer une boite heure qui contient toujours deux chiffres.

Si mon curseur est avant le premier chiffre, par exemple
|09

et que je tappe 1, j'obtiens:
1|9

et si je tappe à ce moment 7, j'obtiens:
17 et ... je passe automatiquement à la boite minute...

Entre les deux boites, j'ai un ":" qui ne bouge jamais.

**Samuel Blanchard** · 05/10/2011, 14h11

L'exemple que je t'ai filé fait en partie cela puisqu'il gère le nombre max de caractères, le passage d'une boite à l'autre et la remise en forme des chiffres. Il manque juste ta gestion particulière du Caret.

Le code fonctionne si tu places le XAML et code directement dans une page.

Teste et redis-moi

**Golzinne** · 06/10/2011, 11h53

Bonjour,

J'arrive presque à faire ce dont j'ai envie:

Je pars du principe que ma zone heure contient toujours deux chiffres (de 00 à 23)

Quand la zone heure prend le focus, les deux chiffres sont sélectionnés.
Quand à ce moment je tappe 0, 1 ou 2, le premier chiffre est modifié.
Quand à ce moment je tappe 0 à 9, mon deuxième chiffre est modifié et je passe à la zone minutes. (NB que si premier chiffre est un 2, le deuxième chiffre ne peut être que 0,1,2 ou 3.)

Voici le code:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
 
 
private void Heures_KeyDown(object sender, KeyEventArgs e)
        {
 
                if (e.PlatformKeyCode >= 48 & e.PlatformKeyCode <= 57)
                {
                    TextBox HeuresTB = sender as TextBox;
                    if (HeuresTB.Text.Length == 2)
                    {
                        string S0 = HeuresTB.Text.Substring(0,1);
                        string S1 = HeuresTB.Text.Substring(1,1);
 
 
                        //si deux chiffres sélectionnés, ou premier de deux sélectionné ou aucun de deux sélectionné mais curseur devant le premier
                        if (HeuresTB.SelectionLength == 2 | (HeuresTB.SelectionLength == 1 & HeuresTB.SelectionStart == 0) | (HeuresTB.SelectionLength == 0 & HeuresTB.SelectionStart == 0))
                        {//on remplace alors le premier chiffre si c'est un 0, 1 ou 2
                            if (e.PlatformKeyCode >= 48 & e.PlatformKeyCode <= 50)
                            {
 
                                HeuresTB.Text = ((char)e.PlatformKeyCode).ToString() + S1;
                                e.Handled = true;
                                //HeuresTB.SelectionStart = 1;
                                //HeuresTB.SelectionLength = 1;
                            }
                            else
                            {
                                e.Handled = true;
                            }
                        }
 
                        //si deuxième chiffre sélectionné, ou aucun de deux sélectionné mais curseur devant le deuxième
                        if ( (HeuresTB.SelectionLength == 1 & HeuresTB.SelectionStart == 1) | (HeuresTB.SelectionLength == 0 & HeuresTB.SelectionStart == 1))
                        {//on remplace alors le deuxième chiffre ( après avoir vérifié que si mon premier chiffre est un 2, mon nouveau deuxième chiffre est limité à 0,1,2 ou 3)
 
                            if (!(S0=="2" & Convert.ToInt16(S1) > 3))
                            {
                                e.Handled = true;
                                HeuresTB.Text = S0 + ((char)e.PlatformKeyCode).ToString() ;
                            }
                        }
                    }
 
 
            }
            else
            { e.Handled = true; }
 
 
        }

Vous remarquerez le commentaire de:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
 
//HeuresTB.SelectionStart = 1;
//HeuresTB.SelectionLength = 1;

Car malheureusement, si j'essaye de repositionner la sélection sur le deuxième chiffre pourtant après d'avoir remplacé mon premier chiffre, mon premier chiffre se met à la place du deuxième chiffre.

Je suis donc obligé pour le moment, d'entrer mon premier chiffre et de repositionner moi-même la sélection, soit avant, soit sur le deuxième.

**Golzinne** · 06/10/2011, 16h33

Le fonctionnement est maintenant correct.

J'ai contourné le problème en traitant le

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
 
HeuresTB.SelectionStart = 1;
HeuresTB.SelectionLength = 1;

dans le KeyUp plutôt que dans le keyDown.

existe-t'il un input mask pour un textBox?

Silverlight

Discussions similaires

Partager

Partager