WPF TextBlock Example

TextBlock. A TextBlock is a rectangular box that has text.

We can change the appearance of the TextBlock. Many event handlers, including Mouse-related ones like MouseEnter and Leave, are also available.

Example. First, we create a new WPF project and drag a TextBlock to the window. We then can add several attributes on the TextBlock. We can change the appearance. We also add two event handlers (TextBlock_MouseEnter and Leave).

Here: The appearance attributes we set are not important. They just make the block look different.

And: We add MouseEnter and MouseLeave attributes. Type "MouseEnter" and then have Visual Studio add the event handler.

Based on:

.NET 4.5

Example markup: XAML

<Window x:Class="WpfApplication3.MainWindow"
	xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
	xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
	Title="MainWindow" Height="350" Width="525">
    <Grid>
	<TextBlock HorizontalAlignment="Left"
		   Margin="10,10,0,0"
		   TextWrapping="Wrap"
		   Text="Hello"
		   VerticalAlignment="Top"
		   FontFamily="Georgia"
		   Background="AliceBlue"
		   Padding="40"
		   Width="200"
		   MouseEnter="TextBlock_MouseEnter"
		   MouseLeave="TextBlock_MouseLeave"/>
    </Grid>
</Window>

Example code: C#

using System.Windows;
using System.Windows.Controls;
using System.Windows.Input;

namespace WpfApplication3
{
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window
    {
	public MainWindow()
	{
	    InitializeComponent();
	}

	private void TextBlock_MouseEnter(object sender, MouseEventArgs e)
	{
	    // ... Change Text to Enter when mouse enters.
	    var block = sender as TextBlock;
	    if (block != null)
	    {
		block.Text = "Enter";
	    }
	}

	private void TextBlock_MouseLeave(object sender, MouseEventArgs e)
	{
	    // ... Change Text to Leave when mouse leaves.
	    var block = sender as TextBlock;
	    if (block != null)
	    {
		block.Text = "Leave";
	    }
	}
    }
}

Appearance. Several attributes in the XAML were set that influence appearance. On the TextBlock element, we have both attributes that indicate event handlers and ones that describe the visual appearance.

FontFamily: This indicates the font, such as "Georgia" or "Verdana". A string value here is sufficient.

Background: This is the background color of the block. AliceBlue is a light blue shade. The background is the "back color" of the control.

ForeColor, BackColor

Padding: The padding of the TextBlock in pixels. The 40-pixel padding expands the colored block of the control.

Width: This indicates the number of pixels the TextBlock is wide. If the block is too small, the text is not fully shown.

MouseEnter. The MouseEnter event on a TextBlock can be used to create a hover effect. In the example, we change the Text value to "Enter" when the mouse enters the rectangle. The MouseLeave event will also be needed.

Note: We can get the originating object for the MouseEnter event by casting the sender object to a TextBlock.

ObjectAs

Also: The MouseLeave event can be used in the same way as the MouseEnter event. This event handler can "erase" the changes made by Enter.

Event

TextWrapping. The TextBlock supports wrapping text. It is best suited for long pieces of text, even paragraphs or pages. For shorter units of text, please consider a Label control. TextBlock has three options for wrapping.

Label

NoWrap: With this TextWrapping option, the entire string contents will render in one line. No breaks are rendered.

Wrap: All lines will wrap. If a break point is not found, one will be added in the middle of a word.

WrapWithOverflow: Same as Wrap except a long word will not be broken into more than one line—it will just overflow.

In this example, we set a TextBlock to a long string. We create the Loaded event handler, TextBlock_Loaded. And in this event handler, we assign the Text property to a long C# string. This string could be read in from a file.

Example markup 2: XAML

<Window x:Class="WpfApplication8.MainWindow"
	xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
	xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
	Title="MainWindow" Height="350" Width="525">
    <Grid>
	<TextBlock HorizontalAlignment="Left"
		   Margin="10"
		   TextWrapping="Wrap"
		   Text="Initial"
		   VerticalAlignment="Top"
		   Loaded="TextBlock_Loaded"/>
    </Grid>
</Window>

Example code 2: C#

using System.Windows;
using System.Windows.Controls;

namespace WpfApplication8
{
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window
    {
	public MainWindow()
	{
	    InitializeComponent();
	}

	private void TextBlock_Loaded(object sender, RoutedEventArgs e)
	{
	    // Get TextBlock reference.
	    var block = sender as TextBlock;
	    // Set text.
	    block.Text = "This is some longer text in the TextBlock. " +
		"We see how it wraps in this example. " +
		"TextBlock is meant for longer text.";
	}
    }
}

Summary. With TextBlock, we use rectangles with styles to display text. The textual contents of a TextBlock can be manipulated during runtime. Its visual appearance can be changed. It supports many event handlers.

Related Links