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

vanKraster 181 Reputation points
2024-02-17T07:47:30.25+00:00

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.

Xamarin
Xamarin
A Microsoft open-source app platform for building Android and iOS apps with .NET and C#.
5,291 questions
0 comments No comments
{count} votes

1 answer

Sort by: Most helpful
  1. Leon Lu (Shanghai Wicresoft Co,.Ltd.) 68,016 Reputation points Microsoft Vendor
    2024-02-19T05:43:41.1766667+00:00

    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.

    <ScrollView Orientation="Horizontal" HorizontalScrollBarVisibility="Never" x:Name="ScrollView">
         <Label x:Name="yourLabel"
                Text="Make changes to your XAML file and save to see your UI update in the running app with XAML Hot Reload. Give it a try!" >
         </Label>
    </ScrollView>
    

    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.

    <local:MyLabel Text="Make changes to your XAML file and save to see your UI update in the running app with XAML Hot Reload. Give it a try!"
            FontSize="16"
            MaxLines="1"
            LineBreakMode="TailTruncation"
            />
    

    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<Label> 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.