Remove three dots at the end while using LineBreakMode="TailTruncation" MaxLines="1"

Question

Hi ,
As per title I have a label with

 LineBreakMode="TailTruncation"
 MaxLines="1"

and I want to remove the 3 dots at the end.

now it shows:
"lorem ipsum dol..."
and I want
"lorem ipsum dolo"

Pay attention at the fact that removing the 3 dots I have inserted a new letter cause it will remain space.
Thank you.

Answer

Hello,

==========Update=============

From vanKraster solution.

hiding those 3 dots with an overlayed stacklayout with 50% opacity and dark gray background.

Because I need to remove the dots every time I change the text, it seems to work but it is flickering and it is useless.... Perhaps you can give me another idea on how I can achieve this scrolling to left ?

You can use ScrollView to warp the Label and set the Orientation="Horizontal" and set the HorizontalScrollBarVisibility="Never". This way donot have flickering result and scroll smoothly.

Then you can scroll automatically by Timer and ScrollToAsync. If you scroll to the end, it will scroll to the start again.

imer timer;
double maxPos;
protected override async void OnAppearing()
{
    base.OnAppearing();
    timer=  new Timer(ScrollViewScrolled, null,TimeSpan.Zero, TimeSpan.FromMilliseconds(500));
    var s = ScrollView.ScrollX;
    ScrollView.Scrolled += ScrollView_Scrolled;
    
}

private void ScrollView_Scrolled(object sender, ScrolledEventArgs e)
{
    //get the max scroll X;
    var scrollView = sender as ScrollView;
    try
    {
        var contentSize = ScrollView.ContentSize.Width;
        var contentSizeCheck = ((View)ScrollView.Children[0]).Width;
       maxPos = contentSize - ScrollView.Width;
       Debug.WriteLine($"Scrolled to pos {e.ScrollY}, max: {maxPos}");
    }
    catch
    {

   }
}

int xPostion = 10;
private async void ScrollViewScrolled(object state)
{
   if( xPostion > maxPos )
    {
        xPostion = 0;
        return;
    }
   await ScrollView.ScrollToAsync(xPostion+=10, 0,false);
}

I thought that perhaps writing a new Custom renderer for Label <> TextView would solve my problem but I have to implement a lot to make it work. Inheriting from LabelRenderer I cannot find a way to overwrite the text after it has been truncated so I can delete those three dots.

I create a Mylabel class that extend the Label. Here is my tested layout code.

Then I write custom renderer for android platform to get text that removed three dots. I use textView.ViewTreeObserver.AddOnGlobalLayoutListener to get appeared TextView.

[assembly: ExportRenderer(typeof(MyLabel), typeof(MyLabelRender))]
namespace XFLabelCustomRenderer.Droid
{
    public class MyLabelRender : LabelRenderer
    {
        public MyLabelRender(Context context) : base(context)
        {
        }


       protected override void OnElementChanged(ElementChangedEventArgs e)
        {
            base.OnElementChanged(e);      
            var textView = Control as TextView;
             textView.ViewTreeObserver.AddOnGlobalLayoutListener(new MyNewLayoutListner(textView));
        }
}

Here is MyNewLayoutListner to get the text without tree dots and set it to the Textview.

 internal class MyNewLayoutListner : Java.Lang.Object, ViewTreeObserver.IOnGlobalLayoutListener
  {
      private TextView textView;


     public MyNewLayoutListner(TextView textView)
      {
          this.textView = textView;
      }


     public void OnGlobalLayout()
      {
          textView.ViewTreeObserver.RemoveOnGlobalLayoutListener(this);
          var re1 = textView.Layout.GetEllipsisStart(0);
          //get the text without the three dots
          string endText = (String)textView.Text.Substring(0, re1);
          //set the text to the Textview
          textView.Text = endText;
      }
  }

As note: I do not know how about follow part. Please use static string to make a test.

I am making a scroll text on the left and I am always removing the first letter and putting it to the end every 200ms, so the text will have the effect of scrolling to left.

Best Regards, Leon Lu

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment". Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

Remove three dots at the end while using LineBreakMode="TailTruncation" MaxLines="1"

1 answer