Alex Golesh's Blog About Silverlight Development

Silverlight 3 Quick Tip #8: Caret Brush

I love an ability to change the standard look and feel of the controls in Silverlight. I like “dark” themes for my applications :)

While working with Silverlight 2, many times I’ve found myself with very strange UX – my very nice black themed application with white texts confuses users…

Where is the caret in this text box? What if user want to fix something, how does he/she knows where to type…

One of nice additions in Silverlight 3 was an ability to change the color of the TextBox Caret. Now TextBox exposes “CaretBrush” from Brush type, which gives an ability to use any Brush within. Previous strange UX (with default black caret) now solved – white caret is much better here:

But the CaretBrush is a brush! It could be anything, which fits the Brush definition… It could be gradient, picture or even video!!!

Gradient brush? No problem:

Image Brush? Sure:

How it works? Well, this part is actually very simple:

<TextBox Background="Black" Foreground="White" Text="White text, black background and White caret" CaretBrush="White"/>

Gradient brush:

<TextBox Background="Black" Foreground="White" Text="White text on black background with gradient caret" >
            <TextBox.CaretBrush>
                <LinearGradientBrush StartPoint="0,0" EndPoint="0,1" >
                    <GradientStop Color="Red" Offset="0.0"/>
                    <GradientStop Color="Orange" Offset="0.143"/>
                    <GradientStop Color="Yellow" Offset="0.286"/>
                    <GradientStop Color="Green" Offset="0.428"/>
                    <GradientStop Color="LightBlue" Offset="0.571"/>
                    <GradientStop Color="Blue" Offset="0.714"/>
                    <GradientStop Color="Violet" Offset="0.857"/> 
                </LinearGradientBrush>
            </TextBox.CaretBrush>
        </TextBox>

and Image brush:

<TextBox Width="150" Text="Text &amp; picture caret" >
            <TextBox.CaretBrush>
                <ImageBrush ImageSource="/CaretImage.jpg" />
            </TextBox.CaretBrush>
</TextBox>

Easy, huh?

Enjoy,

Alex