(X) Hide this
    • Login
    • Join
      • Generate New Image
        By clicking 'Register' you accept the terms of use .

Tip: How to style the caret in Silverlight 3

(2 votes)
Nikolay Raychev
>
Nikolay Raychev
Joined Mar 28, 2008
Articles:   22
Comments:   58
More Articles
2 comments   /   posted on Mar 25, 2009
Tags:   styling , caret , nikolay-raychev
Categories:   Design
It's very easy to style the caret in Silverlight 3. Look at that huge TextBox with a caret in the rainbow colors:



You just need to set the CaretBrush property:

<TextBox FontSize="50" Width="100" Height="80">  
    <TextBox.RenderTransform> 
        <ScaleTransform ScaleX="6" ScaleY="1"/>  
    </TextBox.RenderTransform> 
    <TextBox.CaretBrush>
        <LinearGradientBrush x:Name="backgroundLinearGradientBrush"
            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> 

You can use any Silverlight supported Brush.

That's it!

Subscribe

Comments

  • -_-

    RE: How to style the caret in Silverlight 3


    posted by apreski on Aug 24, 2009 15:33
    OMG what a wonderfull and perfect and so usefull tric ! i won't sleep for three days.
  • -_-

    RE: How to style the caret in Silverlight 3


    posted by Gear on Jan 19, 2011 02:56
    I woul sleep if I could change the caret size

Add Comment

Login to comment:
  *      *