Tips & Tricks: Styling Caret of a Silverlight TextBox Control

Introduction

In this small tip, I will guide you through 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:

In general, styling the caret is not required. 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 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 controls 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 an 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:

Setting a Gradient Color

Now, let’s add a GradientColorBrush to it. We will use three different colors (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:

End Note

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

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

CodeProject