How to implement the edge button pointer event? - xaml

Question

I have seen this kind of button styling only in edge button and would like to know how to implement it. So there are two different effects into play(as far as I know). First that when buttons are pressed the content inside them shrinks (unlike default effect provided by Windows) and then second a dark non-discrete border appears inside the button when clicked to almost give a feel of depth in it.

Answer 1

This question was a challenge!
My first idea was to use the UWP Community Toolkit DropShadowPanel to create a shadow and clip it to the button's rectangle. Unfortunately this didn't work well, as I would have to set the shadow on a Rectangle that would need to have a visible border, which is not really good for our purpose of having a nicely blended borderless button. In addition, the DropShadowPanel shadow just didn't give a strong enough shadow effect that would be enough for the button to look like in Edge.
I have used Visual Studio and attached it's debugger to the Edge browser to see which control does the browser actually use. The Live Tree Visualizer revealed this:
SpartanXAML.InnerShadowControl? Okay, we don't have that. Let's work around this.
I fired up Photoshop instead. Created a 64x64 square image, put a transparent rectangle layer on the surface and set its Inner Glow as shown in this screenshot:
After export, I got the following PNG:
That looks quite like the inner shadow on the Edge button!
Now let's create a custom button style that uses this image!
<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>
This is a lengthy listing so I will just point out the most interesting things:
Removed all borders from the button
Set background to #f5f5f5 and hover background to #c1c1c0 to match Edge
Set the width and height to 64
Added an Image as the last control in the RootGrid, this is the shadow image, is Collapsed by default and appears only when pointer is pressed
Used UWP Community Toolkit's (Microsoft.Toolkit.Uwp.UI.Controls NuGet package) Scale behavior to create a simple, easy to control animation. This required adding xmlns:interactivity="using:Microsoft.Xaml.Interactivity" and xmlns:behaviors="using:Microsoft.Toolkit.Uwp.UI.Animations.Behaviors" XML namespaces to the root element of the file
Replaced the default PointerDownThemeAnimation with a custom animation utilizing Scale behavior, to make the animation more significant and scale uniformly, without skewing the content
Now let's just take our new button for a test ride!
<Button Style="{StaticResource EdgeButtonStyle}" HorizontalAlignment="Center">
<Image Source="Assets/Windows.png" />
</Button>
And the result: