WPF TextBox With Ellipsis

Property	Description
`LongText`	The underlying, untruncated text. When this doesn't fit in the visible area, the `Text` property is automatically set to a truncated version of this, but with an ellipsis. You can set `Text` or `LongText` interchangeably. However, when getting `Text`, you will get the (possibly) truncated version. Getting `LongText` always gets the untruncated version.
`IsEllipsisEnabled`	A `bool` that enables and disables the ellipsis. When enabled, an ellipsis (Unicode character 0x2026) is shown when `LongText` is truncated to fit the visible area. Otherwise, the control behaves like a regular `TextBox`.
`UseLongTextForToolTip`	When `true`, this `bool` causes the `ToolTip` property to automatically switch between `LongText` (when it doesn't fit) and `null` (when it does fit). This occurs independently of `IsEllipsisEnabled`. When false, `ToolTip` is left alone.
`EllipsisPlacement`	An enumeration that specifies where the ellipsis should appear (`<code>Left`, `Center`, or `Right`).
`FudgePix`	The number of pixels to "fudge" by when determining what substring of `LongText` will fit. I added this because I noticed the control wasn't quite using all the available space for the text before applying the ellipsis. The default value is 3, which appears to use every available pixel on my computer/monitor/video card. I made it adjustable in case it's not the same everywhere.

Therefore the text is always updating even though it is ellipsed already. Does anyone have any ideas on how to solve this? Thank you in advance!

I managed to solve this problem by removing the SizeChanged handler and adding this MeasureOverride instead:

C#

double _lastMeasureConstraint = 0;

protected override Size MeasureOverride(Size constraint)
{
     if (Math.Abs(_lastMeasureConstraint - constraint.Width) > 1.0)
     {
         prepare_for_layout?.Abort();
         prepare_for_layout = Dispatcher.InvokeAsync(PrepareForLayout, DispatcherPriority.Background);
         _lastMeasureConstraint = constraint.Width;
     }
     return base.MeasureOverride(constraint);
}

Hi,

I know it's an old post but the control is amazing!!! Smile | :)

but...

when the trimming occurs the first time, the binding stop working... I have no clue how to fix this... Anyone could help?

Thanks

Hi,

Could you please let me know is it possible to get centered ellipsis text on a WPF TextBlock.

Thanks,
-Madushan-

modified 28-Jun-17 7:37am.

Textblocks are way easier as they have the TextTrimming property that allows you to select ellipisis as an option! xD

The TextTrimming property does not allow you to insert an ellipsis in the middle of a path.

I had to create such a textbox with the ellipsis for a Windows 8.1 App. The closest I came to the solution was through this post. I am very thankful for that and I want to post my solution (which is based on this concept) for people to use.

C#

#region Ellipsis

//If the user clicks on the box to type (got focus)
private void frontValueBox_GotFocus(object sender, RoutedEventArgs e)
{
    //Gets the cursor position to where the user clicks on the box
    int index = frontValueBox.SelectionStart;
    //the text in the textbox gets replaced with the uncut text
    frontValueBox.Text = _text;
    //Sets the cursor position to where the user click on the box
    frontValueBox.SelectionStart = index;
}

//If the user is done typing and loses the focus of the box
private void frontValueBox_LostFocus(object sender, RoutedEventArgs e)
{
    //as soon as the user loses the focus of the box, the text gets replaced with the cut version
    Text = frontValueBox.Text;
    ToolTipService.SetToolTip(frontValueBox, _text);
}

//Calculate the width of the text in DIP (Device independent pixels)
private double stringWidth(string s, double fontSize)
{
    if (s == " ")
        s = "\u00a0";

    TextBlock t = new TextBlock()
    {
        FontSize = fontSize,
        Text = s
    };
    t.Measure(new Size(double.MaxValue, double.MaxValue));
    return t.ActualWidth;
}

//Calculates the necessary text length, cuts it and places it into the textbox
private string CutTextToWidth(string text, double fontSize, double width)
{
    //used to calculate the text into the right size to fit 
    bool validArea = false; 
    //There is a slight difference in width of each letter. this prevents any unwanted effects of not fitting
    //Use *1.1 to increase the valid width by 10%
    double CharDiffLength = (stringWidth("M", fontSize) - stringWidth("|", fontSize)); //*1.1
    //this value gets returned at the end (shortened text)
    string shortText = text; 
    //last length which didn't fit into the box
    int LastLongLen = text.Length;
    //last length which fit into the box
    int LastFitLen = 0;

    if (stringWidth(text, fontSize) < width)
    {
        shortText = text;
    }
    else
    {
        //repeat calculation until textlength fits into validArea
        while (!validArea)
        {
            if (width < stringWidth(shortText, fontSize))
            {
                //text is too long (does not fit)
                LastLongLen = shortText.Length;
            }
            else
            {
                //text is not too long (fits)
                LastFitLen = shortText.Length;
            }

            int newLen = (LastFitLen + LastLongLen) / 2;

            if (shortText.Length != newLen)
            {
                //save the shortened text
                shortText = text.Substring(0, newLen) + "\u2026";
            }
            validArea = ((width - 10 < stringWidth(shortText, fontSize)) && (stringWidth(shortText, fontSize) < width));
        }
    }
    //return the shortened text
    return shortText;
}

#endregion

 //Get and set the content of the textbox
#region Text
private string _text;
public string Text
{
    get { return _text; }
    set
    {
        _text = value;
        //Here, the function gets called. Hand over the _text, the fontsize of the box and the width
        //(-25) is the padding to the left and right. Feel free to change that value to suit your needs.
        frontValueBox.Text = CutTextToWidth(_text, frontValueBox.FontSize, frontValueBox.Width - 25);
    }
}
#endregion

You basicly only need "stringWidth" "CutTextToWidth(yourText, yourFontSize, yourTextBoxWidth)" and the _text property at the end (in the region "Text"). To change the textbox from outside, you can use it like this (for example):

Let's say you have a button. Whenever you click this button, the text in another textbox gets written into the "shortened" textbox and the text gets cut.

C#

private void Button_Click(object sender, RoutedEventArgs e)
        {
            //Text is the public string (the property) which initializes everything.
            //testText.Text is the textbox from where you get your text
            Text = testText.Text;
        }

I hope I'm allowed to post that here. Hopefully this will help someone someday. Thank you again for this great idea to cut the text!

Greetings

I just ran across the same thing, had to create it. All this does is use a TextBox with a TextBlock as the Background, and hides/shows the TextBox Text based off IsFocused:

HTML

<TextBox x:Name="tbPopup" Grid.Column="0" VerticalAlignment="Center" Height="25" VerticalContentAlignment="Center" >
    <TextBox.Resources>
        <VisualBrush x:Key="backgroundBrush" Stretch="None" AlignmentX="Left"  >
            <VisualBrush.Visual>
                <Label Width="{Binding RelativeSource={RelativeSource AncestorType=TextBox}, Path=ActualWidth}"
                       Height="{Binding RelativeSource={RelativeSource AncestorType=TextBox}, Path=ActualHeight}"
                       Padding="3.7,0,2.7,0" Background="White" VerticalContentAlignment="Center">
                       <TextBlock Text="{Binding RelativeSource={RelativeSource AncestorType=TextBox}, Path=Text}"
                                  TextTrimming="CharacterEllipsis" Foreground="Black"
                                  FontFamily="{Binding RelativeSource={RelativeSource AncestorType=TextBox}, Path=FontFamily}"
                                  FontSize="{Binding RelativeSource={RelativeSource AncestorType=TextBox}, Path=FontSize}"
                                  FontWeight="{Binding RelativeSource={RelativeSource AncestorType=TextBox}, Path=FontWeight}"/>
                </Label>
            </VisualBrush.Visual>
         </VisualBrush>

         <Style TargetType="{x:Type TextBox}">
             <Setter Property="Background" Value="{StaticResource backgroundBrush}" />
             <Setter Property="Foreground" Value="Transparent" />
             <Style.Triggers>
                 <Trigger Property="IsFocused" Value="True">
                     <Setter Property="Background" Value="White" />
                     <Setter Property="Foreground" Value="{Binding RelativeSource={RelativeSource AncestorType=TextBlock}, Path=Foreground}" />
                 </Trigger>
             </Style.Triggers>
         </Style>
     </TextBox.Resources>
</TextBox>

I knew there had to be a better way!

Great approach! But I am wondering how you manage the caret/cursor position. Let say when user have moved caret to the end of textbox value

Normally I would bind the to the Text property of TextBlock so that a property on my code-behind file was bound to the control.

In the case of this control, that would have to be the LongText so that the code-behind isn't bound to the truncated string with the ellipsis.

However that produces an error:
"A 'Binding' cannot be set on the 'LongText' property of type 'TextBoxWithEllipsis'. A 'Binding' can only be set on a DependecnyProperty of a DependencyObject.

Perhaps to make this more compatible with expectations, the 'Text' should be the full and expected text, and a different property of say 'ShortText' should be used to show the truncated text.

The work-around isn't bad... Its just nice when one doesn't need work-arounds.

C#

private string _FolderPath = string.Empty;
/// <summary> The folder to monitor for new images. </summary>
public string FolderPath
{
    get { return _FolderPath; }
    set
    {
        _FolderPath = value;
        tbxFolderPath.LongText = value;
        //tbxAddress.Text = value;
        NotifyPropertyChanged("FolderPath");
    }
}

modified 18-Jan-12 14:11pm.

I did state in the article that I didn't make any of the properties dependency properties, so you shouldn't be surprised that binding doesn't work. I guess you could say I left that as an "exercise for the reader". There are plenty of articles on how to do that.

I agree it would be preferable to make the Text property return LongText, but I don't know how to do that, especially since Text isn't virtual.

Nice solution.

I have a similar issue, But lucky for me - the requirement was that the textbox would be readonly,
So I just changed it's style and put inside a textblock which supports Character Ellipsis.
It does the job if you get the textbox text from somewhere and you do not need editing in it.

This is the style that I have used:

XML

<LinearGradientBrush x:Key="TextBoxBorder" EndPoint="0,20" StartPoint="0,0" MappingMode="Absolute">
            <GradientStop Color="#ABADB3" Offset="0.05"/>
            <GradientStop Color="#E2E3EA" Offset="0.07"/>
            <GradientStop Color="#E3E9EF" Offset="1"/>
        </LinearGradientBrush>

        <Style x:Key="TextBoxStyleReadOnlyWithCharacterEllipsis" BasedOn="{x:Null}" TargetType="{x:Type TextBox}">
            <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
            <Setter Property="Background" Value="{DynamicResource {x:Static SystemColors.WindowBrushKey}}"/>
            <Setter Property="BorderBrush" Value="{StaticResource TextBoxBorder}"/>
            <Setter Property="BorderThickness" Value="1"/>
            <Setter Property="Padding" Value="1"/>
            <Setter Property="AllowDrop" Value="true"/>
            <Setter Property="FocusVisualStyle" Value="{x:Null}"/>
            <Setter Property="ScrollViewer.PanningMode" Value="VerticalFirst"/>
            <Setter Property="Stylus.IsFlicksEnabled" Value="False"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type TextBox}">
                        <Microsoft_Windows_Themes:ListBoxChrome x:Name="Bd" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" RenderMouseOver="{TemplateBinding IsMouseOver}" RenderFocused="{TemplateBinding IsKeyboardFocusWithin}" SnapsToDevicePixels="true">
                            <TextBlock Text="{TemplateBinding Text}" TextTrimming="CharacterEllipsis" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" Margin="4,0,-2,0"  />
                        </Microsoft_Windows_Themes:ListBoxChrome>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsEnabled" Value="false">
                                <Setter Property="Background" TargetName="Bd" Value="{DynamicResource {x:Static SystemColors.ControlBrushKey}}"/>
                                <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

