Tips & Tricks: Styling Caret of a Silverlight TextBox Control


In this small Tips & Tricks, I will guide you changing the Style of Caret of a Silverlight TextBox control. It is very simple and you can easily do it using Visual Studio or Expression Blend. Here is a screenshot of the same:

image

In general, styling the caret is not require. But in some cases, you may need to change it to give your UI the look & feel of your entire application.

 

What is a Caret?

Caret is a small line always blinking inside your TextBox control, as shown in the above figure. The default color of it is always black. But you can change the color too as per your requirement.

 

How to do it?

To do the styling for all the TextBox caret control in your entire application, you need to add a Style for your TextBox in your App.xaml or in your theme page. Don’t set a xName to the style. If you set a name to the style, you have to explicitly set the style for each textbox using the Style property.

 

Setting a Style

Now in your style tag, add a setter property “CaretBrush”. This allows you to change the caret brush color of your textbox. Now set a value to it. You can use any color or color combination here. That means, you can set SolidColorBrush or GradientColorBrush here.

 

Setting a Solid Color

Let us first give a solid color for our TextBox caret. Here is the complete Source code for it:

 

 
<Style TargetType="TextBox">
     <Setter Property="CaretBrush">
         <Setter.Value>
             <SolidColorBrush Color="Red"/>
         </Setter.Value>
     </Setter>
</Style>

 

When run, it will produce the following output:

image

Setting a Gradient Color

Now, let’s add a GradientColorBrush to it. We will use three different color (i.e. Red, Yellow & Blue) with equal Offset. Here is the XAML code:

 
<Style TargetType="TextBox">
    <Setter Property="CaretBrush">
        <Setter.Value>
            <LinearGradientBrush MappingMode="RelativeToBoundingBox"
                                 StartPoint="0,0" EndPoint="0,1">
                <LinearGradientBrush.GradientStops>
                    <GradientStop Color="Red" Offset="0" />
                    <GradientStop Color="Yellow" Offset="0.5" />
                    <GradientStop Color="Blue" Offset="1" />
                </LinearGradientBrush.GradientStops>
            </LinearGradientBrush>
        </Setter.Value>
    </Setter>
</Style>

 

This will produce the following output:

image

End Note

For better visibility, here is the scaled version of it:

image

 

Hope, this will help you in future when you need to set a different color to your TextBox Caret. Feedbacks & Suggestions are always appreciated.



If you have come this far, it means that you liked what you are reading. Why not reach little more and connect with me directly on Twitter , Facebook , Google+ and LinkedIn . I would love to hear your thoughts and opinions on my articles directly. Also, don't forget to share your views and/or feedback in the comment section below.

1 comments


 
© 2008-2016 Kunal-Chowdhury.com - Microsoft Technology Blog for developers and consumers | Designed by Kunal Chowdhury
Back to top