WPF TextBox

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.


Mindcracker
Founded in 2003, Mindcracker is the authority in custom software development and innovation. We put best practices into action. We deliver solutions based on consumer and industry analysis.