Xamarin 表单 XAML 标签轮换答案

【问题标题】：Xamarin Forms XAML Label RotationXamarin 表单 XAML 标签轮换
【发布时间】：2015-09-17 07:50:26
【问题描述】：

我遇到了 Xamarin.Forms 和 Label 的问题。我正在尝试在网格列上设置标签。

这里的第一张图片显示了预期的结果，在 Android 上是用 AXML 编写的。

这里的第二张图片是在 Xamarin.Forms 中用 XAML 编写的。

XAML文件中的代码如下：

<Grid 
    VerticalOptions="FillAndExpand"
    HorizontalOptions="FillAndExpand">
    <Grid.ColumnDefinitions>
            <ColumnDefinition Width="400*"/>
            <ColumnDefinition Width="75*"/>
        </Grid.ColumnDefinitions>
        <WebView Source="{Binding ContentSource}" />
        <!--<ProgressBar IsVisible="{Binding IsLoading}" 
                    Progress="{Binding Progress}"/>-->

        <Grid Grid.Column="1"
            BackgroundColor="#EE7F00" 
            VerticalOptions="FillAndExpand"
            HorizontalOptions="FillAndExpand">
            <Label
                Text="{Binding DocumentIndex}"
                LineBreakMode="NoWrap"
                HorizontalOptions="Center"
                Rotation="-90"
                VerticalOptions="Center" />
            </Grid>
        </Grid>

如何将标签的高度或宽度扩展为与文本长度相等？

谢谢你

【问题讨论】：

尝试在标签上使用 CenterAndExpand 而不是 Center。
对我不起作用。
我面临同样的问题，即使在旋转后，标签也会呈现为父宽度。增加标签字体/文本会增加父宽度，需要将此作为 Xamarin Bugzilla 中的错误提交 (bugzilla.xamarin.com)

标签： xamarin rotation label xamarin.forms

【解决方案1】：

删除标签的网格容器并放置一个盒子视图，并将盒子视图和标签的网格行和列设置为相同。像这样

<Grid 
VerticalOptions="FillAndExpand"
HorizontalOptions="FillAndExpand">
    <Grid.RowDefinitions>
        <RowDefinition Height="*" />
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="80*"/>
        <ColumnDefinition Width="20*"/>
    </Grid.ColumnDefinitions>

    <WebView Grid.Row="0" Grid.Column="0" Source="{Binding ContentSource}" />
    <!--<ProgressBar IsVisible="{Binding IsLoading}" 
                Progress="{Binding Progress}"/>-->
    <BoxView Grid.Row="0" Grid.Column="1" BackgroundColor="#EE7F00" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand"/>
    <Label  Grid.Row="0" Grid.Column="1" Text="{Binding DocumentIndex}"
            LineBreakMode="NoWrap"
            HorizontalOptions="Center"
            Rotation="-90"
            VerticalOptions="Center" />

</Grid>

我希望这能解决您旋转后的标签长度问题。

【讨论】：

我也遇到过类似的问题。网格内的标签旋转 + 或 - 90 度（在默认 z 轴上）并限制在网格布局内的窄列内。标签文本被截断为列的宽度。我已经尝试了上述建议的解决方法，但没有任何区别。我已经在 Android 和 iOS 平台上尝试过。这是一个已知的问题。上面 1 月 5 日的评论中提到了 Xamarin bugzilla。
旋转 -90 而不是 90 对我有帮助

【解决方案2】：

我使用自定义渲染器解决了这个问题。在您的表单项目中：

public class RotatedText : View
{
    public static BindableProperty TitleValueProperty = BindableProperty.Create(nameof(TitleValue), typeof(string), typeof(string), null, BindingMode.TwoWay, null,
                                                             (bindable, oldValue, newValue) =>
                                                             {

                                                             });

    public string TitleValue
    {
        get => (string)GetValue(TitleValueProperty);
        set => SetValue(TitleValueProperty, value);
    }
}

在你的 Android 项目中：

[assembly: ExportRenderer(typeof(RotatedText), typeof(RotatedTextRenderer))]
namespace MyNamespace
{
    public class RotatedTextRenderer : ViewRenderer
    {
        private Context _context;

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

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

            if (e.NewElement is RotatedText)
            {
                string title = ((RotatedText)e.NewElement).TitleValue;
                SetNativeControl(new RotatedTextView(_context, title));
            }
        }
    }

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

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

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

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

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

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

然后只需将TitleValue 设置在您使用RotatedText 的位置。这有点难看，但我找不到更好的方法。

【讨论】：