WPF TextBox

WPF TextBox control represent a control that can be used to display or edit unformatted text. The TextBox class in C# represents the control. The XAML <TextBox> element represents the TextBox control in UI. The code samples in this article show how to use XAML TextBox element to create a TextBox control in WPF and C#.

This article demonstrates how to create and use a TextBox control in WPF using XAML and C#.

Creating a TextBox

The TextBox element represents a WPF TextBox control in XAML. 

  1. <TextBox/> 

The Width and Height attributes of the TextBox element represent the width and the height of a TextBox. The Text property of the TextBox element sets the content of a TextBox. The Name attribute represents the name of the control, which is a unique identifier of a control.

The code snippet in Listing 1 creates a TextBox control and sets the name, height, width, and content of a TextBox control. 

  1. <TextBox Name="TextBox1" Height="30" Width="200" |  
  2.    Text="Hello! I am a TextBox.">  
  3. </TextBox> 

Listing 1

The output looks like Figure 1.

TextBox Output
Figure 1

As you can see from Figure 1, by default the TextBox is placed in the center of the page. We can place a TextBox control where we want by using the Margin, VerticalAlignment and HorizontalAlignment attributes that sets the margin, vertical alignment, and horizontal alignment of a control.

The code snippet in Listing 2 sets the position of the TextBox control in the left top corner of the page.

  1. <TextBox Name="TextBox1" Height="30" Width="200"   
  2.    Text="Hello! I am a TextBox."   
  3.    Margin="10,10,0,0" VerticalAlignment="Top"  
  4.    HorizontalAlignment="Left">  
  5. </TextBox>  

Listing 2

Formatting a TextBox

The BorderBrush property of the TextBox sets a brush to draw the border of a TextBox. You may use any brush to fill the border. The code snippet in Listing 3 uses a linear gradient brush to draw the border with a combination of red and blue color.

  1. <TextBox.BorderBrush>  
  2.     <LinearGradientBrush StartPoint="0,0" EndPoint="1,1">  
  3.         <GradientStop Color="Blue" Offset="0" />  
  4.         <GradientStop Color="Red" Offset="1.0" />  
  5.     </LinearGradientBrush>  
  6. </TextBox.BorderBrush> 

Listing 3

The Background and Foreground properties of the TextBox set the background and foreground colors of a TextBox. You may use any brush to fill the border. The following code snippet uses linear gradient brushes to draw the background and foreground of a TextBox. 

  1. <TextBox.Background>  
  2.     <LinearGradientBrush StartPoint="0,0" EndPoint="1,1">  
  3.         <GradientStop Color="Blue" Offset="0.1" />  
  4.         <GradientStop Color="Orange" Offset="0.25" />  
  5.         <GradientStop Color="Green" Offset="0.75" />  
  6.         <GradientStop Color="Red" Offset="1.0" />  
  7.     </LinearGradientBrush>  
  8. </TextBox.Background>  
  9. <TextBox.Foreground>  
  10.     <LinearGradientBrush StartPoint="0,0" EndPoint="1,1">  
  11.         <GradientStop Color="Orange" Offset="0.25" />  
  12.         <GradientStop Color="White" Offset="1.0" />  
  13.     </LinearGradientBrush>  
  14. </TextBox.Foreground>  

The new TextBox looks like Figure 2.

TextBox Output
Figure 2

Setting Image as Background of a TextBox

To set an image as background of a TextBox, we can set an image as the Background of the TextBox. The code snippet in Listing 4 sets the background of a TextBox to an image. 

  1. <TextBox.Background>  
  2.     <ImageBrush ImageSource="dock.jpg" />  
  3. </TextBox.Background>  

Listing 4

The new output looks like Figure 3.

TextBox Output
Figure 3

Creating a TextBox Dynamically

The code listed in Listing 5 creates a TextBox control programmatically. First, it creates a TextBox object and sets its width, height, contents, background and foreground and later the TextBox is added to the LayoutRoot.

  1. private void CreateATextBox() | {    
  2.     TextBox txtb = new TextBox();    
  3.     txtb.Height = 50;    
  4.     txtb.Width = 200;    
  5.     txtb.Text = "Text Box content";    
  6.     txtb.Background = new SolidColorBrush(Colors.Orange);    
  7.     txtb.Foreground = new SolidColorBrush(Colors.Black);    
  8.     LayoutRoot.Children.Add(txtb);    
  9. }   
Listing 5

Setting Fonts of TextBox Contents

The FontSize, FontFamily, FontWeight, FontStyle, and FontStretch properties are used to set the font size, family, weight, style and stretch to the text of a TextBox. The code snippet in Listing 6 sets the font properties of a TextBox.

  1. FontSize="14" FontFamily="Verdana" FontWeight="Bold"  

Listing 6

The new output looks like Figure 4.

TextBox Output
Figure 4

The FontSource property allows loading custom fonts dynamically. The following code snippet sets the FontSource property.

  1. Uri fontUri = new Uri("SomeFont.ttf", UriKind.Relative);  
  2. StreamResourceInfo MySRI = Application.GetResourceStream(fontUri);  
  3. TextBox1.FontSource = new FontSource(MySRI.Stream); 

Non Editable TextBox

The IsReadOnly property of the TextBox sets the text box read only. By default, it is false.

  1. IsReadOnly="True"  

Restricting Text Size of a TextBox

The MaxLength property of the TextBox sets the number of characters allowed to input in a text box.

  1. MaxLength="250"  

Scrolling, Alignment, and Wrapping

The HorizontalScrollBarVisibility and VerticalScrollBarVisibility properties are used to set horizontal and vertical scroll bars of a TextBox, which is of type ScrollBarVisibility enumeration. The ScrollBarVisibility enumeration has four values – Disabled, Auto, Hidden, and Visible. The following code snippet sets the horizontal and vertical scroll bars visible in a TextBox.

  1. HorizontalScrollBarVisibility="Visible"  
  2. VerticalScrollBarVisibility="Auto"  

The TextWrapping property sets the wrap of no-wrap text. The following code snippet sets the wrapping text option.

  1. TextWrapping="Wrap"  

The TextAlignment property sets the text alignment in a TextBox, which is of type TextAlignment enumeration. A text can be aligned left, center, or right. 

  1. TextAlignment="Right"  

The AcceptReturn property sets if the return is accepted in a TextBox or not.

  1. AcceptsReturn="True"  

Listing 7 shows all these properties in a complete sample.

  1. <TextBox Name="TextBox2" Margin="10,10,50,0  
  2.    Width="300" Height="150"  
  3.    HorizontalScrollBarVisibility="Visible"  
  4.    VerticalScrollBarVisibility="Visible"  
  5.    TextWrapping="Wrap"  
  6.    TextAlignment="Right"  
  7.    MaxLength="500"  
  8.    IsReadOnly="False"  
  9.     AcceptsReturn="True" >  
  10.   
  11. </TextBox>  

Listing 7

Summary

In this article, I discussed how we can create and format a TextBox control in WPF and C#. After that we saw how to create a TextBox control dynamically. Then we saw how to set various properties of a TextBox such as making it non editable, restricting the size of text, and setting the foreground and background of the selected text.