Xamarin.Forms能否自定义按钮形状？是否必须使用ImageButton？

不需要依赖图片按钮，以下几种方案均支持自适应缩放，完美适配不同设备尺寸：

方案1：自定义ContentView + SkiaSharp绘制矢量形状 #

利用SkiaSharp（Xamarin官方2D绘图库）绘制任意自定义形状，完全支持矢量缩放，同时保留按钮的文本适配能力。

实现步骤 #

1. 安装NuGet包 SkiaSharp.Views.Forms
2. 创建自定义ContentView，通过SkiaSharp绘制目标形状，添加手势识别模拟点击事件，内部嵌入Label显示文本

示例代码 #

XAML（自定义控件）

<ContentView xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:skia="clr-namespace:SkiaSharp.Views.Forms;assembly=SkiaSharp.Views.Forms"
             x:Class="YourApp.Controls.CustomShapeButton">
    <Grid>
        <skia:SKCanvasView x:Name="ShapeCanvas" />
        <Label x:Name="BtnLabel" 
               HorizontalOptions="Center" 
               VerticalOptions="Center" 
               TextColor="White" />
    </Grid>
</ContentView>

代码后端

using SkiaSharp;
using SkiaSharp.Views.Forms;
using Xamarin.Forms;

namespace YourApp.Controls
{
    public partial class CustomShapeButton : ContentView
    {
        public static readonly BindableProperty TextProperty = 
            BindableProperty.Create(nameof(Text), typeof(string), typeof(CustomShapeButton), string.Empty);

        public static readonly BindableProperty FillColorProperty = 
            BindableProperty.Create(nameof(FillColor), typeof(Color), typeof(CustomShapeButton), Color.Blue);

        public string Text
        {
            get => (string)GetValue(TextProperty);
            set => SetValue(TextProperty, value);
        }

        public Color FillColor
        {
            get => (Color)GetValue(FillColorProperty);
            set => SetValue(FillColorProperty, value);
        }

        public event EventHandler Clicked;

        public CustomShapeButton()
        {
            InitializeComponent();
            ShapeCanvas.PaintSurface += DrawCustomShape;
            BtnLabel.SetBinding(Label.TextProperty, new Binding(nameof(Text), source: this));
            
            var tap = new TapGestureRecognizer();
            tap.Tapped += (s, e) => Clicked?.Invoke(this, EventArgs.Empty);
            GestureRecognizers.Add(tap);
        }

        private void DrawCustomShape(object sender, SKPaintSurfaceEventArgs e)
        {
            var canvas = e.Surface.Canvas;
            canvas.Clear();

            var size = e.Info;
            var fillPaint = new SKPaint
            {
                Style = SKPaintStyle.Fill,
                Color = FillColor.ToSKColor()
            };

            // 示例：绘制梯形形状（可替换为任意自定义路径）
            var path = new SKPath();
            path.MoveTo(size.Width * 0.2f, 0);
            path.LineTo(size.Width * 0.8f, 0);
            path.LineTo(size.Width, size.Height);
            path.LineTo(0, size.Height);
            path.Close();

            canvas.DrawPath(path, fillPaint);

            // 可选：添加边框
            var strokePaint = new SKPaint
            {
                Style = SKPaintStyle.Stroke,
                Color = FillColor.MultiplyAlpha(0.8).ToSKColor(),
                StrokeWidth = 2
            };
            canvas.DrawPath(path, strokePaint);
        }
    }
}

页面中使用

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:controls="clr-namespace:YourApp.Controls"
             x:Class="YourApp.MainPage">
    <StackLayout Padding="20" VerticalOptions="Center">
        <controls:CustomShapeButton 
            Text="特殊按钮" 
            FillColor="#2196F3"
            Clicked="CustomShapeButton_Clicked"
            WidthRequest="250" 
            HeightRequest="100" />
    </StackLayout>
</ContentPage>

方案2：自定义渲染器实现原生特殊形状按钮 #

如果需要原生按钮的完整交互特性（如触摸反馈、焦点状态），可通过自定义渲染器针对Android/iOS分别实现形状裁剪。

Android平台渲染器 #

using Android.Content;
using Android.Graphics;
using Android.Views;
using YourApp.Controls;
using YourApp.Droid.Renderers;
using Xamarin.Forms;
using Xamarin.Forms.Platform.Android;

[assembly: ExportRenderer(typeof(CustomShapeButton), typeof(CustomShapeButtonRenderer))]
namespace YourApp.Droid.Renderers
{
    public class CustomShapeButtonRenderer : ButtonRenderer
    {
        public CustomShapeButtonRenderer(Context context) : base(context) { }

        protected override void OnElementChanged(ElementChangedEventArgs<Button> e)
        {
            base.OnElementChanged(e);
            if (Control == null) return;

            Control.OutlineProvider = new CustomOutlineProvider();
            Control.ClipToOutline = true;
        }

        private class CustomOutlineProvider : ViewOutlineProvider
        {
            public override void GetOutline(View view, Outline outline)
            {
                var path = new Path();
                var width = view.Width;
                var height = view.Height;
                
                // 绘制自定义形状路径
                path.MoveTo(width * 0.2f, 0);
                path.LineTo(width * 0.8f, 0);
                path.LineTo(width, height);
                path.LineTo(0, height);
                path.Close();
                
                outline.SetConvexPath(path);
            }
        }
    }
}

iOS平台渲染器 #

using CoreAnimation;
using CoreGraphics;
using YourApp.Controls;
using YourApp.iOS.Renderers;
using Xamarin.Forms;
using Xamarin.Forms.Platform.iOS;

[assembly: ExportRenderer(typeof(CustomShapeButton), typeof(CustomShapeButtonRenderer))]
namespace YourApp.iOS.Renderers
{
    public class CustomShapeButtonRenderer : ButtonRenderer
    {
        protected override void OnElementChanged(ElementChangedEventArgs<Button> e)
        {
            base.OnElementChanged(e);
            if (Control == null) return;

            var shapeLayer = new CAShapeLayer();
            var bounds = Control.Bounds;
            
            // 绘制自定义形状路径
            var path = new CGPath();
            path.MoveToPoint(bounds.Width * 0.2f, 0);
            path.AddLineToPoint(bounds.Width * 0.8f, 0);
            path.AddLineToPoint(bounds.Width, bounds.Height);
            path.AddLineToPoint(0, bounds.Height);
            path.CloseSubpath();
            
            shapeLayer.Path = path;
            Control.Layer.Mask = shapeLayer;
        }
    }
}

关键提示 #

• 所有形状路径的坐标都基于控件实际尺寸动态计算，确保自适应不同设备屏幕
• 如需支持按钮状态切换（按下、禁用），可在绘制逻辑或渲染器中根据控件状态调整颜色、样式

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