.NET MAUI Windows ToggleSwitch禁用/悬停OFF状态显示白色背景问题

问题描述 #

在Windows（WinUI）平台使用.NET MAUI开发时，默认Switch控件对应WinUI的ToggleSwitch，设置不同状态样式遇到以下异常：

• 禁用且未开启状态（<Switch IsToggled="False" IsEnabled="False" />）：预期浅灰色背景，实际显示白色/褪色背景；
• 启用且未开启状态鼠标悬停（<Switch IsToggled="False" IsEnabled="True" />）：预期稍深灰色背景，实际显示白色背景。

尝试通过自定义SwitchHandler修改资源色值未成功，代码如下：

public class CustomSwitchHandler : SwitchHandler
{
    protected override void ConnectHandler(ToggleSwitch platformView)
    {
        base.ConnectHandler(platformView);

        platformView.Resources["ToggleSwitchFillOff"] =
            new SolidColorBrush(Colors.Gray);

        platformView.Resources["ToggleSwitchFillOffPointerOver"] =
            new SolidColorBrush(Colors.DarkGray);

        platformView.Resources["ToggleSwitchFillOffDisabled"] =
            new SolidColorBrush(Colors.LightGray);
    }
}

需要明确两个问题：

1. 为何ToggleSwitch在IsEnabled = false且IsToggled = false、IsToggled = false鼠标悬停时显示白色背景？
2. 如何实现以下效果：
   • 未开启（启用）→ 灰色背景
   • 未开启（悬停）→ 深灰色背景（无白色）
   • 未开启（禁用）→ 浅灰色背景（无白色/褪色）

原因分析 #

直接在SwitchHandler的ConnectHandler方法中修改platformView.Resources无法生效，原因在于：

• WinUI的ToggleSwitch默认样式使用的是应用级或系统级资源，而非控件级资源，直接修改控件的Resources字典无法覆盖默认的系统资源引用；
• 禁用状态的样式会叠加系统默认的透明度滤镜，导致设置的颜色被淡化，呈现出白色/褪色效果。

解决方法 #

方法1：全局替换WinUI资源（推荐） #

在WinUI项目的App.xaml中全局覆盖ToggleSwitch的相关资源，所有Switch控件都会自动应用该样式：

<Application.Resources>
    <ResourceDictionary>
        <!-- 未开启（启用）状态背景色 -->
        <SolidColorBrush x:Key="ToggleSwitchFillOff" Color="Gray"/>
        <!-- 未开启（悬停）状态背景色 -->
        <SolidColorBrush x:Key="ToggleSwitchFillOffPointerOver" Color="DarkGray"/>
        <!-- 未开启（禁用）状态背景色 -->
        <SolidColorBrush x:Key="ToggleSwitchFillOffDisabled" Color="LightGray"/>
        <!-- 取消禁用状态的透明度滤镜，避免颜色淡化 -->
        <x:Double x:Key="ToggleSwitchFillOffDisabledOpacity">1.0</x:Double>
    </ResourceDictionary>
</Application.Resources>

方法2：自定义ToggleSwitch样式并通过Handler绑定 #

如果需要针对单个Switch控件生效，可以自定义完整的ToggleSwitch样式，再通过Handler绑定：

1. 在WinUI项目中创建自定义样式文件（如CustomToggleSwitchStyle.xaml），复制ToggleSwitch的默认模板，修改对应状态的填充色和透明度：

<Style x:Key="CustomToggleSwitchStyle" TargetType="ToggleSwitch">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="ToggleSwitch">
                <Grid>
                    <VisualStateManager.VisualStateGroups>
                        <VisualStateGroup x:Name="CommonStates">
                            <VisualState x:Name="Normal"/>
                            <VisualState x:Name="PointerOver">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="SwitchTrack" Storyboard.TargetProperty="Fill">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ToggleSwitchFillOffPointerOver}"/>
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="Disabled">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="SwitchTrack" Storyboard.TargetProperty="Fill">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ToggleSwitchFillOffDisabled}"/>
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="SwitchTrack" Storyboard.TargetProperty="Opacity">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ToggleSwitchFillOffDisabledOpacity}"/>
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
                        </VisualStateGroup>
                        <!-- 保留其他默认VisualStateGroup结构 -->
                    </VisualStateManager.VisualStateGroups>
                    <!-- 保留模板其余默认布局元素 -->
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

2. 在自定义Handler中为控件应用样式并设置资源：

public class CustomSwitchHandler : SwitchHandler
{
    protected override void ConnectHandler(ToggleSwitch platformView)
    {
        base.ConnectHandler(platformView);
        
        // 应用自定义样式
        if (Application.Current.Resources.TryGetValue("CustomToggleSwitchStyle", out var style))
        {
            platformView.Style = style as Style;
        }
        
        // 设置对应资源值
        Application.Current.Resources["ToggleSwitchFillOff"] = new SolidColorBrush(Colors.Gray);
        Application.Current.Resources["ToggleSwitchFillOffPointerOver"] = new SolidColorBrush(Colors.DarkGray);
        Application.Current.Resources["ToggleSwitchFillOffDisabled"] = new SolidColorBrush(Colors.LightGray);
        Application.Current.Resources["ToggleSwitchFillOffDisabledOpacity"] = 1.0;
    }
}

方法3：使用.NET MAUI原生Style #

在MAUI的App.xaml中定义Switch的样式，通过VisualState直接设置状态属性，无需直接操作WinUI控件：

<Style TargetType="Switch">
    <Setter Property="VisualStateManager.VisualStateGroups">
        <VisualStateGroupList>
            <VisualStateGroup x:Name="CommonStates">
                <VisualState x:Name="Normal">
                    <VisualState.Setters>
                        <Setter Property="BackgroundColor" Value="Gray"/>
                    </VisualState.Setters>
                </VisualState>
                <VisualState x:Name="PointerOver">
                    <VisualState.Setters>
                        <Setter Property="BackgroundColor" Value="DarkGray"/>
                    </VisualState.Setters>
                </VisualState>
                <VisualState x:Name="Disabled">
                    <VisualState.Setters>
                        <Setter Property="BackgroundColor" Value="LightGray"/>
                        <Setter Property="Opacity" Value="1"/>
                    </VisualState.Setters>
                </VisualState>
            </VisualStateGroup>
        </VisualStateGroupList>
    </Setter>
</Style>

注：部分MAUI版本可能需要补充属性映射，确保BackgroundColor能正确映射到WinUI ToggleSwitch的填充色。

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