TextBoxBase
In the previous article in the WPF tutorial we started to look at the key members of the TextBoxBase class, which is the base class for the TextBox and RichTextBox controls. The last article considered methods and properties related to text editing. In this article we'll see several properties that allow you to change the style of text boxes. We'll look at how to control the scroll bars of a control and how to style the text selection highlight and the flashing cursor. We won't look at the styling properties that are inherited from superclasses of TextBoxBase.
To begin, we need a sample program. Create a new WPF application project in Visual Studio named, "TextBoxBaseStyling". Once the project is initialised, replace the XAML in the main window with the following code:
<Window x:Class="TextBoxBaseStyling.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="TextBoxBase Demo"
Width="250"
Height="200">
<Grid>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<TextBox Margin="2" />
<RichTextBox Grid.Row="1" Margin="2"/>
</Grid>
</Window>The above XAML creates a window with a TextBox and a RichTextBox. It appears similar to the image below:
Scroll Bar Visibility
The first two properties that we will look at control the visibility of scroll bars. Both TextBoxes and RichTextBoxes can include horizontal and vertical scroll bars, which can be controlled using the HorizontalScrollBarVisibility and VerticalScrollBarVisibility properties. Each can be set to one of four values from the ScrollBarVisibility enumeration.
Auto. When set to Auto, scroll bars only appear if they are necessary. If text extends beyond the boundary of the control, the scroll bar is visible. If not, it is hidden.
Visible. If you set the visibility of a scroll bar to Visible, it will always be shown, even if there is no ability to scroll the control in that direction.
Hidden. When set to Hidden, the scroll bar is not shown. It is still possible to scroll the contents of the text box by moving the cursor beyond the control's boundaries.
Disabled. When disabled, the appropriate scroll bar is not visible. In addition, scrolling in that direction is not possible.
The following updated TextBox and RichTextBox XAML shows the application of the four possible values.
<TextBox Margin="2"
HorizontalScrollBarVisibility="Visible"
VerticalScrollBarVisibility="Hidden"/>
<RichTextBox Grid.Row="1"
Margin="2"
HorizontalScrollBarVisibility="Disabled"
VerticalScrollBarVisibility="Auto"/>Selection Styling
In the tutorial article describing the styling options for the TextBox control, we looked at the SelectionBrush and SelectionOpacity properties. The former allows you to apply a brush to the highlight that appears when you select some text. The brush can be a simple, solid colour brush or a more complex one including effects such as gradients. The SelectionOpacity property allows you to make the selection partly transparent.
Both of the selection styling properties are provided by TextBoxBase, meaning that they can also be used with RichTextBox controls.
Caret Styling
The final styling property of TextBoxBase is CaretBrush. This property allows you to specify a brush for the caret, which is the flashing cursor that appears at the text insertion point. You can use simple or complex brushes. For this article, we'll just set solid colours for the carets by modifying the XAML for the controls, as follows:
<TextBox Margin="2"
HorizontalScrollBarVisibility="Visible"
VerticalScrollBarVisibility="Hidden"
CaretBrush="Red"/>
<RichTextBox Grid.Row="1"
Margin="2"
HorizontalScrollBarVisibility="Disabled"
VerticalScrollBarVisibility="Auto"
CaretBrush="Pink"/>16 April 2014