如何在Xamarin.Forms XAML中为Label添加右边框？

嘿，我明白你想要给Label加右边框但Xamarin.Forms没有直接的Border属性的困扰，之前试的BoxView没生效大概率是布局没调整对，下面给你几个靠谱的解决办法：

方案1：用横向StackLayout搭配BoxView（最简单） #

把需要加右边框的Label和一个窄BoxView放在横向排列的StackLayout里，让BoxView作为右边框，设置好它的宽度和垂直填充：

<ListView x:Name="listview" SeparatorVisibility="None" HasUnevenRows="True" >
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<StackLayout Padding="20, 10">
    <!-- 带右边框的Label -->
    <StackLayout Orientation="Horizontal">
        <Label Text="{Binding LoremIpsum}" HorizontalOptions="Start"/>
        <BoxView WidthRequest="2" BackgroundColor="#000" VerticalOptions="Fill"/>
    </StackLayout>
    <Label Text="{Binding LoremIpsum1}" />
    <Label Text="{Binding LoremIpsum2}" />
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>

这里关键是把Orientation设为Horizontal，并且给BoxView的VerticalOptions设为Fill，这样它的高度会和Label完全匹配，不会出现高度不够的问题。

方案2：用Grid布局（更灵活） #

如果需要更精确的布局控制，用Grid把Label和BoxView放在同一行，BoxView占固定宽度的列：

<ListView x:Name="listview" SeparatorVisibility="None" HasUnevenRows="True" >
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<StackLayout Padding="20, 10">
    <!-- 带右边框的Label -->
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto"/> <!-- 自适应Label宽度 -->
            <ColumnDefinition Width="2"/> <!-- 右边框宽度 -->
        </Grid.ColumnDefinitions>
        <Label Grid.Column="0" Text="{Binding LoremIpsum}" HorizontalOptions="Start"/>
        <BoxView Grid.Column="1" BackgroundColor="#000" VerticalOptions="Fill"/>
    </Grid>
    <Label Text="{Binding LoremIpsum1}" />
    <Label Text="{Binding LoremIpsum2}" />
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>

这个方案的好处是可以精确控制边框的位置和宽度，不会出现StackLayout可能的间距问题。

方案3：自定义Label渲染器（全局复用） #

如果你的项目里很多Label都需要加右边框，自定义一个带右边框的Label会更高效，通过原生渲染器来实现：

第一步：创建自定义Label类 #

在共享项目里添加一个继承自Label的类：

public class RightBorderLabel : Label
{
    // 可以添加自定义属性，比如边框宽度、颜色
    public static readonly BindableProperty BorderWidthProperty =
        BindableProperty.Create(nameof(BorderWidth), typeof(int), typeof(RightBorderLabel), 2);

    public int BorderWidth
    {
        get => (int)GetValue(BorderWidthProperty);
        set => SetValue(BorderWidthProperty, value);
    }

    public static readonly BindableProperty BorderColorProperty =
        BindableProperty.Create(nameof(BorderColor), typeof(Color), typeof(RightBorderLabel), Color.Black);

    public Color BorderColor
    {
        get => (Color)GetValue(BorderColorProperty);
        set => SetValue(BorderColorProperty, value);
    }
}

第二步：实现Android渲染器 #

在Android项目里添加渲染器：

[assembly: ExportRenderer(typeof(RightBorderLabel), typeof(RightBorderLabelRenderer))]
namespace YourAppNamespace.Droid
{
    public class RightBorderLabelRenderer : LabelRenderer
    {
        protected override void OnElementChanged(ElementChangedEventArgs<Label> e)
        {
            base.OnElementChanged(e);
            if (Control != null && Element is RightBorderLabel customLabel)
            {
                // 创建右边框的Drawable
                var rightBorder = new ColorDrawable(customLabel.BorderColor.ToAndroid());
                var layer = new LayerDrawable(new Drawable[] { rightBorder });
                // 设置边框宽度：右边留出BorderWidth的宽度，其他边设为0
                layer.SetLayerInset(0, 0, 0, -customLabel.BorderWidth, 0);
                Control.SetBackground(layer);
            }
        }
    }
}

第三步：实现iOS渲染器 #

在iOS项目里添加渲染器：

[assembly: ExportRenderer(typeof(RightBorderLabel), typeof(RightBorderLabelRenderer))]
namespace YourAppNamespace.iOS
{
    public class RightBorderLabelRenderer : LabelRenderer
    {
        protected override void OnElementChanged(ElementChangedEventArgs<Label> e)
        {
            base.OnElementChanged(e);
            if (Control != null && Element is RightBorderLabel customLabel)
            {
                // 添加右边框的子Layer
                var rightBorder = new CALayer();
                rightBorder.Frame = new CGRect(
                    Control.Frame.Width - customLabel.BorderWidth, 
                    0, 
                    customLabel.BorderWidth, 
                    Control.Frame.Height);
                rightBorder.BackgroundColor = customLabel.BorderColor.ToCGColor();
                Control.Layer.AddSublayer(rightBorder);
            }
        }
    }
}

第四步：在XAML里使用 #

先声明命名空间，然后直接用自定义Label：

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:YourAppNamespace"
             x:Class="YourAppNamespace.MainPage">
    <ListView x:Name="listview" SeparatorVisibility="None" HasUnevenRows="True" >
    <ListView.ItemTemplate>
    <DataTemplate>
    <ViewCell>
    <StackLayout Padding="20, 10">
        <local:RightBorderLabel Text="{Binding LoremIpsum}" BorderWidth="2" BorderColor="#000"/>
        <Label Text="{Binding LoremIpsum1}" />
        <Label Text="{Binding LoremIpsum2}" />
    </StackLayout>
    </ViewCell>
    </DataTemplate>
    </ListView.ItemTemplate>
    </ListView>
</ContentPage>

这三个方案里，前两个适合单个或少量Label的场景，第三个适合需要全局复用的情况，你可以根据自己的需求选择~

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