如何在MAUI中直接实现ToggleButton组件

MAUI没有内置和WPF完全一致的ToggleButton组件，但可以通过以下几种直接方式实现相同的选中/未选中切换效果：

1. 使用原生Switch控件（基础场景） #

如果仅需要简单的开关切换逻辑，MAUI的Switch控件完全满足需求，它的IsToggled属性对应WPF中ToggleButton的IsChecked，支持数据绑定，还可自定义外观：

<Switch IsToggled="{Binding IsOptionSelected}" 
        OnColor="ForestGreen" 
        ThumbColor="White"
        OffColor="LightGray"/>

2. 自定义ToggleButton控件（完全匹配WPF体验） #

如果需要和WPF中ToggleButton一致的按钮式切换（点击切换状态、自定义内容），可以继承Button实现自定义控件：

步骤1：创建自定义控件类 #

public class ToggleButton : Button
{
    public static readonly BindableProperty IsCheckedProperty =
        BindableProperty.Create(nameof(IsChecked), typeof(bool), typeof(ToggleButton), false,
            propertyChanged: OnIsCheckedChanged);

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

    private static void OnIsCheckedChanged(BindableObject bindable, object oldValue, object newValue)
    {
        var btn = (ToggleButton)bindable;
        // 状态切换时自动更新外观
        btn.BackgroundColor = (bool)newValue ? Colors.DarkSlateBlue : Colors.LightGray;
        btn.TextColor = Colors.White;
    }

    public ToggleButton()
    {
        Clicked += (s, e) => IsChecked = !IsChecked;
    }
}

步骤2：在XAML中引用使用 #

先添加命名空间（假设控件位于YourApp.Controls下）：

xmlns:controls="clr-namespace:YourApp.Controls"

然后直接使用：

<controls:ToggleButton Content="点击切换状态" 
                       IsChecked="{Binding IsButtonChecked}"/>

3. 样式化CheckBox实现按钮效果 #

MAUI的CheckBox可通过样式修改为按钮外观，实现类似ToggleButton的交互：

<CheckBox IsChecked="{Binding IsChecked}">
    <CheckBox.Content>
        <Label Text="按钮式复选框"/>
    </CheckBox.Content>
    <CheckBox.Style>
        <Style TargetType="CheckBox">
            <Setter Property="VisualStateManager.VisualStateGroups">
                <VisualStateGroupList>
                    <VisualStateGroup x:Name="CheckedStates">
                        <VisualState x:Name="Checked">
                            <VisualState.Setters>
                                <Setter Property="BackgroundColor" Value="DarkSlateBlue"/>
                                <Setter Property="TextColor" Value="White"/>
                            </VisualState.Setters>
                        </VisualState>
                        <VisualState x:Name="Unchecked">
                            <VisualState.Setters>
                                <Setter Property="BackgroundColor" Value="LightGray"/>
                                <Setter Property="TextColor" Value="Black"/>
                            </VisualState.Setters>
                        </VisualState>
                    </VisualStateGroup>
                </VisualStateGroupList>
            </Setter>
        </Style>
    </CheckBox.Style>
</CheckBox>

内容的提问来源于stack exchange，提问作者Niranjhna M R