C# UWP - 在鼠标悬停期间保持按钮边框可见

Question

我有一个包含多个按钮的页面，这些按钮都遵循此模板：

<Button
    Grid.Row="0"
    Grid.Column="0"
    Width="50"
    Height="100"
    BorderBrush="Silver"
    BorderThickness="1">
    <TextBlock
        FontSize="12"
        Foreground="Black">UN</TextBlock>
</Button>

只要鼠标不在按钮上，边框就可见。鼠标悬停在上面它就会消失。

如何让边框始终可见？

Answer 1

更新：

正如@Raymond Chen 提到的，更简单的方法是将 Button 放在 Border 内，这样 Button 将成为 Border 的子级。所以你不需要设置Button的BorderBrush和BorderThickness。此外，您无需更改样式。

旧回复：

此行为的原因是，当您的指针移到按钮上时，它会触发按钮的 PointerOver 状态，这将更改 BorderBrush 和边框会改变。

要更改此行为，您需要找出按钮的样式并禁用 BorderBrush VisualStates 中的更改，例如 PointerOver 或 Pressed,等等

以下是您可以遵循的步骤：

您需要先获取按钮样式。有两种方法。

A。从 generic.xaml 文件获取 Button 控件的默认样式，并将该样式应用到 Button 控件。

B。在您的 VS 中打开 Document Outline Window 并找到目标按钮控件。 Right-click 在按钮上，转到 编辑模板 -> 编辑副本。然后VS会自动创建按钮的默认样式。
在添加的样式中找到PointerOver、Pressed、Disabled VisualStates，移除针对[=45=的ObjectAnimationUsingKeyFrames ]边框画笔.

代码如下所示：

        <Style x:Key="ButtonStyle1" TargetType="Button">
        <Setter Property="Background" Value="{ThemeResource ButtonBackground}"/>
        <Setter Property="BackgroundSizing" Value="OuterBorderEdge"/>
        <Setter Property="Foreground" Value="{ThemeResource ButtonForeground}"/>
        <Setter Property="BorderBrush" Value="{ThemeResource ButtonBorderBrush}"/>
        <Setter Property="BorderThickness" Value="{ThemeResource ButtonBorderThemeThickness}"/>
        <Setter Property="Padding" Value="{StaticResource ButtonPadding}"/>
        <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="{StaticResource UseSystemFocusVisuals}"/>
        <Setter Property="FocusVisualMargin" Value="-3"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="Button">
                    <ContentPresenter x:Name="ContentPresenter" AutomationProperties.AccessibilityView="Raw" Background="{TemplateBinding Background}" BackgroundSizing="{TemplateBinding BackgroundSizing}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" ContentTemplate="{TemplateBinding ContentTemplate}" CornerRadius="{TemplateBinding CornerRadius}" Content="{TemplateBinding Content}" ContentTransitions="{TemplateBinding ContentTransitions}" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" Padding="{TemplateBinding Padding}" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}">
                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="CommonStates">
                                <VisualState x:Name="Normal">
                                    <Storyboard>
                                        <PointerUpThemeAnimation Storyboard.TargetName="ContentPresenter"/>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="PointerOver">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Background">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonBackgroundPointerOver}"/>
                                        </ObjectAnimationUsingKeyFrames>
                                        <!--<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="BorderBrush">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonBorderBrushPointerOver}"/>
                                        </ObjectAnimationUsingKeyFrames>-->
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonForegroundPointerOver}"/>
                                        </ObjectAnimationUsingKeyFrames>
                                        <PointerUpThemeAnimation Storyboard.TargetName="ContentPresenter"/>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="Pressed">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Background">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonBackgroundPressed}"/>
                                        </ObjectAnimationUsingKeyFrames>
                                        <!--<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="BorderBrush">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonBorderBrushPressed}"/>
                                        </ObjectAnimationUsingKeyFrames>-->
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonForegroundPressed}"/>
                                        </ObjectAnimationUsingKeyFrames>
                                        <PointerDownThemeAnimation Storyboard.TargetName="ContentPresenter"/>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="Disabled">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Background">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonBackgroundDisabled}"/>
                                        </ObjectAnimationUsingKeyFrames>
                                        <!--<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="BorderBrush">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonBorderBrushDisabled}"/>
                                        </ObjectAnimationUsingKeyFrames>-->
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonForegroundDisabled}"/>
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>
                    </ContentPresenter>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

并确保您的按钮应用此样式

  <Button Style="{StaticResource ButtonStyle1}"

现在您可以使 Button 上的边框始终可用。

C# UWP - 在鼠标悬停期间保持按钮边框可见

C# UWP - Keep Button Border Visible During Mouse Over

c#

uwp-xaml