UWP 删除 ToggleButton 鼠标悬停和鼠标按下的背景答案

【问题标题】：UWP Remove ToggleButton mouse over and mouse pressed backgroundUWP 删除 ToggleButton 鼠标悬停和鼠标按下的背景
【发布时间】：2017-09-06 19:04:48
【问题描述】：

UWP：如何删除 ToggleButton 的鼠标悬停和鼠标按下背景？

XAML：

（PS：这适用于Button！）

    <Style TargetType="ToggleButton">
        <Setter Property="Foreground" 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>
                                <VisualState x:Name="PointerOver">
                                </VisualState>
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>
                        <ContentPresenter 
                            x:Name="ContentPresenter"
                            BorderBrush="Transparent"
                            BorderThickness="{TemplateBinding BorderThickness}"
                            Content="{TemplateBinding Content}"
                            ContentTransitions="{TemplateBinding ContentTransitions}"
                            ContentTemplate="{TemplateBinding ContentTemplate}"
                            Padding="{TemplateBinding Padding}"
                            HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
                            VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
                            AutomationProperties.AccessibilityView="Raw"
                            Foreground="White"/>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

结果（注意周围的黑色方块和较暗的背景）：

同一个按钮的另一张图片，但后来被检查了，也许更好地看看它看起来有多可怕。

【问题讨论】：

我强烈建议您尝试使用ToggleButton 的样式来控制其外观，而不是像这样硬编码的图像。

标签： c# xaml uwp

【解决方案1】：

https://msdn.microsoft.com/en-us/library/windows/apps/mt299157.aspx

下面的例子很好用：

        <Style x:Key="NakedToggleButton"  TargetType="ToggleButton">
            <Setter Property="Background" Value="{ThemeResource SystemControlBackgroundBaseLowBrush}" />
            <Setter Property="Foreground" Value="{ThemeResource SystemControlForegroundBaseHighBrush}"/>
            <Setter Property="BorderBrush" Value="{ThemeResource SystemControlForegroundTransparentBrush}" />
            <Setter Property="BorderThickness" Value="{ThemeResource ToggleButtonBorderThemeThickness}" />
            <Setter Property="Padding" Value="8,4,8,4" />
            <Setter Property="HorizontalAlignment" Value="Left" />
            <Setter Property="VerticalAlignment" Value="Center" />
            <Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}" />
            <Setter Property="FontWeight" Value="Normal" />
            <Setter Property="FontSize" Value="{ThemeResource ControlContentThemeFontSize}" />
            <Setter Property="UseSystemFocusVisuals" Value="True" />
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="ToggleButton">
                        <Grid x:Name="RootGrid" Background="Transparent">
                            <VisualStateManager.VisualStateGroups>
                                <VisualStateGroup x:Name="CommonStates">
                                    <VisualState x:Name="PointerOver">
                                    </VisualState>
                                    <VisualState x:Name="Pressed">
                                    </VisualState>
                                    <VisualState x:Name="Disabled">
                                    </VisualState>
                                    <VisualState x:Name="Checked">
                                    </VisualState>
                                    <VisualState x:Name="CheckedPointerOver">
                                    </VisualState>
                                    <VisualState x:Name="CheckedPressed">
                                    </VisualState>
                                    <VisualState x:Name="CheckedDisabled">
                                    </VisualState>
                                    <VisualState x:Name="Indeterminate">
                                    </VisualState>
                                    <VisualState x:Name="IndeterminatePointerOver">
                                    </VisualState>
                                    <VisualState x:Name="IndeterminatePressed">
                                    </VisualState>
                                    <VisualState x:Name="IndeterminateDisabled">
                                    </VisualState>
                                </VisualStateGroup>
                            </VisualStateManager.VisualStateGroups>
                            <ContentPresenter x:Name="ContentPresenter"
                                              BorderBrush="{TemplateBinding BorderBrush}"
                                              BorderThickness="{TemplateBinding BorderThickness}"
                                              Content="{TemplateBinding Content}"
                                              ContentTransitions="{TemplateBinding ContentTransitions}"
                                              ContentTemplate="{TemplateBinding ContentTemplate}"
                                              Padding="{TemplateBinding Padding}"
                                              HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
                                              VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
                                              AutomationProperties.AccessibilityView="Raw"/>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

【讨论】：