Welcome to Pete Brown's 10rem.net

First time here? If you are a developer or are interested in Microsoft tools and technology, please consider subscribing to the latest posts.

You may also be interested in my blog archives, the articles section, or some of my lab projects such as the C64 emulator written in Silverlight.

(hide this)

08 Apr 2010

Customizing the Caret and Selection Styles in WPF 4

     

WPF 4 allows you to customize the caret (the blinking line in a textbox that shows your current cursor position), as well as the selection brushes. This is great to allow you to be able to fully incorporate a custom color scheme.

Carets

The Custom Caret is especially helpful when you need to optimize the contrast with the background, or fit it in with your own color scheme.

Normal Caret

image

Custom Caret

image

Xaml Markup to Change Caret Brush

<TextBox Text="Custom Caret"
         Width="450"
         Height="80"
         FontSize="50"
         Margin="10">
    <TextBox.CaretBrush>
        <LinearGradientBrush StartPoint="0,0"
                             EndPoint="0,1">
            <GradientStop Offset="0"
                          Color="Red" />
            <GradientStop Offset="0.5"
                          Color="Yellow" />
            <GradientStop Offset="1.0"
                          Color="Blue" />
        </LinearGradientBrush>
    </TextBox.CaretBrush>
</TextBox>

 

Selections

Customizing the selection brush is a huge boon for folks creating their own branded experience.

Normal Selection

image

Custom Selection

image

Xaml Markup to Change Selection Brush

<TextBox Text="Custom Selection"
         Width="450"
         Height="80"
         FontSize="50"
         Margin="10">
    <TextBox.SelectionBrush>
        <LinearGradientBrush StartPoint="0,0"
                             EndPoint="1,0">
            <GradientStop Offset="0"
                          Color="Red" />
            <GradientStop Offset="0.5"
                          Color="Yellow" />
            <GradientStop Offset="1.0"
                          Color="Blue" />
        </LinearGradientBrush>
    </TextBox.SelectionBrush>
</TextBox>

The new properties are on TextBoxBase, so they apply to any control that derives from that, such as TextBox and RichTextBox. The SelectionBrush was also added separately to the FlowDocumentReader control.

Share |
posted by Pete Brown on Thursday, April 08, 2010
filed under:      

3 comments for “Customizing the Caret and Selection Styles in WPF 4”

  1. Khalil Muhammadsays:
    Even though I have never had a reason to customize a textbox's selection style or caret, it is nice to know it's achievable. In any case this is definitely going to stay in my bookmarks.
  2. Marcelosays:
    What about a border around the selecton like blend? it is possible?
  3. Josh Einsteinsays:
    This is a very welcome addition and something I envied about Blend's editor. But it seems that even with this new capability you'd be hard pressed to create a selection appearance that looked like Blend (which has a border around the selection as well as a gradient fill.)

Comment on this Post

Remember me