TextBox
In recent articles in the WPF tutorial we have looked at some of the members of the TextBox control. This control allows you to request plain text from a user. TextBox inherits many methods, properties and events from the Control class. As such, you can apply styling using standard properties, such as Background, Foreground and the various font properties.
In addition to the styling members inherited from Control and its base classes, TextBox controls include further properties that affect the user interface. In this article we'll look at two types. The first allows you to control the alignment of the text within a TextBox. The second group changes the colour of the rectangle that shows a TextBox's selected text.
To demonstrate, create a new WPF application project in Visual Studio, naming the solution, "TextboxStyleDemo". Once initialised, replace the XAML of the main window with the code shown below:
<Window x:Class="TextBoxStyleDemo.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="TextBox Demo"
Height="125"
Width="250">
<StackPanel Background="LightBlue">
<TextBox>TextBox 1</TextBox>
<TextBox Margin="0 10">TextBox 2</TextBox>
<TextBox>TextBox 3</TextBox>
</StackPanel>
</Window>The XAML defines a window containing three TextBoxes, as shown below:
Text Alignment
You can control the alignment of an entire TextBox using the HorizontalAlignment and VerticalAlignment properties, which we've seen in earlier articles. However, these properties do not affect the position of the text within the TextBox. To control this, you can set the TextAlignment property. This is set to a constant from the TextAlignment enumeration. The possible values are:
- Left. The text is aligned at the left of the TextBox.
- Right. The text is aligned at the right of the TextBox.
- Center. The text is centred horizontally within the TextBox.
- Justify. Used for multi-line TextBoxes, the text is expanded horizontally to fill the available width of the TextBox.
Change the XAML for the TextBoxes to the code shown below. This changes the three TextBoxes so that the first is left aligned, the second is centred and the final control's text is right aligned.
<TextBox TextAlignment="Left">TextBox 1</TextBox>
<TextBox TextAlignment="Center" Margin="0 10">TextBox 2</TextBox>
<TextBox TextAlignment="Right">TextBox 3</TextBox>
The updated window appears as follows:
Selection Style
When the user selects all or part of the text in a TextBox, the selection is usually shaded with a default colour. In some cases you may wish to change the colour of the selection rectangle. You can control this using two properties, SelectionBrush and SelectionOpacity.
As the name suggests, SelectionBrush accepts a Brush object. This means that you can set the selection area's shading to many different types of brush, including solid colours, patterns or gradients. In this article we'll stick with solid colours for simplicity.
SelectionOpacity allows you to specify how opaque or transparent the selection rectangle will be. The value ranges from zero to one, with zero indicating complete transparency and one giving fully opaque shading.
To demonstrate, modify the XAML for the first two TextBoxes as follows:
<TextBox TextAlignment="Left" SelectionBrush="Red">TextBox 1</TextBox>
<TextBox TextAlignment="Center" SelectionOpacity="0.25" Margin="0 10">TextBox 2</TextBox>
Run the program and select some text to see the results. The first TextBox should show a red selection area. The second will appear with the default colour but partially transparent. You can compare this to the selection shading in the third TextBox, which uses the standard style.
26 February 2014