如何实现带1pm边框宽度与圆角的Label容器？解决Frame细边框问题

嘿，这个问题我之前做项目的时候刚好碰到过！你说的应该是1px的边框宽度吧（笔误写成1pm啦😉）。Xamarin.Forms自带的Frame确实没有直接设置边框宽度的属性，默认边框在不同平台上的粗细还不一样，想要实现这种极小的边框+圆角效果，有两种可行的方案，我给你详细说说：

这是最靠谱的方案，能完全控制边框宽度和圆角，完美适配iOS和Android。步骤很简单：

1. 创建自定义Frame控件 #

先在你的项目里新建一个自定义控件，继承自Frame，添加BorderWidth的绑定属性：

using Xamarin.Forms;

namespace YourAppNamespace.Controls
{
    public class BorderedFrame : Frame
    {
        public static readonly BindableProperty BorderWidthProperty =
            BindableProperty.Create(nameof(BorderWidth), typeof(double), typeof(BorderedFrame), 1.0);

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

2. 实现iOS自定义渲染器 #

在iOS项目里添加渲染器，直接操作原生的CALayer来设置边框和圆角：

using Xamarin.Forms;
using Xamarin.Forms.Platform.iOS;
using YourAppNamespace.Controls;
using YourAppNamespace.iOS.Renderers;
using UIKit;

[assembly: ExportRenderer(typeof(BorderedFrame), typeof(BorderedFrameRenderer))]
namespace YourAppNamespace.iOS.Renderers
{
    public class BorderedFrameRenderer : FrameRenderer
    {
        protected override void OnElementChanged(ElementChangedEventArgs<Frame> e)
        {
            base.OnElementChanged(e);
            UpdateBorderProperties();
        }

        protected override void OnElementPropertyChanged(object sender, System.ComponentModel.PropertyChangedEventArgs e)
        {
            base.OnElementPropertyChanged(sender, e);
            if (e.PropertyName == BorderedFrame.BorderWidthProperty.PropertyName ||
                e.PropertyName == Frame.CornerRadiusProperty.PropertyName ||
                e.PropertyName == Frame.OutlineColorProperty.PropertyName)
            {
                UpdateBorderProperties();
            }
        }

        private void UpdateBorderProperties()
        {
            if (Element is BorderedFrame borderedFrame && Control != null)
            {
                Control.Layer.BorderWidth = (nfloat)borderedFrame.BorderWidth;
                Control.Layer.CornerRadius = (nfloat)borderedFrame.CornerRadius;
                Control.Layer.BorderColor = borderedFrame.OutlineColor.ToCGColor();
                Control.ClipsToBounds = true;
            }
        }
    }
}

3. 实现Android自定义渲染器 #

Android这边用GradientDrawable来实现边框和圆角，注意要做密度转换，保证不同分辨率设备上显示一致：

using Xamarin.Forms;
using Xamarin.Forms.Platform.Android;
using YourAppNamespace.Controls;
using YourAppNamespace.Droid.Renderers;
using Android.Content;
using Android.Graphics.Drawables;

[assembly: ExportRenderer(typeof(BorderedFrame), typeof(BorderedFrameRenderer))]
namespace YourAppNamespace.Droid.Renderers
{
    public class BorderedFrameRenderer : FrameRenderer
    {
        public BorderedFrameRenderer(Context context) : base(context)
        {
        }

        protected override void OnElementChanged(ElementChangedEventArgs<Frame> e)
        {
            base.OnElementChanged(e);
            UpdateBorderProperties();
        }

        protected override void OnElementPropertyChanged(object sender, System.ComponentModel.PropertyChangedEventArgs e)
        {
            base.OnElementPropertyChanged(sender, e);
            if (e.PropertyName == BorderedFrame.BorderWidthProperty.PropertyName ||
                e.PropertyName == Frame.CornerRadiusProperty.PropertyName ||
                e.PropertyName == Frame.OutlineColorProperty.PropertyName)
            {
                UpdateBorderProperties();
            }
        }

        private void UpdateBorderProperties()
        {
            if (Element is BorderedFrame borderedFrame)
            {
                var shape = new GradientDrawable();
                shape.SetShape(ShapeType.Rectangle);
                // 转换圆角为Android的dp单位
                shape.SetCornerRadius(Resources.DisplayMetrics.Density * borderedFrame.CornerRadius);
                // 转换边框宽度为Android的dp单位，保证1px的显示效果
                shape.SetStroke((int)(Resources.DisplayMetrics.Density * borderedFrame.BorderWidth), borderedFrame.OutlineColor.ToAndroid());
                
                // 设置背景色，和Frame保持一致
                shape.SetColor(borderedFrame.BackgroundColor != Color.Default 
                    ? borderedFrame.BackgroundColor.ToAndroid() 
                    : Android.Graphics.Color.Transparent);

                ViewGroup.SetBackground(shape);
            }
        }
    }
}

4. 在XAML中使用自定义控件 #

先声明命名空间，然后直接替换原来的Frame：

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:YourAppNamespace.Controls"
             x:Class="YourAppNamespace.YourPage">

    <local:BorderedFrame Grid.Column="0" CornerRadius="5" OutlineColor="Black" BorderWidth="1">
        <Label x:Name="faveIconLabel" Style="{StaticResource mediumIcon}" Margin="0,2,0,0" 
               HorizontalOptions="Fill" FontFamily="FontAwesome" 
               VerticalOptions="Center" VerticalTextAlignment="Center" />
    </local:BorderedFrame>

</ContentPage>

如果不想写自定义渲染器，也可以用Grid叠加BoxView的方式模拟边框，适合快速实现：

<Grid Grid.Column="0">
    <!-- 用BoxView做边框 -->
    <BoxView CornerRadius="5" StrokeColor="Black" BackgroundColor="Transparent">
        <BoxView.StrokeWidth>
            <!-- 针对不同平台调整宽度，保证1px效果 -->
            <OnPlatform x:TypeArguments="x:Double">
                <On Platform="iOS" Value="1" />
                <On Platform="Android" Value="0.33" /> <!-- Android 1dp≈3px，所以0.33dp≈1px -->
            </OnPlatform>
        </BoxView.StrokeWidth>
    </BoxView>
    <!-- Label放在上面 -->
    <Label x:Name="faveIconLabel" Style="{StaticResource mediumIcon}" Margin="0,2,0,0" 
           HorizontalOptions="Fill" FontFamily="FontAwesome" 
           VerticalOptions="Center" VerticalTextAlignment="Center" />
</Grid>

不过这个方案的灵活性不如自定义渲染器，如果需要动态修改边框宽度或者颜色，还是推荐用第一种方案。

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