如何在Xamarin.Forms Custom Renderer中逐像素绘制或绘制消息气泡？

当然可以！Custom Renderer就是为这种需求而生的——它能让你突破Xamarin.Forms原生控件的局限，直接针对Android和iOS平台进行底层的图形绘制，完全实现逐像素级的控制，或者像你需要的消息气泡这种自定义形状，简直是手到擒来。

下面我就给你一步步拆解实现方式：

第一步：在共享项目中定义自定义控件 #

先做一个基础的自定义Frame，作为我们气泡的"容器"，还可以添加一些可配置的属性（比如箭头位置），方便后续在XAML里灵活调整：

public class BubbleFrame : Frame
{
    // 定义箭头位置的绑定属性，支持在XAML中设置
    public static readonly BindableProperty ArrowPositionProperty =
        BindableProperty.Create(nameof(ArrowPosition), typeof(ArrowPosition), typeof(BubbleFrame), ArrowPosition.BottomRight);

    public ArrowPosition ArrowPosition
    {
        get => (ArrowPosition)GetValue(ArrowPositionProperty);
        set => SetValue(ArrowPositionProperty, value);
    }
}

// 枚举箭头的可选位置
public enum ArrowPosition
{
    BottomRight, BottomLeft, TopRight, TopLeft
}

第二步：Android平台的Custom Renderer实现 #

在Android项目里，我们直接通过Canvas和Path来绘制自定义形状：

[assembly: ExportRenderer(typeof(BubbleFrame), typeof(BubbleFrameRenderer))]
namespace YourAppName.Droid.Renderers
{
    public class BubbleFrameRenderer : FrameRenderer
    {
        private Paint _paint;

        protected override void OnElementChanged(ElementChangedEventArgs<Frame> e)
        {
            base.OnElementChanged(e);
            if (e.NewElement != null)
            {
                _paint = new Paint();
                _paint.AntiAlias = true; // 开启抗锯齿，让边缘更平滑
                SetWillNotDraw(false); // 告诉系统我们要自己绘制内容
            }
        }

        protected override void OnDraw(Canvas canvas)
        {
            var bubbleFrame = Element as BubbleFrame;
            if (bubbleFrame == null) return;

            var width = Width;
            var height = Height;
            var cornerRadius = (float)bubbleFrame.CornerRadius;
            var arrowSize = 20f; // 箭头的大小，你可以改成可配置属性

            // 创建Path来描述气泡的形状
            var path = new Path();

            // 根据箭头位置构建不同的形状
            switch (bubbleFrame.ArrowPosition)
            {
                case ArrowPosition.BottomRight:
                    // 先画带圆角的主体矩形
                    path.AddRoundRect(new RectF(0, 0, width - arrowSize, height - arrowSize), cornerRadius, cornerRadius, Path.Direction.Cw);
                    // 添加上右下角的箭头
                    path.LineTo(width, height - arrowSize);
                    path.LineTo(width - arrowSize, height);
                    path.Close();
                    break;
                case ArrowPosition.BottomLeft:
                    path.AddRoundRect(new RectF(arrowSize, 0, width, height - arrowSize), cornerRadius, cornerRadius, Path.Direction.Cw);
                    path.LineTo(0, height - arrowSize);
                    path.LineTo(arrowSize, height);
                    path.Close();
                    break;
                // 其他箭头位置的逻辑可以照着这个思路补充
            }

            // 绘制气泡填充色
            _paint.Color = bubbleFrame.BackgroundColor.ToAndroid();
            canvas.DrawPath(path, _paint);

            // 如果需要边框，再绘制边框
            if (bubbleFrame.BorderWidth > 0)
            {
                _paint.SetStyle(Paint.Style.Stroke);
                _paint.StrokeWidth = (float)bubbleFrame.BorderWidth;
                _paint.Color = bubbleFrame.BorderColor.ToAndroid();
                canvas.DrawPath(path, _paint);
                _paint.SetStyle(Paint.Style.Fill); // 恢复填充模式
            }
        }
    }
}

第三步：iOS平台的Custom Renderer实现 #

iOS这边用UIBezierPath来构建形状，逻辑和Android类似：

