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.

caretintell.png

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 :

 
Sélectionnez
<TextBox Background="Red" CaretBrush="Blue"/>

ou bien

 
Sélectionnez
<TextBox>
    <TextBox.CaretBrush>
        <SolidColorBrush Color="Blue"/>
    </TextBox.CaretBrush>
</TextBox>


Le résultat obtenu :

caretblue.png

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 :

dot.png

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

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


Nous obtenons ainsi un curseur en pointillés :

caretimage.png

III. Utilisation d'un gradient

Vous pouvez aussi utiliser un gradient :

 
Sélectionnez
<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 :

caretgradient.png

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 :

 
Sélectionnez
<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 :

caretcombored.png
caretcombogreen.png

Le converter est volontairement très simpliste :

 
Sélectionnez
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 :

 
Sélectionnez
<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.