Skip to content
/

Highlight your Selected Pivot Header in a Universal Windows Platform app

Not long ago I wrote a blog post about Responsive Pivot Headers in Universal Windows Platform apps. Paul responded asking how to change the background of the selected item, just like the example I posted on top of the post.
It's a great question and I'm sorry I didn't cover this so the pivot looks more like the example.
An omission I want to correct with this blog post.

The example

So to brush up on the first post, here is the example again:
Example design from pivot guidelines by Microsoft

The solution

There are only 3 small changes to make to get the Pivot more like the example.

  1. Add a dark background to the pivot header
  2. Change the color of the pivot header content to light so we can read it
  3. Add a lighter background to the selected pivot header

Adding the background

There is not really an element to set the background of the whole pivot header, so we have to add one.
In the Pivot Template we have created in the first post we add a Border to the Grid of the PivotPanel.
It gets the darker color and has to span the 3 columns.

<PivotPanel x:Name="Panel" VerticalAlignment="Stretch">
<Grid x:Name="PivotLayoutElement">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto"/>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="Auto"/>
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
       ...
    </Grid.RowDefinitions>
    <Grid.RenderTransform>
        ...
    </Grid.RenderTransform>
    <Border Background="#FF34323F" Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="3" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"/>
    <ContentPresenter x:Name="LeftHeaderPresenter" ... />

Lighten up the foreground

Then we go the PivotHeaderItem Style we also created before.
Here we add a Setter so we can change the RequestedTheme to Dark.

<Pivot>
    <Pivot.Resources>
        <Style TargetType="PivotHeaderItem">
            ...
            <Setter Property="RequestedTheme" Value="Dark" />
                <Setter Property="Template">

Adding the highlighted background

Now we go to the Visual State named "Selected".
Here we change the Background color to the lighter color.

<VisualState x:Name="Selected">
    <Storyboard>
        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground" >
            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightAltBaseHighBrush}" />
        </ObjectAnimationUsingKeyFrames>
        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Grid" Storyboard.TargetProperty="Background" >
            <DiscreteObjectKeyFrame KeyTime="0" Value="#FF42424C" />
        </ObjectAnimationUsingKeyFrames>
    </Storyboard>
</VisualState>

And that's it!
It's not an exact replica, but you can change all the colors and sizes to accommodate your needs.

Styled Pivot Header with selected item

Source code

The source code of the sample project on GitHub has been updated to reflect these changes.
You can also go to the specific commit to see the exact changes.

6 Comments

  1. /

    You just saved me a day of effort!

    • /

      I'm glad to be of service. :)

  2. /

    Hey, the 'SELECTED' color isn't working!

  3. /

    Hi,
    How to set pivotitem headers at bottom?
    Please help me, I stuck at this one.

    Advance Thanks,
    Pavan

  4. /

    Is it possible to make each pivotitem stretch equally to reach full width of the screen, like the Microsoft examples show? https://i-msdn.sec.s-msft.com/en-us/windows/uwp/layout/images/food-truck-finder/uap-foodtruck--md-detail.png

  5. /

    Microsoft should simplify its UI control construction with XAML, because I've never seen so much complicated and stupid way of mobile development, even in Android when dealing with XML.

Leave a comment