Apply reveal effect to an InkToolbar [UWP] - xaml

Question

I'm trying to apply the reveal effect to the buttons of an InkToolbar but the code that the documentation reccomends for custom controls doesn't work, here's what I added to the XAML code of the InkToolbar:
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="PointerOver">
<VisualState.Setters>
<Setter Target="RootGrid.(RevealBrushHelper.State)" Value="PointerOver" />
<Setter Target="RootGrid.Background" Value="{ThemeResource ButtonRevealBackgroundPointerOver}"/>
<Setter Target="ContentPresenter.BorderBrush" Value="{ThemeResource ButtonRevealBorderBrushPointerOver}"/>
<Setter Target="ContentPresenter.Foreground" Value="{ThemeResource ButtonForegroundPointerOver}"/>
</VisualState.Setters>
</VisualState>
<VisualState x:Name="Pressed">
<VisualState.Setters>
<Setter Target="RootGrid.(RevealBrushHelper.State)" Value="Pressed" />
<Setter Target="RootGrid.Background" Value="{ThemeResource ButtonRevealBackgroundPressed}"/>
<Setter Target="ContentPresenter.BorderBrush" Value="{ThemeResource ButtonRevealBorderBrushPressed}"/>
<Setter Target="ContentPresenter.Foreground" Value="{ThemeResource ButtonForegroundPressed}"/>
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>

Answer 1

