Add Reveal Higlight to pivot header - xaml

Question

I would like to add a bit of reveal highlight in my app to my pivot headers. But I'm not getting there
Below is my Style for the Pivot
<Style x:Key="PivotStyle1" TargetType="Pivot">
<Setter Property="Margin" Value="0"/>
<Setter Property="Padding" Value="0"/>
<Setter Property="Background" Value="{ThemeResource PivotBackground}"/>
<Setter Property="IsTabStop" Value="False"/>
<Setter Property="ItemsPanel">
<Setter.Value>
<ItemsPanelTemplate>
<Grid/>
</ItemsPanelTemplate>
</Setter.Value>
</Setter>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Pivot">
<Grid x:Name="RootElement" Background="{TemplateBinding Background}" HorizontalAlignment="{TemplateBinding HorizontalAlignment}" VerticalAlignment="{TemplateBinding VerticalAlignment}">
<Grid.Resources>
<Style x:Key="BaseContentControlStyle" TargetType="ContentControl">
<Setter Property="FontFamily" Value="Segoe UI"/>
<Setter Property="FontWeight" Value="SemiBold"/>
<Setter Property="FontSize" Value="{ThemeResource PivotHeaderItemFontSize}"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ContentControl">
<ContentPresenter Content="{TemplateBinding Content}"
ContentTemplate="{TemplateBinding ContentTemplate}"
Margin="{TemplateBinding Padding}"
ContentTransitions="{TemplateBinding ContentTransitions}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
OpticalMarginAlignment="TrimSideBearings"/>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="TitleContentControlStyle" TargetType="ContentControl" >
<Setter Property="FontWeight" Value="SemiLight"/>
<Setter Property="FontSize" Value="{ThemeResource PivotHeaderItemFontSize}"/>
</Style>
<Style TargetType="PivotHeaderItem">
<Setter Property="FontSize" Value="{ThemeResource PivotHeaderItemFontSize}" />
<Setter Property="FontFamily" Value="{ThemeResource PivotHeaderItemFontFamily}" />
<Setter Property="CharacterSpacing" Value="{ThemeResource PivotHeaderItemCharacterSpacing}" />
<Setter Property="Background" Value="Transparent" />
<Setter Property="Foreground" Value="{ThemeResource SystemControlForegroundBaseMediumHighBrush}" />
<Setter Property="Margin" Value="{ThemeResource PivotHeaderItemMargin}" />
<Setter Property="Height" Value="32" />
<Setter Property="VerticalContentAlignment" Value="Center" />
<Setter Property="IsTabStop" Value="False" />
<Setter Property="BorderBrush" Value="PaleGreen" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="PivotHeaderItem">
<Border x:Name="Grid"
Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="2,2,2,2"
Padding="16,0,16,0"
Margin="0"
>
<Border.Resources>
<Style x:Key="BaseContentPresenterStyle" TargetType="ContentPresenter">
<Setter Property="FontFamily" Value="Segoe UI"/>
<Setter Property="FontWeight" Value="SemiBold"/>
<Setter Property="FontSize" Value="{ThemeResource PivotHeaderItemFontSize}"/>
<Setter Property="TextWrapping" Value="Wrap"/>
<Setter Property="LineStackingStrategy" Value="MaxHeight"/>
<Setter Property="TextLineBounds" Value="Full"/>
<Setter Property="OpticalMarginAlignment" Value="TrimSideBearings"/>
</Style>
<Style x:Key="BodyContentPresenterStyle" TargetType="ContentPresenter" BasedOn="{StaticResource BaseContentPresenterStyle}">
<Setter Property="FontWeight" Value="SemiLight"/>
<Setter Property="FontSize" Value="{ThemeResource PivotHeaderItemFontSize}"/>
</Style>
</Border.Resources>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="SelectionStates">
<VisualStateGroup.Transitions>
<VisualTransition From="Unselected" To="UnselectedLocked" GeneratedDuration="0:0:0.33" />
<VisualTransition From="UnselectedLocked" To="Unselected" GeneratedDuration="0:0:0.33" />
</VisualStateGroup.Transitions>
<VisualState x:Name="Disabled">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter"
Storyboard.TargetProperty="Foreground" >
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlDisabledBaseLowBrush}" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Unselected" />
<VisualState x:Name="UnselectedLocked">
</VisualState>
<VisualState x:Name="Selected">
</VisualState>
<VisualState x:Name="UnselectedPointerOver">
</VisualState>
<VisualState x:Name="SelectedPointerOver">
<VisualState.Setters>
<Setter Target="Grid.(RevealBrush.State)" Value="PointerOver" />
<Setter Target="Grid.Background" Value="{ThemeResource ButtonRevealBackgroundPointerOver}" />
<Setter Target="ContentPresenter.BorderBrush" Value="{ThemeResource ButtonRevealBorderBrush}"/>
<Setter Target="ContentPresenter.Foreground" Value="{ThemeResource ButtonForegroundPointerOver}" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="UnselectedPressed">
</VisualState>
<VisualState x:Name="SelectedPressed">
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<ContentPresenter
x:Name="ContentPresenter"
Content="{TemplateBinding Content}"
ContentTemplate="{TemplateBinding ContentTemplate}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
Style="{StaticResource BodyContentPresenterStyle}">
<ContentPresenter.RenderTransform>
<TranslateTransform x:Name="ContentPresenterTranslateTransform" />
</ContentPresenter.RenderTransform>
</ContentPresenter>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Grid.Resources>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
{... add here stuff from the standard template ... }
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
If I hover over the selected Header the background changes, but it's a flat color and like in the NavigationView/Listview. The BorderBrush changes his color too, but there is no shading.
P.S.: How could I modify the Style to be API aware. If the user fas the FCU user Reveal Highlight, if not use flat colors...
Update
The effect is very subtile and hardly visible. Is there a possibility to make the effect stronger?
how can I expand the effect, so that all headers are included. For know the effect is limited to one header only... in navigation view the effect spread to other lines as well
Many thanks for your help