[assembly: ExportRenderer(typeof(BubbleFrame), typeof(BubbleFrameRenderer))]
namespace YourAppName.iOS.Renderers
{
    public class BubbleFrameRenderer : FrameRenderer
    {
        protected override void OnElementChanged(ElementChangedEventArgs<Frame> e)
        {
            base.OnElementChanged(e);
            if (e.NewElement != null)
            {
                Layer.MasksToBounds = false;
                Layer.BackgroundColor = UIColor.Clear.CGColor; // 关闭原生背景，我们自己画
            }
        }

        public override void Draw(CGRect rect)
        {
            var bubbleFrame = Element as BubbleFrame;
            if (bubbleFrame == null) return;

            var cornerRadius = (nfloat)bubbleFrame.CornerRadius;
            var arrowSize = 20f;
            var path = UIBezierPath.Create();

            switch (bubbleFrame.ArrowPosition)
            {
                case ArrowPosition.BottomRight:
                    // 逐步绘制带圆角的主体
                    path.MoveTo(cornerRadius, 0);
                    path.AddLineTo(rect.Width - arrowSize - cornerRadius, 0);
                    path.AddArc(new CGPoint(rect.Width - arrowSize - cornerRadius, cornerRadius), cornerRadius, (nfloat)Math.PI * 1.5f, 0, true);
                    path.AddLineTo(rect.Width - arrowSize, rect.Height - arrowSize - cornerRadius);
                    path.AddArc(new CGPoint(rect.Width - arrowSize - cornerRadius, rect.Height - arrowSize - cornerRadius), cornerRadius, 0, (nfloat)Math.PI * 0.5f, true);
                    path.AddLineTo(cornerRadius, rect.Height - arrowSize);
                    path.AddArc(new CGPoint(cornerRadius, rect.Height - arrowSize - cornerRadius), cornerRadius, (nfloat)Math.PI * 0.5f, (nfloat)Math.PI, true);
                    path.AddLineTo(0, cornerRadius);
                    path.AddArc(new CGPoint(cornerRadius, cornerRadius), cornerRadius, (nfloat)Math.PI, (nfloat)Math.PI * 1.5f, true);
                    // 添加右下角箭头
                    path.AddLineTo(rect.Width - arrowSize, rect.Height - arrowSize);
                    path.AddLineTo(rect.Width, rect.Height - arrowSize);
                    path.AddLineTo(rect.Width - arrowSize, rect.Height);
                    path.ClosePath();
                    break;
                // 其他箭头位置的逻辑同理补充
            }

            // 绘制填充色
            bubbleFrame.BackgroundColor.ToUIColor().SetFill();
            path.Fill();

            // 绘制边框
            if (bubbleFrame.BorderWidth > 0)
            {
                bubbleFrame.BorderColor.ToUIColor().SetStroke();
                path.LineWidth = (nfloat)bubbleFrame.BorderWidth;
                path.Stroke();
            }
        }
    }
}

第四步：在XAML中使用自定义气泡控件 #

现在你就可以像用普通Frame一样使用这个自定义气泡了：

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

    <StackLayout Padding="20">
        <!-- 右下角箭头的气泡 -->
        <local:BubbleFrame ArrowPosition="BottomRight"
                           BackgroundColor="#E5E5EA"
                           CornerRadius="12"
                           BorderWidth="1"
                           BorderColor="#CCCCCC"
                           Padding="15">
            <Label Text="这是一个自定义的消息气泡！" />
        </local:BubbleFrame>

        <!-- 左下角箭头的气泡 -->
        <local:BubbleFrame ArrowPosition="BottomLeft"
                           BackgroundColor="#007AFF"
                           CornerRadius="12"
                           Padding="15"
                           Margin="0,20,0,0">
            <Label Text="我是另一个方向的气泡~" TextColor="White" />
        </local:BubbleFrame>
    </StackLayout>
</ContentPage>

额外小提示 #

• 你可以给BubbleFrame添加更多属性，比如ArrowSize、ShadowColor等，让控件更灵活；
• 如果需要阴影效果，Android可以在OnDraw里添加带阴影的画笔，iOS可以设置Layer.ShadowPath = path.CGPath，这样阴影会完全贴合自定义形状；
• 控件大小变化时，OnDraw（Android）和Draw（iOS）会自动触发重绘，不用担心布局适配问题。

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