You cannot simply apply the Reveal effect on the entire InkToolbar. Instead, you should do it on each of the toolbar buttons.
Because each button uses a different style, this makes applying the effect a lot difficult than I thought. I had to grab a lot of resources from
C:\Program Files (x86)\Windows
Kits\10\DesignTime\CommonConfiguration\Neutral\UAP\10.0.16xxx.0\Generic\generic.xaml
and manually put them in my App.xaml. For example, the following style will be applied to the first button on the InkToolbar only.
<Style x:Key="InkToolbarCommonButtonStyle"
TargetType="ToggleButton">
<Setter Property="MinWidth"
Value="{ThemeResource InkToolbarButtonWidth}" />
<Setter Property="MinHeight"
Value="{ThemeResource InkToolbarButtonHeight}" />
<Setter Property="MaxWidth"
Value="{ThemeResource InkToolbarButtonWidth}" />
<Setter Property="MaxHeight"
Value="{ThemeResource InkToolbarButtonHeight}" />
<Setter Property="BorderThickness"
Value="{ThemeResource ButtonRevealBorderThemeThickness}" />
<Setter Property="Background"
Value="Transparent" />
<Setter Property="Foreground"
Value="{ThemeResource InkToolbarButtonForegroundThemeBrush}" />
<Setter Property="BorderBrush"
Value="{ThemeResource ButtonRevealBorderBrush}"/>
<Setter Property="FocusVisualMargin"
Value="-3" />
</Style>
<Style TargetType="InkToolbarBallpointPenButton"
BasedOn="{StaticResource InkToolbarCommonButtonStyle}">
<Setter Property="AutomationProperties.AutomationId"
Value="InkToolbarBallpointPenButton" />
<Setter Property="MinStrokeWidth"
Value="1" />
<Setter Property="MaxStrokeWidth"
Value="24" />
<Setter Property="SelectedStrokeWidth"
Value="4" />
<Setter Property="UseSystemFocusVisuals"
Value="True" />
<Setter Property="SelectedBrushIndex"
Value="0" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="InkToolbarBallpointPenButton">
<Grid x:Name="RootElement"
Background="{TemplateBinding Background}"
Width="{ThemeResource InkToolbarButtonWidth}"
Height="{ThemeResource InkToolbarButtonHeight}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal" />
<VisualState x:Name="PointerOver">
<VisualState.Setters>
<Setter Target="RootElement.(RevealBrush.State)"
Value="PointerOver" />
<Setter Target="RootElement.Background"
Value="{ThemeResource ButtonRevealBackgroundPointerOver}" />
<Setter Target="RootElement.BorderBrush"
Value="{ThemeResource ButtonRevealBorderBrushPointerOver}" />
<Setter Target="Content.Foreground"
Value="{ThemeResource ButtonForegroundPointerOver}" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="Pressed">
<VisualState.Setters>
<Setter Target="RootElement.(RevealBrush.State)"
Value="Pressed" />
<Setter Target="RootElement.Background"
Value="{ThemeResource ButtonRevealBackgroundPressed}" />
<Setter Target="RootElement.BorderBrush"
Value="{ThemeResource ButtonRevealBorderBrushPressed}" />
<Setter Target="Content.Foreground"
Value="{ThemeResource ButtonForegroundPressed}" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="Disabled">
<VisualState.Setters>
<Setter Target="ContentBackground.Fill"
Value="{ThemeResource InkToolbarDisabledBackgroundThemeBrush}" />
<Setter Target="Content.Foreground"
Value="{ThemeResource InkToolbarDisabledForegroundThemeBrush}" />
<Setter Target="CheckedContent.Foreground"
Value="{ThemeResource InkToolbarDisabledForegroundThemeBrush}" />
<Setter Target="ExtensionGlyph.Foreground"
Value="{ThemeResource InkToolbarDisabledForegroundThemeBrush}" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="CheckStates">
<VisualState x:Name="Unchecked" />
<VisualState x:Name="Indeterminate" />
<VisualState x:Name="Checked">
<VisualState.Setters>
<Setter Target="Content.Opacity"
Value="0" />
<Setter Target="CheckedContent.Opacity"
Value="1" />
<Setter Target="SelectionAccent.Opacity"
Value="1" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="FocusStates">
<VisualState x:Name="Focused" />
<VisualState x:Name="Unfocused" />
<VisualState x:Name="PointerFocused" />
</VisualStateGroup>
<VisualStateGroup x:Name="GlyphVisualStates">
<VisualState x:Name="ShowExtensionGlyph">
<VisualState.Setters>
<Setter Target="ExtensionGlyph.Opacity"
Value="1" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="HideExtensionGlyph" />
</VisualStateGroup>
<VisualStateGroup x:Name="FlowDirectionStates">
<VisualState x:Name="LeftToRight" />
<VisualState x:Name="RightToLeft">
<VisualState.Setters>
<Setter Target="ContentTransform.ScaleX"
Value="-1" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="ButtonFlyoutDirectionStates">
<VisualState x:Name="BottomDirection" />
<VisualState x:Name="TopDirection">
<VisualState.Setters>
<Setter Target="SelectionAccent.VerticalAlignment"
Value="Bottom" />
<Setter Target="ExtensionGlyph.HorizontalAlignment"
Value="Center" />
<Setter Target="ExtensionGlyph.VerticalAlignment"
Value="Top" />
<Setter Target="ExtensionGlyph.Margin"
Value="0,4,0,0" />
<Setter Target="ExtensionGlyph.Text"
Value="" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="RightDirection">
<VisualState.Setters>
<Setter Target="SelectionAccent.HorizontalAlignment"
Value="Right" />
<Setter Target="SelectionAccent.VerticalAlignment"
Value="Stretch" />
<Setter Target="SelectionAccent.Height"
Value="auto" />
<Setter Target="SelectionAccent.Width"
Value="2" />
<Setter Target="ExtensionGlyph.HorizontalAlignment"
Value="Right" />
<Setter Target="ExtensionGlyph.VerticalAlignment"
Value="Center" />
<Setter Target="ExtensionGlyph.Margin"
Value="0,0,4,0" />
<Setter Target="ExtensionGlyph.Text"
Value="" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="LeftDirection">
<VisualState.Setters>
<Setter Target="SelectionAccent.HorizontalAlignment"
Value="Left" />
<Setter Target="SelectionAccent.VerticalAlignment"
Value="Stretch" />
<Setter Target="SelectionAccent.Height"
Value="auto" />
<Setter Target="SelectionAccent.Width"
Value="2" />
<Setter Target="ExtensionGlyph.HorizontalAlignment"
Value="Left" />
<Setter Target="ExtensionGlyph.VerticalAlignment"
Value="Center" />
<Setter Target="ExtensionGlyph.Margin"
Value="4,0,0,0" />
<Setter Target="ExtensionGlyph.Text"
Value="" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="RightDirectionRTL">
<VisualState.Setters>
<Setter Target="SelectionAccent.HorizontalAlignment"
Value="Right" />
<Setter Target="SelectionAccent.VerticalAlignment"
Value="Stretch" />
<Setter Target="SelectionAccent.Height"
Value="auto" />
<Setter Target="SelectionAccent.Width"
Value="2" />
<Setter Target="ExtensionGlyph.HorizontalAlignment"
Value="Right" />
<Setter Target="ExtensionGlyph.VerticalAlignment"
Value="Center" />
<Setter Target="ExtensionGlyph.Margin"
Value="0,0,4,0" />
<Setter Target="ExtensionGlyph.Text"
Value="" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="LeftDirectionRTL">
<VisualState.Setters>
<Setter Target="SelectionAccent.HorizontalAlignment"
Value="Left" />
<Setter Target="SelectionAccent.VerticalAlignment"
Value="Stretch" />
<Setter Target="SelectionAccent.Height"
Value="auto" />
<Setter Target="SelectionAccent.Width"
Value="2" />
<Setter Target="ExtensionGlyph.HorizontalAlignment"
Value="Left" />
<Setter Target="ExtensionGlyph.VerticalAlignment"
Value="Center" />
<Setter Target="ExtensionGlyph.Margin"
Value="4,0,0,0" />
<Setter Target="ExtensionGlyph.Text"
Value="" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Rectangle x:Name="ContentBackground"
Fill="Transparent" />
<TextBlock x:Name="ExtensionGlyph"
Style="{StaticResource InkToolbarExtensionGlyphStyle}"
AutomationProperties.AccessibilityView="Raw" />
<Grid RenderTransformOrigin="0.5, 0.5">
<Grid.RenderTransform>
<ScaleTransform x:Name="ContentTransform" />
</Grid.RenderTransform>
<TextBlock x:Name="Content"
Style="{StaticResource InkToolbarGlyphFontStyle}"
Text=""
AutomationProperties.AccessibilityView="Raw"
Canvas.ZIndex="1"
Foreground="{ThemeResource InkToolbarButtonForegroundThemeBrush}" />
<TextBlock x:Name="CheckedContent"
Style="{StaticResource InkToolbarGlyphFontStyle}"
Text=""
AutomationProperties.AccessibilityView="Raw"
Canvas.ZIndex="1"
Foreground="{ThemeResource InkToolbarButtonSelectedForegroundThemeBrush}"
Opacity="0" />
<TextBlock x:Name="ContentFillGlyph"
Text=""
Style="{StaticResource InkToolbarGlyphFillFontStyle}"
TextAlignment="Center"
AutomationProperties.AccessibilityView="Raw"
Opacity="1"
Canvas.ZIndex="0"
Foreground="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=SelectedBrush, Mode=OneWay}" />
</Grid>
<Rectangle x:Name="SelectionAccent"
Style="{StaticResource InkToolbarSelectionAccentStyle}" />
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Please note that I had to replace RevealBrushHelper with RevealBrush. The Microsoft doc is using the former though. It could be that I am using an older version of Windows 10 SDK (16232) or the doc is not up-to-date. So pick whatever that doesn't break. :)
Also, in order for the light to show, you will have to put your InkToolbar on a darker background.
<Border Background="{ThemeResource SystemControlBackgroundBaseLowBrush}" Grid.Row="1">
<InkToolbar Margin="24" />
</Border>
I have created a sample here with all the reveal lighting enabled button styles and below is a working demo. Enjoy! :)