.NET MAUI MVVM中自定义方形CheckBox控件实现求助

方案一：封装ContentView实现完整功能 #

这种方式无需复杂的自定义渲染，快速实现核心交互，适合基础开发场景：

1. 实现布尔值转颜色转换器 #

先确保你有BoolToColorConverter，若未创建，添加以下类：

public class BoolToColorConverter : IValueConverter
{
    public Color TrueColor { get; set; } = Colors.Black;
    public Color FalseColor { get; set; } = Colors.Transparent;

    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {
        return (bool)value ? TrueColor : FalseColor;
    }

    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
    {
        throw new NotImplementedException();
    }
}

2. 创建自定义SquareCheckBox控件 #

新建ContentView类SquareCheckBox，XAML代码如下：

<?xml version="1.0" encoding="utf-8" ?>
<ContentView xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="BlaNamespace.SquareCheckBox"
             x:Name="thisCheckBox">
    <ContentView.Resources>
        <local:BoolToColorConverter x:Key="BoolToColorConverter" TrueColor="Black" FalseColor="Transparent"/>
    </ContentView.Resources>
    <BoxView WidthRequest="20" 
             HeightRequest="20" 
             BorderColor="Black" 
             BorderThickness="1"
             BackgroundColor="{Binding Source={x:Reference thisCheckBox}, Path=IsChecked, Converter={StaticResource BoolToColorConverter}}">
        <BoxView.GestureRecognizers>
            <TapGestureRecognizer Tapped="TapGestureRecognizer_Tapped"/>
        </BoxView.GestureRecognizers>
    </BoxView>
</ContentView>

对应的后台代码：

public partial class SquareCheckBox : ContentView
{
    public static readonly BindableProperty IsCheckedProperty =
        BindableProperty.Create(nameof(IsChecked), typeof(bool), typeof(SquareCheckBox), false);

    public bool IsChecked
    {
        get => (bool)GetValue(IsCheckedProperty);
        set => SetValue(IsCheckedProperty, value);
    }

    public SquareCheckBox()
    {
        InitializeComponent();
    }

    private void TapGestureRecognizer_Tapped(object sender, TappedEventArgs e)
    {
        IsChecked = !IsChecked;
    }
}

3. 页面中使用 #

现在这个控件自带点击切换功能，支持双向绑定：

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:BlaNamespace"
             x:Class="BlaNamespace.YourPage"> 

    <StackLayout>
        <local:SquareCheckBox x:Name="MyCheckBox" />
        <Label Text="已选中" IsVisible="{Binding Source={x:Reference MyCheckBox}, Path=IsChecked}"/>
    </StackLayout>
</ContentPage>

方案二：平台自定义渲染（贴近原生体验） #

如果需要适配系统样式、支持无障碍功能，可使用自定义渲染器：

Android平台 #

在Platforms/Android目录下创建渲染器：

[assembly: ExportRenderer(typeof(SquareCheckBox), typeof(SquareCheckBoxRenderer))]
namespace BlaNamespace.Platforms.Android
{
    public class SquareCheckBoxRenderer : ViewRenderer<SquareCheckBox, Android.Widget.CheckBox>
    {
        protected override void OnElementChanged(ElementChangedEventArgs<SquareCheckBox> e)
        {
            base.OnElementChanged(e);
            if (Control == null)
            {
                var checkBox = new Android.Widget.CheckBox(Context);
                // Android默认是方形，若需自定义样式可替换Drawable
                checkBox.ButtonDrawable = Context.GetDrawable(Resource.Drawable.custom_checkbox);
                SetNativeControl(checkBox);
            }
            if (e.NewElement != null)
            {
                Control.Checked = Element.IsChecked;
                Control.CheckedChange += Control_CheckedChange;
            }
        }

        private void Control_CheckedChange(object sender, Android.Widget.CompoundButton.CheckedChangeEventArgs e)
        {
            Element.IsChecked = e.IsChecked;
        }

        protected override void Dispose(bool disposing)
        {
            if (disposing)
            {
                Control.CheckedChange -= Control_CheckedChange;
            }
            base.Dispose(disposing);
        }
    }
}

iOS平台 #

在Platforms/iOS目录下创建渲染器：

[assembly: ExportRenderer(typeof(SquareCheckBox), typeof(SquareCheckBoxRenderer))]
namespace BlaNamespace.Platforms.iOS
{
    public class SquareCheckBoxRenderer : ViewRenderer<SquareCheckBox, UIKit.UISwitch>
    {
        protected override void OnElementChanged(ElementChangedEventArgs<SquareCheckBox> e)
        {
            base.OnElementChanged(e);
            if (Control == null)
            {
                var checkBox = new UIKit.UISwitch();
                // 替换为自定义方形选中/未选中图片
                checkBox.OnImage = UIImage.FromFile("checked_box.png");
                checkBox.OffImage = UIImage.FromFile("unchecked_box.png");
                SetNativeControl(checkBox);
            }
            if (e.NewElement != null)
            {
                Control.On = Element.IsChecked;
                Control.ValueChanged += Control_ValueChanged;
            }
        }

        private void Control_ValueChanged(object sender, EventArgs e)
        {
            Element.IsChecked = Control.On;
        }

        protected override void Dispose(bool disposing)
        {
            if (disposing)
            {
                Control.ValueChanged -= Control_ValueChanged;
            }
            base.Dispose(disposing);
        }
    }
}

注：iOS需准备两张方形图片（选中/未选中状态）替换默认样式。

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