.Net Maui Switch 视觉状态管理器不会将 OnColor 更改为 Off 状态

Question

只需在 Android 上实现一个切换到具有黑色背景的显示屏。

添加了一个开关，设法为打开状态设置 OnColor 和 ThumbColor，为关闭状态设置 Thumbcolor，但无论我如何修补，我都无法使用视觉状态管理器设置关闭状态的 Oncolor（希望这是有意义的）。

如下图所示，打开状态为绿色，关闭状态没有显示任何内容，它融入黑色背景。我想将其设置为灰色。

我的开关

<Switch IsToggled="True" Style="{StaticResource ToggleSwitch}">

在 My Styles.xaml 中，我添加了自定义样式。

    <Style x:Key ="ToggleSwitch" TargetType="Switch">
        <Setter Property="VisualStateManager.VisualStateGroups">
            <VisualStateGroupList>
                <VisualStateGroup x:Name="CommonStates">
                    <VisualState x:Name="On">
                        <VisualState.Setters>
                            <Setter Property="OnColor"
                            Value="Green" />
                        </VisualState.Setters>
                    </VisualState>
                    <VisualState x:Name="Off">
                        <VisualState.Setters>
                            <Setter Property="OnColor"
                            Value="Gray" />
                        </VisualState.Setters>
                    </VisualState>
                </VisualStateGroup>
            </VisualStateGroupList>
        </Setter>
    </Style>

我看到其他答案建议更改背景和背景颜色，这不是答案，因为背景必须是黑色。无论我尝试什么，我都无法改变关闭状态的颜色。

任何建议/指示一如既往。

参考： .NET MAUI：更改开关颜色 <-- This answer is no good at all.

https://learn.microsoft.com/en-us/dotnet/maui/user-interface/controls/switch#switch-visual-states

https://learn.microsoft.com/en-us/dotnet/maui/user-interface/visual-states

考虑以此速度使用定制解决方案：- https://github.com/IeuanWalker/Maui.Switch

但更愿意使用原生或尽可能接近原生。

提前致谢。

Answer 1

无论我尝试什么，我都无法更改关闭状态颜色。

这是因为 Switch 本身只有

OnColor

属性，只能在开关处于

On

位置时获取或设置开关的颜色。所以如果有一个 BindableProperty

OffColor

来设置 Switch 就完美了。

但是，您可以提出功能请求：https://github.com/dotnet/maui/issues/new/choose 添加 BindableProperty

OffColor

为 Switch 设置。

作为替代解决方法，您可以使用您提到的自定义解决方案：https://github.com/IeuanWalker/Maui.Switch。我检查了示例代码，您可以通过

CustomSwitch_SwitchPanUpdate

方法更改关闭状态颜色：

static void CustomSwitch_SwitchPanUpdate(CustomSwitch customSwitch, SwitchPanUpdatedEventArgs e) 
{
       //Switch Color Animation
        Color fromSwitchColor = e.IsToggled ? Color.FromArgb("#6200ee") : Color.FromArgb("#fafafa");
        Color toSwitchColor = e.IsToggled ? Color.FromArgb("#fafafa") : Color.FromArgb("#6200ee");

        Color fromColor = e.IsToggled ? Color.FromArgb("#00ff00") : Color.FromArgb("#808080");
        Color toColor = e.IsToggled ? Color.FromArgb("#808080") : Color.FromArgb("#00ff00");

        double t = e.Percentage * 0.01;

        customSwitch.KnobBackgroundColor = ColorAnimationUtil.ColorAnimation(fromSwitchColor, toSwitchColor, t);
        customSwitch.BackgroundColor = ColorAnimationUtil.ColorAnimation(fromColor, toColor, t);
}

具有黑色背景的输出：

Answer 2

我们可以通过使用 SwitchHandler 来实现这一点

添加变量来存储 Maui Switch 的 On 和 Thumb 颜色

private Color? _onColor;
private Color? _thumbColor;

替换映射

Mapper.ReplaceMapping<Switch, ISwitchHandler>("TrackColor", SwitchColorMapper);

映射器的实现

private void SwitchColorMapper(ISwitchHandler handler, Switch view)
{
    MapTrackColor(handler, view);

    var platformView = handler.PlatformView;
    _onColor = view.OnColor;
    _thumbColor = view.ThumbColor;

    platformView.CheckedChange -= OnCheckedChange;
    platformView.CheckedChange += OnCheckedChange;

    if (platformView is null || view.IsEnabled is false)
    {
        return;
    }

    SetColors(ref platformView);
}

private void SetColors(ref SwitchCompat switchCompat)
{
    if (_onColor == null || _thumbColor == null || switchCompat.Enabled is false)
    {
        return;
    }
    if (BlendModeCompat.SrcAtop != null)
    {
        if (switchCompat.Checked)
        {
            var thumbColorFilter = BlendModeColorFilterCompat.CreateBlendModeColorFilterCompat(_onColor.ToAndroid(), BlendModeCompat.SrcAtop);
            if (thumbColorFilter is not null && switchCompat.ThumbDrawable is not null)
            {
                switchCompat.ThumbDrawable.SetColorFilter(thumbColorFilter);
            }
            var trackColorFilter = BlendModeColorFilterCompat.CreateBlendModeColorFilterCompat(_thumbColor.ToAndroid(), BlendModeCompat.SrcAtop);
            if (trackColorFilter is not null && switchCompat.TrackDrawable is not null)
            {
                switchCompat.TrackDrawable.SetColorFilter(trackColorFilter);
            }
        }
        else
        {
            var offColor = _onColor.MultiplyAlpha(0.75f);//Use any
            var disabledColor = Colors.Grey;

            var thumbColorFilter = BlendModeColorFilterCompat.CreateBlendModeColorFilterCompat(appSecondaryColor.ToAndroid(), BlendModeCompat.SrcAtop);
            if (thumbColorFilter is not null && switchCompat.ThumbDrawable is not null)
            {
                switchCompat.ThumbDrawable.SetColorFilter(thumbColorFilter);
            }
            var trackColorFilter = BlendModeColorFilterCompat.CreateBlendModeColorFilterCompat(disabledColor.ToAndroid(), BlendModeCompat.SrcAtop);
            if (trackColorFilter != null)
            {
                switchCompat.TrackDrawable?.SetColorFilter(trackColorFilter);
            }
        }
    }
}

private void OnCheckedChange(object? sender, CompoundButton.CheckedChangeEventArgs e)
{
    if (sender is SwitchCompat switchCompat && _onColor != null && _thumbColor != null)
    {
        SetColors(ref switchCompat);
    }
}