CODEWITHSUNDEEP
xamluwpwindows-8uwp-xamltextblock
MBZ
MBZ

Reputation: 27632

Maximum number of lines for a Wrap TextBlock

I have a TextBlock with the following setting:

TextWrapping="Wrap"

Can I determine the maximum number of lines?

for example consider the following string TextBlock.Text:

This is a very good horse under the blackboard!!

It currently has been shows like this:

This is a very 
good horse under 
the blackboard!!

I need that to become something like:

This is a very 
good horse ...

any solution?

Upvotes: 32

Views: 24914

Answers (7)

g t
g t

Reputation: 7463

Based on @artistandsocial's answer, I created a attached property to set the maximum number of lines programatically (rather than having to overload TextBlock which is discouraged in WPF).

public class LineHeightBehavior
{
    public static readonly DependencyProperty MaxLinesProperty =
        DependencyProperty.RegisterAttached(
            "MaxLines",
            typeof(int),
            typeof(LineHeightBehavior),
            new PropertyMetadata(default(int), OnMaxLinesPropertyChangedCallback));

    public static void SetMaxLines(TextBlock element, int value) => element.SetValue(MaxLinesProperty, value);

    public static int GetMaxLines(TextBlock element) =>(int)element.GetValue(MaxLinesProperty);

    private static void OnMaxLinesPropertyChangedCallback(
        DependencyObject d, 
        DependencyPropertyChangedEventArgs e)
    {
        if (d is TextBlock textBlock)
        {
            if (textBlock.IsLoaded)
            {
               SetLineHeight();
            }
            else
            {
                textBlock.Loaded += OnLoaded;

                void OnLoaded(object _, RoutedEventArgs __)
                {
                    textBlock.Loaded -= OnLoaded;
                    SetLineHeight();
                }
            }

            void SetLineHeight()
            {
                double lineHeight =
                   double.IsNaN(textBlock.LineHeight)
                        ? textBlock.FontFamily.LineSpacing * textBlock.FontSize
                        : textBlock.LineHeight;
                textBlock.MaxHeight = Math.Ceiling(lineHeight * GetMaxLines(textBlock));
            }
        }
    }
}

By default, the LineHeight is set to double.NaN, so this value must first be set manually, otherwise a height is calculated from the FontFamily and FontSize of the TextBlock.

The attached property MaxLines and other relevant properties can then be set in a Style:

<Style TargetType="{x:Type TextBlock}"
       BasedOn="{StaticResource {x:Type TextBlock}}">
    <Setter Property="TextTrimming"
            Value="CharacterEllipsis" />
    <Setter Property="TextWrapping"
            Value="Wrap" />
    <Setter Property="LineHeight"
            Value="16" />
    <Setter Property="LineStackingStrategy"
            Value="BlockLineHeight" />
    <Setter Property="behaviors:LineHeightBehavior.MaxLines"
            Value="2" />
</Style>

Upvotes: 3

Itzalive
Itzalive

Reputation: 390

Based tobi.at's and gt's answer I have created this MaxLines behaviour. Crucially it doesn't depend upon setting the LineHeight property by calculating the line height from the font. You still need to set TextWrapping and TextTrimming for it the TextBox to be render as you would like.

<TextBlock behaviours:NumLinesBehaviour.MaxLines="3" TextWrapping="Wrap" TextTrimming="CharacterEllipsis" Text="Some text here"/>

There in also a MinLines behaviour which can be different or set to the same number as the MaxLines behaviour to set the number of lines.

public class NumLinesBehaviour : Behavior<TextBlock>
{
    TextBlock textBlock => AssociatedObject;

    public static readonly DependencyProperty MaxLinesProperty =
        DependencyProperty.RegisterAttached(
            "MaxLines",
            typeof(int),
            typeof(NumLinesBehaviour),
            new PropertyMetadata(default(int), OnMaxLinesPropertyChangedCallback));

    public static void SetMaxLines(DependencyObject element, int value)
    {
        element.SetValue(MaxLinesProperty, value);
    }

    public static int GetMaxLines(DependencyObject element)
    {
        return (int)element.GetValue(MaxLinesProperty);
    }

    private static void OnMaxLinesPropertyChangedCallback(DependencyObject d, DependencyPropertyChangedEventArgs e)
    {
        TextBlock element = d as TextBlock;
        element.MaxHeight = getLineHeight(element) * GetMaxLines(element);
    }

    public static readonly DependencyProperty MinLinesProperty =
        DependencyProperty.RegisterAttached(
            "MinLines",
            typeof(int),
            typeof(NumLinesBehaviour),
            new PropertyMetadata(default(int), OnMinLinesPropertyChangedCallback));

    public static void SetMinLines(DependencyObject element, int value)
    {
        element.SetValue(MinLinesProperty, value);
    }

    public static int GetMinLines(DependencyObject element)
    {
        return (int)element.GetValue(MinLinesProperty);
    }

    private static void OnMinLinesPropertyChangedCallback(DependencyObject d, DependencyPropertyChangedEventArgs e)
    {
        TextBlock element = d as TextBlock;
        element.MinHeight = getLineHeight(element) * GetMinLines(element);
    }

    private static double getLineHeight(TextBlock textBlock)
    {
        double lineHeight = textBlock.LineHeight;
        if (double.IsNaN(lineHeight))
            lineHeight = Math.Ceiling(textBlock.FontSize * textBlock.FontFamily.LineSpacing);
        return lineHeight;
    }
}

Upvotes: 8

tobi.at
tobi.at

Reputation: 1286

Update (for UWP)

In UWP Apps you don't need this and can use the TextBlock property MaxLines (see MSDN)

Original Answer:

If you have a specific LineHeight you can calculate the maximum height for the TextBlock.

Example:

TextBlock with maximum 3 lines

<TextBlock 
  Width="300"
  TextWrapping="Wrap" 
  TextTrimming="WordEllipsis" 
  FontSize="24" 
  LineStackingStrategy="BlockLineHeight"
  LineHeight="28"
  MaxHeight="84">YOUR TEXT</TextBlock>

This is all that you need to get your requirement working.

How to do this dynamically?

Just create a new control in C#/VB.NET that extends TextBlock and give it a new DependencyProperty int MaxLines.
Then override the OnApplyTemplate() method and set the MaxHeight based on the LineHeight * MaxLines.

That's just a basic explanation on how you could solve this problem!

Upvotes: 54

Francisco Aguilera
Francisco Aguilera

Reputation: 3492

For anybody developing UWP or WinRT Applications, TextBlock has a MaxLines property you can set.

Upvotes: 0

Greg Lary
Greg Lary

Reputation: 1181

If you have Height, TextWrapping, and TextTrimming all set, it will behave exactly like you want:

<TextBlock Height="60" FontSize="22" FontWeight="Thin"
    TextWrapping="Wrap" TextTrimming="CharacterEllipsis">

The above code will wrap up to two lines, then use CharacterEllipsis beyond that point.

Upvotes: 6

Rohit Sharma
Rohit Sharma

Reputation: 6500

I doubt that is configurable, Wrapping is based on a number of factors such as font-size/kerning, available width of the textblock (horizontalalignment=stretch can make a big difference), parent's panel type (scrollviewer/stackpanel/grid) etc.

If you want the text to flow to the next line explicitly you should use "Run" blocks instead and then use wrapping of type ellipses for that run block.

Upvotes: -4

Mayank
Mayank

Reputation: 8852

you need TextTrimming="WordEllipsis" setting in your TextBlock

Upvotes: 2

Related Questions