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.