Click here to Skip to main content
Click here to Skip to main content
Go to top

Tips & Tricks: Styling Caret of a Silverlight TextBox Control

, 10 Oct 2010
Rate this:
Please Sign up or sign in to vote.
In this small Tips & Tricks, I will guide you through changing the Style of Caret of a Silverlight TextBox control.

Introduction

In this small Tips & Tricks, 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:

image

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:

image

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:

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. Feedback & suggestions are always appreciated.


License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

_ Kunal Chowdhury _
Technical Lead
India India
Kunal Chowdhury is a Microsoft "Client Development" MVP (Most Valuable Professional), a Codeproject Mentor, Telerik MVP, Nokia Developer Champion, Speaker in various Microsoft events, Author, passionate Blogger and a Software Engineer by profession.
 
He is currently working in an MNC located in India. He has a very good skill over XAML, C#, Silverlight, Windows Phone, WPF and Windows 8 (WinRT). He posts his findings, articles in his technical blog and CodeProject.
 
Technical Blog: http://www.kunal-chowdhury.com
Facebook: http://facebook.com/blog.kunal
Twitter : http://twitter.com/kunal2383
Follow on   Twitter   Google+   LinkedIn

Comments and Discussions

 
GeneralCaret shape Pinmembervoland8329-Dec-10 1:49 
GeneralMy vote of 5 PinmemberS M P11-Oct-10 23:15 
GeneralRe: My vote of 5 PinmentorKunalChowdhury12-Oct-10 0:06 
GeneralMy vote of 5 PinmemberHiren Solanki11-Oct-10 22:46 
GeneralRe: My vote of 5 PinmentorKunalChowdhury12-Oct-10 0:06 
GeneralMy vote of 5 PinmemberRichard Waddell11-Oct-10 15:07 
GeneralRe: My vote of 5 PinmentorKunalChowdhury11-Oct-10 22:35 
GeneralMy vote of 5 PinmvpAbhijit Jana10-Oct-10 4:44 
GeneralRe: My vote of 5 PinmentorKunalChowdhury10-Oct-10 4:45 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Mobile
Web01 | 2.8.140922.1 | Last Updated 10 Oct 2010
Article Copyright 2010 by _ Kunal Chowdhury _
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid