如何实现边缘按钮指针事件？

Question

我只在边缘按钮中看到过这种按钮样式，想知道如何实现它。所以有两种不同的效果在起作用（据我所知）。首先，当按下按钮时，其中的内容会缩小（与 Windows 提供的默认效果不同），其次，当单击按钮时，按钮内部会出现一个黑色的非离散边框，几乎给人一种深度的感觉。

Answer 1

这个问题是一个挑战！

我的第一个想法是使用UWP Community Toolkit DropShadowPanel 创建阴影并将其剪辑到按钮的矩形。不幸的是，这效果不佳，因为我必须在需要有可见边框的Rectangle 上设置阴影，这对于我们拥有完美混合的无边框按钮的目的并不是很好。此外，DropShadowPanel 阴影只是没有提供足够强的阴影效果，足以让按钮在 Edge 中看起来像。

我使用了 Visual Studio 并将它的调试器附加到 Edge 浏览器，以查看浏览器实际使用的控件。 Live Tree Visualizer 透露了这一点：

SpartanXAML.InnerShadowControl?好吧，我们没有那个。让我们解决这个问题。

我改为使用 Photoshop。创建了一个 64x64 的正方形图像，在表面上放置一个透明的矩形层并设置它的Inner Glow，如下截图所示：

导出后，我得到以下PNG：

这看起来很像 Edge 按钮上的内部阴影！

现在让我们创建一个使用此图像的自定义按钮样式！

<Style TargetType="Button" x:Key="EdgeButtonStyle">
    <Setter Property="Background" Value="#f5f5f5" />
    <Setter Property="Foreground" Value="{ThemeResource ButtonForeground}" />
    <Setter Property="BorderBrush" Value="{ThemeResource ButtonBorderBrush}" />
    <Setter Property="BorderThickness" Value="{ThemeResource ButtonBorderThemeThickness}" />
    <Setter Property="Padding" Value="8" />
    <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="FocusVisualMargin" Value="-3" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="Button">
                <Grid x:Name="RootGrid" Width="64" Height="64" Background="{TemplateBinding Background}">

                    <VisualStateManager.VisualStateGroups>
                        <VisualStateGroup x:Name="CommonStates">
                            <VisualState x:Name="Normal">

                                <Storyboard>
                                    <PointerUpThemeAnimation Storyboard.TargetName="RootGrid" />
                                </Storyboard>
                            </VisualState>

                            <VisualState x:Name="PointerOver">

                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="RootGrid" Storyboard.TargetProperty="Background">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="#c1c1c0" />
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonForegroundPointerOver}" />
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>

                            <VisualState x:Name="Pressed">

                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="RootGrid" Storyboard.TargetProperty="Background">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="#c1c1c0" />
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonForegroundPressed}" />
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Scale" Storyboard.TargetProperty="ScaleX">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="0.8" />
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Scale" Storyboard.TargetProperty="ScaleY">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="0.8" />
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="InnerShadow" Storyboard.TargetProperty="Visibility">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="Visible" />
                                    </ObjectAnimationUsingKeyFrames>

                                </Storyboard>
                            </VisualState>

                            <VisualState x:Name="Disabled">

                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="RootGrid" Storyboard.TargetProperty="Background">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonBackgroundDisabled}" />
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonForegroundDisabled}" />
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </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">
                        <interactivity:Interaction.Behaviors>
                            <behaviors:Scale x:Name="Scale"
                                    ScaleX="1"
                                    ScaleY="1"
                                    CenterX="32"
                                    CenterY="32"
                                    Duration="100"
                                    Delay="0"
                                    EasingType="Default"
                                    AutomaticallyStart="True"/>
                        </interactivity:Interaction.Behaviors>
                    </ContentPresenter>

                    <Image Source="/Assets/InnerShadowGray.png" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Visibility="Collapsed" x:Name="InnerShadow" />

                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

这是一个冗长的列表，所以我只会指出最有趣的事情：

• 删除了按钮的所有边框
• 将背景设置为 #f5f5f5 并将背景悬停为 #c1c1c0 以匹配 Edge
• 将宽度和高度设置为 64
• 在RootGrid中添加了Image作为最后一个控件，这是阴影图像，默认为Collapsed，仅在按下指针时出现
• 使用 UWP 社区工具包（Microsoft.Toolkit.Uwp.UI.Controls NuGet 包）Scale 行为创建简单、易于控制的动画。这需要将 xmlns:interactivity="using:Microsoft.Xaml.Interactivity" 和 xmlns:behaviors="using:Microsoft.Toolkit.Uwp.UI.Animations.Behaviors" XML 命名空间添加到文件的根元素
• 将默认的 PointerDownThemeAnimation 替换为利用 Scale 行为的自定义动画，以使动画更加显着并均匀缩放，而不会扭曲内容

现在让我们来试试我们的新按钮吧！

<Button Style="{StaticResource EdgeButtonStyle}" HorizontalAlignment="Center">
    <Image Source="Assets/Windows.png" />
</Button>

结果：