WPF TextBlock

The WPF TextBlock control is a lightweight text editor control for displaying and formattting small amount of text flow content. The code examples in this tutorial demonstrates how to use a TextBlock control in WPF using XAML and C#.

Creating a TextBlock

The TextBlock element represents a WPF TextBlock control in XAML.

  1. <TextBlock/>  

The Width and Height attributes of the TextBlock element represent the width and the height of a TextBlock. The Text property of the TextBlock element represents the content of a TextBlock. The Name attribute represents the name of the control, which is a unique identifier of a control. The Foreground property sets the foreground color of contents. This control does not have a Background property.

The code snippet in Listing 1 creates a TextBlock control and sets the name, height, width, foreground and content of a TextBlock control. Unlike a TextBox control, the TextBlock does not have a default border around it.

  1. <TextBlock Name="TextBlock1" Height="30" Width="200"  
  2.  Text="Hello! I am a TextBlock." Foreground="Red">  
  3. </TextBlock> 

Listing 1

The output looks like Figure 1.

Figure 1

As you can see from Figure 1, by default the TextBlock is place in the center of the page. We can place a TextBlock 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 TextBlock control in the left top corner of the page.

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

Listing 2

Creating a TextBlock Dynamically

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

  1. privatevoid CreateATextBlock()   
  2. {  
  3.     TextBlock txtBlock = newTextBlock();  
  4.     txtBlock.Height = 50;  
  5.     txtBlock.Width = 200;  
  6.     txtBlock.Text = "Text Box content";  
  7.     txtBlock.Foreground = newSolidColorBrush(Colors.Red);  
  8.     LayoutRoot.Children.Add(txtBlock);  
  9. }  

Listing 3

Setting Fonts of TextBlock 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 TextBlock. The code snippet in Listing 4 sets the font properties of a TextBlock.

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

Listing 4

The new output looks like Figure 2.

Figure 2

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. TextBlock1.FontSource = new FontSource(MySRI.Stream); 

Wrapping, Alignment and Padding

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 TextBlock, which is of type TextAlignment enumeration. A text can be aligned left, center, or right. 

  1. TextAlignment="Right"  

The Padding property sets the space between a boundary and the text that can be applied to all sides or a selected side of the boundary. The padding spacing is based on left, right, top, and bottom. If you specify only a single value, the padding will be applied to all four sides and if you specify two values, it will be applied to LeftTop and BottomRight sides.

Listing 5 shows all these properties in a complete sample.

  1. <TextBlock Name="TextBlock1" Height="30" Width="200"  
  2.     Text="Hello! I am a TextBlock." Foreground="Red"  
  3.     Margin="10,10,0,0" VerticalAlignment="Top"  
  4.     HorizontalAlignment="Left"  
  5.     FontSize="14" FontFamily="Verdana" FontWeight="Bold"  
  6.     TextWrapping="Wrap" TextAlignment="Center" Padding="2">  
  7. </TextBlock>  

Listing 5


The Inlines property represents the collection of inline text within a TextBlock control. A Run object represents an inline text and can be treated as its own text control and have its foreground and font related properties.

Listing 6 sets the Inlines property of the TextBlock and sets different fonts and foreground colors.

  1. <TextBlock.Inlines>  
  2.     <Run FontWeight="Bold" FontSize="14" Text="Hi! I am a TextBlock. " />  
  3.     <Run FontStyle="Italic" Foreground="Red" Text="This is red text. " />  
  4.     <Run FontStyle="Italic" FontSize="18" Text="Here is some linear gradient text. ">  
  5.         <Run.Foreground>  
  6.             <LinearGradientBrush>  
  7.                 <GradientStop Color="Green" Offset="0.0" />  
  8.                 <GradientStop Color="Purple" Offset="0.25" />  
  9.                 <GradientStop Color="Orange" Offset="0.5" />  
  10.                 <GradientStop Color="Blue" Offset="0.75" />  
  11.             </LinearGradientBrush>  
  12.         </Run.Foreground>  
  13.     </Run>  
  14.     <Run FontStyle="Italic" Foreground="Green" Text="How about adding some green? " />  
  15. </TextBlock.Inlines> 

Listing 6

The new output looks like Figure 3.

Figure 3


The TextDecorations property represents the text decorations that are applied to the content of a TextBlock. WPF supports only underline text decoration.

Listing 7 sets the TextDecorations to underline.

  1. <TextBlock Name="TextBlock1"  
  2.     Margin="10,10,0,0" VerticalAlignment="Top"  
  3.     HorizontalAlignment="Left"  
  4.     FontSize="12" FontFamily="Verdana"  
  5.     TextWrapping="Wrap" TextAlignment="Left" Padding="2"  
  6.  TextDecorations="Underline">  

Listing 7

The new output looks like Figure 4.

Figure 4


The Background property represents the background color of a TextBlock. Listing 8 sets the Background property of a TextBlock to a LinearGradientBrush. 

  1. <TextBlock.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. </TextBlock.Background>  

Listing 7

The code snippet in Listing 8 sets an image as background of a TextBlock.

  1. <TextBlock.Background>  
  2.     <ImageBrush ImageSource="Garden.jpg" Opacity="0.6" />  
  3. </TextBlock.Background>  


In this article, I discussed how we can create and format a TextBlock control in WPF and C#. After that we saw how to create a TextBlock control dynamically. Then we saw how to set various properties of a TextBlock such as fonts, Inlines, and text decorations.