Xamarin.Forms 如何为ListView组件添加边框？

方案1：Frame嵌套实现（无自定义代码，开发成本最低） #

直接将ListView嵌套在Frame组件内，利用Frame原生自带的边框属性实现需求，XAML示例代码如下：

<Frame 
    BorderColor="#333333"
    BorderThickness="1"
    CornerRadius="0"
    Padding="0"
    HasShadow="False">
    <!-- 你原有ListView的所有配置保持不变 -->
    <ListView ItemsSource="{Binding YourListData}" />
</Frame>

属性说明：

• BorderColor：自定义你需要的边框颜色值
• BorderThickness：设置为1即可实现1px边框效果，Xamarin.Forms使用独立设备像素单位，会自动适配不同平台的物理像素密度
• CornerRadius：不需要圆角边框时设置为0即可得到直角效果
• Padding：设置为0避免Frame和ListView之间出现多余的内部留白
• HasShadow：设置为False关闭Frame默认阴影，避免边框视觉效果被干扰

方案2：自定义渲染器实现（无额外布局层级，性能最优） #

如果不想引入额外的Frame布局层级，可以通过自定义渲染器原生为ListView扩展边框属性：

步骤1：共享项目中定义自定义ListView #

using Xamarin.Forms;

namespace YourNamespace
{
    public class BorderedListView : ListView
    {
        public static readonly BindableProperty BorderColorProperty = 
            BindableProperty.Create(nameof(BorderColor), typeof(Color), typeof(BorderedListView), Color.Default);
        
        public static readonly BindableProperty BorderThicknessProperty = 
            BindableProperty.Create(nameof(BorderThickness), typeof(double), typeof(BorderedListView), 0d);

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

        public double BorderThickness
        {
            get => (double)GetValue(BorderThicknessProperty);
            set => SetValue(BorderThicknessProperty, value);
        }
    }
}

步骤2：XAML中调用自定义组件 #

<xmlns:local="clr-namespace:YourNamespace">

<local:BorderedListView 
    BorderColor="#333333" 
    BorderThickness="1"
    ItemsSource="{Binding YourListData}" />

步骤3：Android平台实现渲染器 #

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

[assembly: ExportRenderer(typeof(BorderedListView), typeof(BorderedListViewRenderer))]
namespace YourNamespace.Droid.Renderers
{
    public class BorderedListViewRenderer : ListViewRenderer
    {
        public BorderedListViewRenderer(Context context) : base(context) { }

        protected override void OnElementChanged(ElementChangedEventArgs<ListView> e)
        {
            base.OnElementChanged(e);
            if (e.NewElement is BorderedListView borderedList && Control != null)
            {
                var gradientDrawable = new GradientDrawable();
                gradientDrawable.SetStroke((int)Context.ToPixels(borderedList.BorderThickness), borderedList.BorderColor.ToAndroid());
                Control.SetBackground(gradientDrawable);
            }
        }
    }
}

步骤4：iOS平台实现渲染器 #

using CoreAnimation;
using Xamarin.Forms;
using Xamarin.Forms.Platform.iOS;
using YourNamespace;
using YourNamespace.iOS.Renderers;

[assembly: ExportRenderer(typeof(BorderedListView), typeof(BorderedListViewRenderer))]
namespace YourNamespace.iOS.Renderers
{
    public class BorderedListViewRenderer : ListViewRenderer
    {
        protected override void OnElementChanged(ElementChangedEventArgs<ListView> e)
        {
            base.OnElementChanged(e);
            if (e.NewElement is BorderedListView borderedList && Control != null)
            {
                Control.Layer.BorderColor = borderedList.BorderColor.ToCGColor();
                Control.Layer.BorderWidth = borderedList.BorderThickness;
                Control.ClipsToBounds = true;
            }
        }
    }
}

注意：将代码中的YourNamespace替换为你项目对应的实际命名空间即可。

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