Is there a way not to truncate rotated Label text inside Table Cell in Xamarin.Forms? And why it's still based on ColumnDefinition?

Question

Seems like the text of the <Label> inside a <Grid> cell is truncated base on ColumnDefinitions attribute even if the text is rotated by 90 degree. But I have to set the column width to 50 and see the rotated text entirely.

If I use this code block the text (with ColumnDefinitions="50") the text is truncated:

<Grid ColumnDefinitions="50" HeightRequest="100">
    <Label Rotation="-90" Text="LongText" />
</Grid>

And if I use this code block the text (with ColumnDefinitions="70") the text is written without truncation:

<Grid ColumnDefinitions="70" HeightRequest="100">
    <Label Rotation="-90" Text="LongText" />
</Grid>

Graphic result for reference:

Is there any way to see the rotate text entirely in the grid cell with setted column width to 50?

Apparently this is a bug that still exists (though I did not look for a bug report). Do either of the work-arounds in [these answers](https://stackoverflow.com/q/32625098/199364) help you? — ToolmakerSteve, Oct 28 '21 at 04:33

score 0 · Answer 1 · answered May 28 '22 at 09:54

Create RotatedLabel.cs in you shared mobile project:

using Xamarin.Forms;

namespace YourProject.Views.Controls
{
    public class RotatedLabel : View
    {
        public static BindableProperty TextProperty = BindableProperty.Create(nameof(Text), typeof(string), typeof(RotatedLabel), null, BindingMode.TwoWay);

        public string Text
        {
            get => (string)GetValue(TextProperty);
            set => SetValue(TextProperty, value);
        }
    }
}

Create RotatedLabelRenderer.cs in your Android project:

using Android.Content;
using Android.Graphics;
using Android.Text;

using YourProject.Views.Controls;

using Xamarin.Forms;
using Xamarin.Forms.Platform.Android;

[assembly: ExportRenderer(typeof(RotatedLabel), typeof(YourProject.Droid.Views.Renderers.RotatedLabelRenderer))]
namespace YourpPoject.Droid.Views.Renderers
{
    public class RotatedLabelRenderer : ViewRenderer
    {
        private readonly Context _context;

        public RotatedLabelRenderer(Context c) : base(c)
        {
            _context = c;
        }

        protected override void OnElementChanged(ElementChangedEventArgs<View> e)
        {
            base.OnElementChanged(e);

            if (e.NewElement is RotatedLabel text)
            {
                string title = text.Text;
                SetNativeControl(new RotatedTextView(_context, title));
            }
        }
    }

    public class RotatedTextView : Android.Views.View
    {
        private readonly int DEFAULT_TEXT_SIZE = 30;
        private readonly string _text;
        private TextPaint _textPaint;

        public RotatedTextView(Context c, string title) : base(c)
        {
            _text = title;
            InitLabelView();
        }

        private void InitLabelView()
        {
            _textPaint = new TextPaint
            {
                AntiAlias = true,
                TextAlign = Paint.Align.Center,
                TextSize = DEFAULT_TEXT_SIZE,
                Color = new Android.Graphics.Color(0, 0, 0),
            };
        }

        public override void Draw(Canvas canvas)
        {
            base.Draw(canvas);

            if (!string.IsNullOrEmpty(_text))
            {
                float x = (Width / 2) - (DEFAULT_TEXT_SIZE / 3);
                float y = (Height / 2);

                canvas.Rotate(90);
                canvas.DrawText(_text, y, -x, _textPaint);
            }
        }
    }
}

Is there a way not to truncate rotated Label text inside Table Cell in Xamarin.Forms? And why it's still based on ColumnDefinition?

1 Answers1