Dynamically Displaying Large Text on Mouse Hover in WPF Applications

• Download source - 15.7 KB

Introduction

This tip defines a way to make a TextBlock trimming and display the whole text on mouse hover with animation effect. There are many scenarios where we may want to apply the default property of TextTrimming but still we want the whole text to be displayed. This tip will explore one way of doing the same.

Background

When we apply TextTrimming, the whole text is not visible because of the width defined to TextBlock control. If we need to prevent the text from clipping and instead show a nice ... in the end, so as to indicate that the text is of more length, then it is more appealing from an applications perspective.

So if we try to look at the TextBlock default behavior without applying any TextTrimming.

And what we are proposing is that with our solution, the text should look like this:

In the rest of this tip, we will present one way of displaying the trimming text. We will also show the complete text on mouse hover with an animation.

Using the Code

Let us try to look at the solution using a sample application. I have created a simple WPF application that looks like:

The xaml i.e., UI displays the TextBox, Buttons & TextBlock. The TextBlock is displayed inside the Border. There are three Buttons which help user to Add, Append & Clear. The text added in the TextBox displayed with help of TextBlock is what you can see in the above screenshot.

The code behind xaml.cs contains the event handling on mouse enter & mouse leave on TextBlock declared in page initialize section. Also, the binding code of begin & end animation. The timer is defined for start animation on mouse enter. Trimming of TextBlock code is defined on button action wherever necessary as per the calculation of target height of Textblock on animation begin. After applying TextTrimming start animation code is defined for displaying whole text. Storyboard is used for animation code. Mouse enter starts the timer for begin animation which displays the full text. On mouse leave, stop the timer for end animation.

Below is the screen shot after I run the application.

Now let us try to solve this problem. For this, I have implemented a custom class called TextManipulation. The class has two methods TextTrimming & MeasurePixels. TextTrimming to be applied or not is decided on the basis of length of the text which is calculated with size & actual width of TextBlock. Multiplying it with full text length. If the result is less than one, TextTrimming is applied to TextBlock.

public static class TextManipulation
{
    public static string TextTrimming(string fullText, TextBlock textBlock, double size)
    {
        try
        {
            double factor = size / textBlock.ActualWidth;
            if (factor > 1)
            {
                return string.IsNullOrEmpty(fullText) == true ? textBlock.Text : fullText;
            }
            int newTextLength = (int)Math.Floor((double)fullText.Length * factor);
            string trimText;
            if (factor < 1)
            {
                trimText = fullText.Trim().Substring(0, newTextLength - 3);
                textBlock.Text = trimText + "...";
            }
            return textBlock.Text;
        }
        catch (Exception ex)
        {
            MessageBox.Show(ex.Message);
            return string.IsNullOrEmpty(fullText) == true ? textBlock.Text : fullText;
        }
    }

    public static double? MeasurePixels(TextBlock tb, string text)
    {
        double? size = 0;
        if (string.IsNullOrEmpty(text) == true)
            return 0;

        tb.UpdateLayout();
        size = tb.ActualHeight + 3;
        return size;
    }
}

Note: Function Measurepixels calculates the target Height of TextBlock on the basis of Actual Height of TextBlock.

With this implementation in place, if we now apply TextTrimming then the desired effect and animation can be seen in the application.

Let's run the application again to see the solution in action.

Output on mouse enter on TextBlock the full text is displayed.

Points of Interest

In this tip, we have seen how we can apply TextTrimming on a TextBlock. This tip was meant as an overview of the TextTrimming with animation applied to show the full text on mouse enter. I tried to keep the code simple and readable and thus avoided the use of MVVM pattern. This solution can easily be used with MVVM pattern too.

History

• 20 September 2013: First version