如何在Xamarin的Polygon内添加垂直居中、水平左对齐的Label？

一、实现Label在Polygon内垂直居中、水平左对齐 #

你当前代码里Label的HorizontalOptions="Center"会让控件整体居中，导致左对齐的文本看起来还是偏中间。只需调整布局参数，让Label从Polygon的有效区域（避开左侧三角形）开始左对齐，同时保持垂直居中：

方法1：Grid布局+Margin调整 #

<Grid Grid.Row="3">
   <Polygon Points="50 0, 0 100, 800 100, 800 0"
            Fill="{StaticResource PrimaryGray}"
            HorizontalOptions="FillAndExpand"
            VerticalOptions="FillAndExpand"/>
    <Label Text="To sdfghuiop retyuiop sdftyguiop sertdyfuio sdtfyguio"
            Margin="50,0,0,0" <!-- 左侧留50px避开三角形区域 -->
            HorizontalOptions="StartAndExpand"
            HorizontalTextAlignment="Start"
            VerticalOptions="Center"/>
</Grid>

注意：代码中Polygon的800是固定宽度，横竖屏适配会有问题，建议替换为相对父容器的宽度（参考方法2的动态绑定方式）。

方法2：RelativeLayout精准适配（推荐） #

用RelativeLayout可以让布局自适应屏幕尺寸，避免固定像素的适配问题：

<RelativeLayout Grid.Row="3">
   <Polygon x:Name="shapePolygon"
            Points="50 0, 0 100, {Binding Width, Source={x:Reference shapePolygon}} 100, {Binding Width, Source={x:Reference shapePolygon}} 0"
            Fill="{StaticResource PrimaryGray}"
            HorizontalOptions="FillAndExpand"
            VerticalOptions="FillAndExpand"/>
    <Label Text="To sdfghuiop retyuiop sdftyguiop sertdyfuio sdtfyguio"
            RelativeLayout.XConstraint="{ConstraintExpression Type=Constant, Constant=50}"
            RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=0.5, Constant=-15}" <!-- 垂直居中，15为Label半高的近似值 -->
            RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=1, Constant=-50}"
            HorizontalTextAlignment="Start" />
</RelativeLayout>

二、替代UI实现方案 #

方案1：自定义View绘制（完全可控） #

继承View直接绘制多边形背景和文字，适配性最强，适合复杂布局需求：

public class LabeledPolygonView : View
{
    private string _text;
    private Color _fillColor;
    private Paint _textPaint;
    private Paint _backgroundPaint;

    public string Text
    {
        get => _text;
        set { _text = value; Invalidate(); }
    }

    public Color FillColor
    {
        get => _fillColor;
        set { _fillColor = value; _backgroundPaint.Color = value; Invalidate(); }
    }

    public LabeledPolygonView(Context context) : base(context) => Initialize();
    public LabeledPolygonView(Context context, IAttributeSet attrs) : base(context, attrs) => Initialize();
    public LabeledPolygonView(Context context, IAttributeSet attrs, int defStyleAttr) : base(context, attrs, defStyleAttr) => Initialize();

    private void Initialize()
    {
        _backgroundPaint = new Paint { AntiAlias = true, Style = Paint.Style.Fill };
        _textPaint = new Paint { AntiAlias = true, TextSize = 40, Color = Color.Black };
        _fillColor = Color.Gray;
    }

    protected override void OnDraw(Canvas canvas)
    {
        base.OnDraw(canvas);

        // 绘制多边形背景
        Path path = new Path();
        path.MoveTo(50, 0);
        path.LineTo(0, Height);
        path.LineTo(Width, Height);
        path.LineTo(Width, 0);
        path.Close();
        canvas.DrawPath(path, _backgroundPaint);

        // 绘制文字：垂直居中+水平左对齐
        Rect textBounds = new Rect();
        _textPaint.GetTextBounds(Text, 0, Text.Length, textBounds);
        float y = (Height / 2) + (textBounds.Height() / 2);
        canvas.DrawText(Text, 50, y, _textPaint);
    }
}

XAML中使用：

<local:LabeledPolygonView Grid.Row="3"
                          Text="To sdfghuiop retyuiop sdftyguiop sertdyfuio sdtfyguio"
                          FillColor="{StaticResource PrimaryGray}"/>

方案2：用Path替代Polygon #

Path和Polygon功能类似，但支持更复杂的路径绘制，适配逻辑和之前一致：

<Grid Grid.Row="3">
   <Path Fill="{StaticResource PrimaryGray}"
         HorizontalOptions="FillAndExpand"
         VerticalOptions="FillAndExpand">
       <Path.Data>
           <PathGeometry>
               <PathFigure StartPoint="50,0">
                   <LineSegment Point="0,100"/>
                   <LineSegment Point="800,100"/>
                   <LineSegment Point="800,0"/>
                   <LineSegment Point="50,0"/>
               </PathFigure>
           </PathGeometry>
       </Path.Data>
   </Path>
    <Label Text="To sdfghuiop retyuiop sdftyguiop sertdyfuio sdtfyguio"
            Margin="50,0,0,0"
            HorizontalOptions="StartAndExpand"
            HorizontalTextAlignment="Start"
            VerticalOptions="Center"/>
</Grid>

三、创建类似的StackLayout #

可以用Grid叠加Polygon和StackLayout，实现带多边形背景的线性布局，布局逻辑和Label一致：

<Grid Grid.Row="3">
   <Polygon Points="50 0, 0 100, 800 100, 800 0"
            Fill="{StaticResource PrimaryGray}"
            HorizontalOptions="FillAndExpand"
            VerticalOptions="FillAndExpand"/>
    <StackLayout Margin="50,0,0,0"
                 VerticalOptions="Center"
                 HorizontalOptions="StartAndExpand">
        <Label Text="第一行内容"/>
        <Label Text="第二行内容"/>
        <!-- 添加更多控件 -->
    </StackLayout>
</Grid>

内容的提问来源于stack exchange，提问作者Xamarin