In this article we will learn how to crate and use TextBlock control in WPF.
TextBlock control
The TextBlock control are used to display the text. This control allows you to render read only text.
Properties - These are the following properties of this control.
Figure 1.
The Width property of the TextBlock element represent the width of a TextBlock.
The Height property 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 Foreground property sets the foreground color of contents or text.
Margin Gets or sets the outer margin of a TextBlock control.
MaxHeight Gets or sets the maximum height constraint of a TextBlock control.
MaxWidth Gets or sets the maximum width constraint of a TextBlock control.
Opacity Gets or sets the degree of the object's opacity.
Creating a TextBlock
Creating a TextBlock control in XAML.
<TextBlock Height="23" HorizontalAlignment="Left" Margin="10,10,0,0" Name="TextBlock1"Text="Rohatash Kumar"
VerticalAlignment="Top" FontFamily="Verdana" />
The output looks like this.
Figure 2.
Creating a dynamically TextBlock control.
Now creates a TextBlock object and sets its properties such as - width, height, Text and foreground and later the TextBlock is added to the LayoutRoot and double click on the form and add the following code.
Private Sub UserControl_Loaded(ByVal sender As System.Object, ByVal e AsSystem.Windows.RoutedEventArgs)
Handles MyBase.Loaded
Dim txtBlock As New TextBlock()
txtBlock.Height = 50
txtBlock.Width = 200
txtBlock.Text = "Hello, Rohatash"
txtBlock.Foreground = New SolidColorBrush(Colors.Green)
LayoutRoot.Children.Add(txtBlock)
End Sub
FontFamily and Size - The font typeface family name. The font size is the size in pixels.
<TextBlock Height="23" HorizontalAlignment="Left" Margin="10,10,0,0" Name="TextBlock1"Text="Rohatash Kumar"
VerticalAlignment="Top" FontFamily="Verdana" /><TextBlock Height="23"HorizontalAlignment="Left" Margin="10,39,0,0" Name="TextBlock2" Text="TextBlock"VerticalAlignment="Top"
FontFamily="Niagara Solid" FontSize="28" /><TextBlock Height="23"HorizontalAlignment="Left" Margin="12,84,0,0" Name="TextBlock3"
Text="TextBlock"VerticalAlignment="Top"
FontFamily="Latha" FontSize="18" />
The output looks like this.
Figure 3.
FontWeight - FontWeight has the following option. such as Thin, ExtraLight, Light, Normal, Medium, SemiBold, Bold, ExtraBold, Black, ExtraBlack.
<TextBlock Height="23" FontWeight="Bold" HorizontalAlignment="Left" Margin="10,10,0,0"Name="TextBlock1" Text="Rohatash Kumar" VerticalAlignment="Top" FontFamily="Verdana" />
<TextBlock Height="23" FontWeight="Light" HorizontalAlignment="Left" Margin="10,39,0,0"Name="TextBlock2" Text="Hello Rohatash" VerticalAlignment="Top" FontFamily="Niagara Solid"FontSize="28" />
<TextBlock Height="23" FontWeight="Heavy" HorizontalAlignment="Left" Margin="12,84,0,0"Name="TextBlock3" Text="Hi Rohatash" VerticalAlignment="Top" FontFamily="Latha"FontSize="18" />
The output looks like this.
Figure 4.
Foreground and Background - The foreground allows you to change the color of the font and background allows you to change the color of the background.
<TextBlock Height="23" FontWeight="Bold" HorizontalAlignment="Left" Margin="10,10,0,0"Name="TextBlock1" Text="Rohatash Kumar" VerticalAlignment="Top" FontFamily="Verdana"Foreground="Blue" Background="Aqua" />
<TextBlock Height="23" FontWeight="Light" HorizontalAlignment="Left" Margin="10,39,0,0"Name="TextBlock2" Text="Hello Rohatash" VerticalAlignment="Top" FontFamily="Niagara Solid"FontSize="28" Foreground="DarkGreen" Background="DarkSlateBlue" />
<TextBlock Height="23" FontWeight="Heavy" HorizontalAlignment="Left" Margin="12,84,0,0"Name="TextBlock3" Text="Hi Rohatash" VerticalAlignment="Top" FontFamily="Latha"FontSize="18" Foreground="Magenta" Background="DarkMagenta" />
The output looks like this.
Figure 5.
TextDecorations - A text decoration is a visual ornament that you can add to text.
<TextBlock TextDecorations=" underline" Height="23" FontWeight="Bold"HorizontalAlignment="Left" Margin="10,10,0,0"
Name="TextBlock1" Text="Rohatash Kumar"VerticalAlignment="Top" FontFamily="Verdana" Foreground="Blue" Background="Aqua" />
<TextBlock Height="23" FontWeight="Light" HorizontalAlignment="Left" Margin="10,39,0,0"Name="TextBlock2" Text="Hello Rohatash" VerticalAlignment="Top" FontFamily="Niagara Solid"FontSize="28" Foreground="DarkGreen" Background="DarkSlateBlue" />
<TextBlock TextDecorations="underline" Height="23" FontWeight="Heavy"HorizontalAlignment="Left" Margin="12,84,0,0"
Name="TextBlock3" Text="Hi Rohatash"VerticalAlignment="Top" FontFamily="Latha" FontSize="18" Foreground="Magenta" />
The output looks like this.
Figure 6.
Runs - we can inter-mix different runs of text formatting within the same block using the Run element. For example, you can display a string like this:
<TextBlock Margin="0,12,0,-12">
<Run FontWeight="Bold">Hello, Rohatash</Run>
<Run Foreground="Red">How are you?</Run>
<Run FontStyle="Italic">I am fine thanks!</Run>
</TextBlock>
The output looks like this.
Figure 7.