WPF 4.0 : Change SelectionBrush and Caret Color

WPF 4.0 comes with certain cool features like changing Selection Brush for text selection, Changing color of Caret etc. I am going to discuss those in this article

Download

 Download source code for WPF 4.0 : Change SelectionBrush and Caret Color

Introduction

WPF 4.0 comes with lots of stuffs. There are lots of things that are introduced for the first time which would not be possible with previous versions. One of these features, is changing the Selection Brush and Caret color in TextBoxes.
In this article I am going to discuss each of those new features one by one.

Changing SelectionBrush

SelectionBrush is introduced with WPF 4.0 which allows you to change the selection color, its opacity etc. The property SelectionBrush is added as DependancyProperty in TextBoxBase, so any control that inherits from TextBoxBase will find this property. We can define different brushes to style selection brush so that the content when selected for our textbox appears to be suited to the environment.

<TextBox x:Name="txtContent" 
         SelectionOpacity=".5" 
         FontSize="20" 
         FontWeight="Bold" 
         MinWidth="200" 
         Background="Green" 
         Text="This is Sample Text Document">
  <TextBox.SelectionBrush>
      <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
         <GradientStop Color="Red" Offset="0"></GradientStop>
         <GradientStop Color="Gold" Offset="1"></GradientStop>
      </LinearGradientBrush>
   </TextBox.SelectionBrush>
</TextBox>

In the code above, you can see I have defined a LinearGradient for SelectionBrush which has two GradientStops from 0 which is Red to Gold at 1 Vertically. You can easily modify the Brush to the one you want to.

You can use ImageBrush, DrawingBrush even VisualBrush here as SelectionBrush for fun.

The SelectionOpacity determines the opacity value for the selection. By default the value is .6. If you mention the SelectionOpacity="1", it means you cant see through the Selection.


In the above example, I have placed SelectionnOpacity=1 and you can see, the text is totally invisible through the Selection.

Changing Carat Color

 Changing the Color of Carat is also another trick, that is introduced with WPF 4.0. You can change the color of Carat(the blinking text Cursor) for the Textbox. It is actually not so easy like the one introduced just above. The cursor changes its color dynamically as defined in the TextBox when the Background of it is modified, to make it visible through this Background. Therefore, if you set the Background of a TextBox to Black, the color of Cursor turns White to be clearly visible to the Editor. On the other hand for White Background, it seems to be Black.

To See the Cursor to change its color with Background color being unchanged, we need to Disable the Background color of the TextBox. For that we need to redefine the TextBox altogether.

<Style TargetType="{x:Type TextBox}">
  <Setter Property="Template">
    <Setter.Value>
       <ControlTemplate TargetType="{x:Type TextBox}">
          <Grid>
           <Border x:Name="Border" BorderThickness="2" SnapsToDevicePixels="True" Padding="2" 
                   CornerRadius="2">
            <ScrollViewer Margin="0" x:Name="PART_ContentHost" 
                   Style="{DynamicResource SimpleTextScrollViewer}" />
            </Border>
            </Grid>
        </ControlTemplate>
      </Setter.Value>
   </Setter>
</Style>

Here in the above code, I have redefined the ControlTemplate of all the TextBox control (As I left x:Key nothing). I took one Border and a ScrollViewer inside it which represents the ContentHost. You must make sure you define the ScrollViewer Name to PART_ContentHost. Now for the border, you might notice, I have did not mention the Background Brush. This is the trick. As I did not point the Background to TemplatedParent property Background, it will not apply the background of the ScrollViewer accordingly. But as Color of Carat comes automatically based on Background defined to the TextBox, we need to only set the background color of the Textbox for the trick.

<TextBox x:Name="txtContent" FontSize="20" FontWeight="Bold" MinWidth="200" Background="Cyan" />

Thus if you define the Background to Cyan(#FF00FFFF) it produces just the inverse of the Color, which is Red(#FFFF0000).

Conclusion

This is really a cool trick, and I found lots of fun while creating this. I have tried this in Visual Studio 2010 Beta 2, but I am sure, it will work in RC releases as well. Just try the sample application.

If you like this article, subscribe to our RSS Feed. You can also subscribe via email to our Interview Questions, Codes and Forums section.