如何设置UWP中ToggleButton的选中与未选中状态背景色为白色

要让ToggleButton在选中和未选中状态下背景色都为白色，直接设置Background属性无法覆盖控件内置的状态样式，需要自定义控件模板来修改各状态的背景值。以下是完整的实现代码：

<StackPanel Height="200">
    <ToggleButton Width="100" Height="100" Checked="ToggleButton_Checked">
        <ToggleButton.Style>
            <Style TargetType="ToggleButton">
                <!-- 默认背景设为白色 -->
                <Setter Property="Background" Value="White"/>
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="ToggleButton">
                            <Grid x:Name="RootGrid" Background="{TemplateBinding Background}">
                                <VisualStateManager.VisualStateGroups>
                                    <!-- 通用交互状态：悬停、按下时也保持白色 -->
                                    <VisualStateGroup x:Name="CommonStates">
                                        <VisualState x:Name="Normal"/>
                                        <VisualState x:Name="PointerOver">
                                            <Storyboard>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="RootGrid" Storyboard.TargetProperty="Background">
                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="White"/>
                                                </ObjectAnimationUsingKeyFrames>
                                            </Storyboard>
                                        </VisualState>
                                        <VisualState x:Name="Pressed">
                                            <Storyboard>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="RootGrid" Storyboard.TargetProperty="Background">
                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="White"/>
                                                </ObjectAnimationUsingKeyFrames>
                                            </Storyboard>
                                        </VisualState>
                                        <VisualState x:Name="Disabled">
                                            <Storyboard>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="RootGrid" Storyboard.TargetProperty="Background">
                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="#FFE6E6E6"/>
                                                </ObjectAnimationUsingKeyFrames>
                                            </Storyboard>
                                        </VisualState>
                                    </VisualStateGroup>
                                    <!-- 选中状态：强制设为白色 -->
                                    <VisualStateGroup x:Name="CheckStates">
                                        <VisualState x:Name="Checked">
                                            <Storyboard>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="RootGrid" Storyboard.TargetProperty="Background">
                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="White"/>
                                                </ObjectAnimationUsingKeyFrames>
                                            </Storyboard>
                                        </VisualState>
                                        <VisualState x:Name="Unchecked"/>
                                        <VisualState x:Name="Indeterminate"/>
                                    </VisualStateGroup>
                                </VisualStateManager.VisualStateGroups>
                                <!-- 保留内容展示容器 -->
                                <ContentPresenter x:Name="ContentPresenter"
                                              Content="{TemplateBinding Content}"
                                              ContentTemplate="{TemplateBinding ContentTemplate}"
                                              HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                              VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                                              Margin="{TemplateBinding Padding}"/>
                            </Grid>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
        </ToggleButton.Style>
    </ToggleButton>
</StackPanel>

说明 #

• 模板中通过VisualStateManager定义了控件各个状态的样式，确保选中、未选中、鼠标悬停、按下状态下背景均为白色；
• 若不需要禁用状态保持灰色，可将Disabled状态的Value改为White；
• ContentPresenter用于展示ToggleButton的内容，保留原有的布局对齐逻辑。

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