and the TextBox:

CSS

<TextBox Height="23" HorizontalAlignment="Stretch" Margin="12" x:Name="txtEllipsis1" VerticalAlignment="Top" Grid.Row="0"
         Text="Ellipsis is turned off when this control has the focus." Padding="0" Style="{StaticResource TextBoxStyleReadOnlyWithCharacterEllipsis}"/>

That's impressive. Is there any way to get that technique to work for an editable TextBox? Maybe a trigger to change the style when it has the focus?

Thank you for sharing this. But, isn't the ellipsis normally in the middle so that the beginning and end of the string show.

There is another project that allows this: see http://www.codeproject.com/KB/cs/AutoEllipsis.aspx.

If you could combine this in your class it would be worth a vote of ten.

OK, I added an option to place the ellipsis at the left, center, or right end of the text.

And, thanks for the vote!

Thank you for the new upload, but I think you got a little extreme with your left and right options. The Left ellipsis should located after the first folder and the Right ellipsis should be before the last folder or filename.
Thank you

The control is coded to handle any arbitrary string that might appear in a textbox. It doesn't assume that all strings are path names. In fact, I would guess that most strings in the world aren't path names.

There are many possible criteria for choosing the location of the ellipsis. This code gives you a start so you can modify it for use with path names, credit card numbers, or whatever specific format you happen to be working with.

Very nice!

Thanks for sharing. Smile | :)

WPF TextBox With Ellipsis

Introduction

TextBoxWithEllipsis Properties

Demo App

Implementation

License

Comments and Discussions