Answer 1

The Reveal is a lighting effect that helps bring depth and focus to your app's interactive elements. It seems you have implement the Reveal effect of the PivotItem, you can set your Pivot with a high Contrast background to see it, such as LightGray.
If you want the BorderBrush changes his color with shading, you should change your Xaml of the SelectedPointerOver VisualState in your code as the following that to change the Grid Border brush but not the ContentPresenter,
<VisualState x:Name="SelectedPointerOver">
<VisualState.Setters>
<Setter Target="Grid.(RevealBrush.State)" Value="PointerOver" />
<Setter Target="Grid.Background" Value="{ThemeResource ButtonRevealBackgroundPointerOver}" />
<Setter Target="Grid.BorderBrush" Value="{ThemeResource NavigationViewItemBorderBrushPointerOver}"/>
<Setter Target="ContentPresenter.Foreground" Value="{ThemeResource ButtonForegroundPointerOver}" />
</VisualState.Setters>
</VisualState>
You can also create a new MyRevealBorderBrush with a x:Key, a Color, an Opacity (optional), and a FallbackColor to use it in your Xaml.
<RevealBackgroundBrush x:Key="MyRevealBorderBrush" Color="PaleGreen" Opacity= "0.5" FallbackColor="PaleGreen"/>
Then you can use it in the VisualState,
<VisualState.Setters>
<Setter Target="Grid.(RevealBrush.State)" Value="PointerOver" />
<Setter Target="Grid.Background" Value="{ThemeResource ButtonRevealBackgroundPointerOver}" />
<Setter Target="Grid.BorderBrush" Value="{StaticResource MyRevealBorderBrush}"/>
<Setter Target="ContentPresenter.Foreground" Value="{ThemeResource ButtonRevealBackgroundPointerOver}" />
</VisualState.Setters>
As for modifying the Style to be API aware, you can look into this document :
https://learn.microsoft.com/en-us/windows/uwp/debug-test-perf/conditional-xaml#use-ifelse-conditions
-----Update----
To implement the similar effect, you should add the setters in the UnselectedPointerOver VisualState in your PivotHeaderItem style,
<VisualState x:Name="UnselectedPointerOver">
<VisualState.Setters>
<Setter Target="Grid.(RevealBrush.State)" Value="PointerOver" />
<Setter Target="Grid.Background" Value="{ThemeResource ButtonRevealBackgroundPointerOver}" />
<Setter Target="Grid.BorderBrush" Value="{StaticResource MyRevealBorderBrush}"/>
<Setter Target="ContentPresenter.Foreground" Value="{ThemeResource ButtonForegroundPointerOver}" />
</VisualState.Setters>
</VisualState>
As for the colors, you should try what you want. For the NavigationView, it should uses the NavigationViewItemBorderBrushPointerOver ThemeResource. You can also try it to see the effect.
<Setter Target="Grid.BorderBrush" Value="{ThemeResource NavigationViewItemBorderBrushPointerOver}"/>