Xamarin Forms SkiaSharp绑定：SKPaint颜色属性绑定方案求助

嘿，这个问题我之前做项目时也遇到过——SkiaSharp确实没给SKPaint的属性做内置绑定支持，但咱们自己动手就能搞定，给你两种实用的方案，你可以根据项目情况选：

方案一：自定义带可绑定属性的SkiaSharp控件 #

这个方案适合把绑定逻辑封装成可复用的控件，以后在多个页面都能直接用。

实现步骤 #

1. 创建继承自SKCanvasView的自定义控件，添加BindableProperty用于颜色绑定
2. 在OnPaintSurface方法中，用绑定的颜色值初始化SKPaint
3. 当颜色属性变化时，触发画布重绘

代码示例 #

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

public class BindableSkiaView : SKCanvasView
{
    // 定义可绑定的PaintColor属性
    public static readonly BindableProperty PaintColorProperty =
        BindableProperty.Create(
            nameof(PaintColor),
            typeof(Color),
            typeof(BindableSkiaView),
            Color.Black, // 默认黑色
            propertyChanged: OnPaintColorChanged);

    public Color PaintColor
    {
        get => (Color)GetValue(PaintColorProperty);
        set => SetValue(PaintColorProperty, value);
    }

    // 颜色变化时触发重绘
    private static void OnPaintColorChanged(BindableObject bindable, object oldValue, object newValue)
    {
        if (bindable is BindableSkiaView view)
        {
            view.InvalidateSurface();
        }
    }

    protected override void OnPaintSurface(SKPaintSurfaceEventArgs args)
    {
        base.OnPaintSurface(args);
        var canvas = args.Surface.Canvas;
        canvas.Clear();

        // 使用绑定的颜色创建SKPaint
        using var paint = new SKPaint
        {
            Color = PaintColor.ToSKColor(),
            StrokeWidth = 6,
            Style = SKPaintStyle.Fill
        };

        // 示例：画一个居中的矩形
        var rect = new SKRect(50, 50, args.Info.Width - 50, args.Info.Height - 50);
        canvas.DrawRoundRect(rect, 10, 10, paint);
    }
}

在XAML中使用 #

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:YourProjectNamespace"
             x:Class="YourProjectNamespace.MainPage">
    <StackLayout Padding="20">
        <!-- 绑定到ViewModel的自定义颜色属性 -->
        <local:BindableSkiaView PaintColor="{Binding BoxColor}" HeightRequest="300" />
        <Button Text="切换颜色" Command="{Binding SwitchColorCommand}" Margin="0,20" />
    </StackLayout>
</ContentPage>

方案二：MVVM模式下直接绑定+手动触发重绘 #

如果你的项目已经用了MVVM架构，这个方案更直接，不需要自定义控件，直接在页面的PaintSurface事件里处理。

实现步骤 #

1. ViewModel中定义带INotifyPropertyChanged的Color属性
2. 在页面的SKCanvasView.PaintSurface事件中，读取ViewModel的颜色值设置SKPaint
3. 当ViewModel的颜色变化时，调用InvalidateSurface()触发画布刷新

ViewModel示例 #

using System.ComponentModel;
using System.Runtime.CompilerServices;
using Xamarin.Forms;

public class MainViewModel : INotifyPropertyChanged
{
    private Color _boxColor = Color.Green;
    public Color BoxColor
    {
        get => _boxColor;
        set
        {
            _boxColor = value;
            OnPropertyChanged();
        }
    }

    public Command SwitchColorCommand { get; }

    public MainViewModel()
    {
        SwitchColorCommand = new Command(() =>
        {
            BoxColor = BoxColor == Color.Green ? Color.Purple : Color.Green;
        });
    }

    public event PropertyChangedEventHandler PropertyChanged;
    protected void OnPropertyChanged([CallerMemberName] string propertyName = null)
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }
}

页面后台代码 #

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

public partial class MainPage : ContentPage
{
    private MainViewModel _viewModel;

    public MainPage()
    {
        InitializeComponent();
        _viewModel = new MainViewModel();
        BindingContext = _viewModel;

        // 订阅ViewModel的属性变化事件，颜色改变时重绘
        _viewModel.PropertyChanged += ViewModel_PropertyChanged;
    }

    private void ViewModel_PropertyChanged(object sender, PropertyChangedEventArgs e)
    {
        if (e.PropertyName == nameof(MainViewModel.BoxColor))
        {
            skiaCanvas.InvalidateSurface();
        }
    }

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

        using var paint = new SKPaint
        {
            Color = _viewModel.BoxColor.ToSKColor(),
            StrokeWidth = 4,
            Style = SKPaintStyle.Stroke
        };

        var center = new SKPoint(e.Info.Width / 2, e.Info.Height / 2);
        canvas.DrawCircle(center, 120, paint);
    }
}

XAML中的SKCanvasView #

<SKCanvasView x:Name="skiaCanvas" PaintSurface="SkiaCanvas_PaintSurface" HeightRequest="300" />

关键注意事项 #

• 颜色转换：Xamarin.Forms的Color和SkiaSharp的SKColor可以通过Color.ToSKColor()方法互相转换，别忘加这一步！
• 强制重绘：不管用哪种方案，当绑定的颜色值变化时，一定要调用InvalidateSurface()，否则SkiaSharp不会自动刷新画布
• 资源释放：使用SKPaint这类SkiaSharp对象时，尽量用using语句包裹，避免内存泄漏

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