Personnaliser le curseur des TextBox

Florian Casabianca

En Silverlight 3 il est désormais possible de personnaliser le curseur (la barre noir horizontale) qui apparait dans les TextBox lorsque celles-ci ont le focus.

- Titre : Personnaliser le curseur des TextBox

- Auteur : Florian Casabianca

- Parution : 12 juillet 2009

- Mise à jour : 12 juillet 2009

- Licence : Les sources présentées sur cette page sont libres de droits et vous pouvez les utiliser à votre convenance. Par contre, la page de présentation constitue une œuvre intellectuelle protégée par les droits d'auteur. Copyright ® 2009 Florian Casabianca. Aucune reproduction, même partielle, ne peut être faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc. sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts. Droits de diffusion permanents accordés à Developpez LLC.

Sommaire

- Introduction

- I. Utilisation d'une couleur

- II. Utilisation d'une image

- III. Utilisation d'un gradient

- IV. Utilisation d'un Binding

- Sources

- Remerciements

- Contact

Introduction

En Silverlight 3 il est désormais possible de personnaliser le curseur (la barre noire horizontale) qui apparait dans les TextBox lorsque celles-ci ont le focus. Pour cela, la propriété CaretBrush de type Brush a été ajoutée à la classe TextBox.

L'application de démonstration est disponible en ligne ici.

I - Utilisation d'une couleur

La personnalisation la plus simple consiste à changer la couleur du curseur en spécifiant un SolidColorBrush :

<TextBox Background="Red" CaretBrush="Blue"/>

ou bien

<TextBox>
<TextBox.CaretBrush>
<SolidColorBrush Color="Blue"/>
</TextBox.CaretBrush>
</TextBox>

Le résultat obtenu :

II - Utilisation d'une image

Il est aussi possible d'utiliser une image. Par exemple, l'image ci-dessous permet de représenter des pointillés :

Il suffit ensuite d'indiquer un ImageBrush pour la propriété CaretBrush :

<TextBox>
<TextBox.CaretBrush>
<ImageBrush ImageSource="Medias/dot.png" Stretch="Fill"/>
</TextBox.CaretBrush>
</TextBox>

Nous obtenons ainsi un curseur en pointillés :

III - Utilisation d'un gradient

Vous pouvez aussi utiliser un gradient :

<TextBox FontSize="50" Width="300" Height="80">
<TextBox.CaretBrush>
<LinearGradientBrush MappingMode="RelativeToBoundingBox" StartPoint="0,0" EndPoint="0,1">
<LinearGradientBrush.GradientStops>
<GradientStop Color="Red" Offset="0" />
<GradientStop Color="Orange" Offset="0.167" />
<GradientStop Color="Yellow" Offset="0.333" />
<GradientStop Color="Green" Offset="0.5"/>
<GradientStop Color="Blue" Offset="0.667" />
<GradientStop Color="Indigo" Offset="0.833" />
<GradientStop Color="Violet" Offset="1" />
</LinearGradientBrush.GradientStops>
</LinearGradientBrush>
</TextBox.CaretBrush>
</TextBox>

Et obtenir un curseur aux couleurs de l'arc-en-ciel :

IV - Utilisation d'un Binding

La propriété CaretBrush peut également être « bindée » pour changer sa couleur dynamiquement.

Pour illustrer ce principe nous pouvons par exemple utiliser une ComboBox contenant les noms de deux couleurs et une TexBox dont nous « bindons » directement (grâce au Binding élément à élément de Silverlight 3) la propriété CaretBrush à l'élément sélectionné de la ComboBox en utilisant le converter :

<ComboBox x:Name="ComboCouleurs" >
<System:String>Rouge</System:String>
<System:String>Vert</System:String>
</ComboBox>
<TextBox CaretBrush="{Binding SelectedItem,
ElementName=ComboCouleurs,
Converter={StaticResource stringToColorConverter}}" />

Nous pouvons maintenant changer la couleur du curseur via la ComboBox :

Le converter est volontairement très simpliste :

public class StringToColorConverter : IValueConverter
{
public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
{
if (value != null)
{
string colorString = value.ToString();
if (!string.IsNullOrEmpty(colorString))
{
switch (colorString)
{
case "Rouge"  :
return new SolidColorBrush(Colors.Red);
case "Vert":
return new SolidColorBrush(Colors.Green);
default:
return new SolidColorBrush(Colors.Black);
}
}
}
return new SolidColorBrush(Colors.Black);
}

public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
{
throw new NotImplementedException();
}
}

Pour l'utiliser il faut bien sûr ne pas oublier de le déclarer dans les ressources de la page :

<UserControl.Resources>
<local:StringToColorConverter x:Key="stringToColorConverter"/>
</UserControl.Resources>

Sources

Téléchargez les sources de la solution donnée en exemple.

Remerciements

J'adresse ici tous mes remerciements à l'équipe de rédaction de "developpez.com" pour le temps qu'ils ont bien voulu passer à la correction et à l'amélioration de cet article.

Contact

Si vous constatez une erreur dans le tutorial, dans les sources, dans la programmation ou pour toutes informations, n'hésitez pas à me contacter par le forum.