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.
