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.

TextBlockImg1.jpg
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.

TextBlockImg2.jpg
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

Inlines

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.

TextBlockImg3.jpg
Figure 3

TextDecorations

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.

TextBlockImg4.jpg
Figure 4

Background

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>  

Summary

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.


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.