XAML TextBox

XAML <TextBox /> element represents the XAML TextBox control. This article discusses how to create a TextBox and set its various properties such as background and foreground colors, setting size and positions, fonts, wrapping, scrolling, and input validations.

Creating a TextBox

The <TextBox /> tag creates a text box.  The following syntaxes create text boxes: 

• <TextBox />
• <TextBox></TextBox>
• <TextBox>Enter something here</TextBox>

This code snippet creates a text box with text in it.  

<Canvas ID="root" xmlns="http://schemas.microsoft.com/2003/xaml" xmlns:def="Definition">
    <TextBox>Enter something here</TextBox>
</Canvas> 

The output of the above code snippet generates the the text box in Figure 1. The default position of text box is 0,0.

Figure 1.

Setting Size and Position

The Height and Width attributes sets the height and width of text box. Setting the position of a text box is little tricky. To set the position of the text box, you have to set the Top and Left positions of the parent XAML tag. For example, in our case, the parent tag for TextBox is Canvas. So I set Canvas.Top and Canvas.Left attributes to set the top and left position of the text box.  

<TextBox Width="200" Height="40" Canvas.Top="50" Canvas.Left="20">
        Enter something here
</TextBox> 

The new output looks like Figure 2. 

Figure 2.

Setting Background and Foreground Colors

The Background and Foreground attributes set the background and foreground colors of text box. The following code sets background color as red and foreground color as yellow for the text box. 

<TextBox Width="200" Height="40" Canvas.Top="50" Canvas.Left="20"
        Background="Red" Foreground="Yellow">
        Enter something here
 </TextBox> 

The text box with yellow foreground and red background looks like Figure 3.

Figure 3.

Setting Font

The FontFamily, FontSize, FontStyle, and FontWeight attributes set the font face, size, style, and weight of the text box font respectively. 

<TextBox Width="200" Height="40" Canvas.Top="50" Canvas.Left="20"
        Background="Red" Foreground="Yellow"
        FontFamily="Verdana" FontSize="14" FontStyle="Italic" FontWeight="ExtraBold">
        Enter something here
    </TextBox>

Here is the output with font verdana, size 14 points, style italic, and weight extra bold.

Figure 4.

Wrapping and Scrolling Text

The TextWrapping attributes sets the wrapping of text and VerticalScrollBarVisibility and HorizontalScrollBarVisibility sets the vertical and horizontal scroll bars visible. 

TextWrapping="Wrap" VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility ="Visible"

The new TextBox looks like Figure 5.

Figure 5.

Restricting Input Text

MaxHeight, MaxWidth, MaxLines, and MaxLength attributes of text box restricts the maximum height, maximum width, maximum number of lines, and maximum length of the text box. Similarly MinHeight, MinWidht, MinLines, and MinLength restricts the minimum height, minimum width, minimum number of lines, and minimum length of the text box. 

Setting IsReadOnly attribute to true makes the text box non editable.