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

---

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

这个问题是一个挑战

我的第一个想法是使用

UWP社区工具包

DropShadowPanel

创建一个阴影并将其剪辑到按钮的矩形上。不幸的是，这并不能很好地工作，因为我必须在一个需要有可见边框的

矩形上设置阴影，这对于我们拥有一个完美混合的无边框按钮的目的来说不是很好。此外，
DropShadowPanel
shadow只是没有提供足够强的阴影效果，足以使按钮看起来像在Edge中

我使用了Visual Studio并将其调试器附加到边缘浏览器，以查看浏览器实际使用的控件。
实时树可视化工具
显示了以下内容：


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

我启动了Photoshop。创建一个64x64正方形图像，在表面上放置一个透明矩形层，并设置其
内部辉光
，如此屏幕截图所示：


导出后，我得到了以下PNG：


这看起来很像边缘按钮上的内部阴影

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

<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>

结果是：

哇，真是个有用的答案！我迫不及待地实施它。让我知道它是如何进行的：-）
<Button Style="{StaticResource EdgeButtonStyle}" HorizontalAlignment="Center">
    <Image Source="Assets/Windows.png" />
</Button>