How to add a image in Pivot header similar to page controller of iOS in Windows 10?

Question

I am currently working with Windows 10 and Pivot control. I am aware that we can customize the header template by adding an Image or customizing the TextBlock. I know how to customize basic template like following

<Pivot.HeaderTemplate>
    <DataTemplate>
        <Grid>
            <TextBlock Text="{Binding}"
                       FontSize="22"/>
        </Grid>
    </DataTemplate>
</Pivot.HeaderTemplate>

This works perfectly fine for basic purpose but I want to achieve an output similar to the following screenshot. Add ellipse for each header and it should at the center of the page.

Can someone suggest whether this is possible or not?

Update

I added a StackPanel like below.

 <StackPanel HorizontalAlignment="Center" Grid.Row="1" Orientation="Horizontal">
                    <Ellipse Fill="Cyan"
                             Height="10"
                             Width="10"
                             Margin="10,0"/>
                    <Ellipse Fill="Gainsboro"
                             Height="10"
                             Width="10"
                             Margin="10,0"/>
                    <Ellipse Fill="Gainsboro"
                             Height="10"
                             Width="10"
                             Margin="10,0"/>

                </StackPanel>

Now how to assign PivotHeaderForegroundSelectedBrush and PivotHeaderForegroundUnselectedBrush to ellipses?

Jerin Jerin · Accepted Answer · 2016-04-06T01:01:30

For designing ellipses on center of page.
Option 1
You can accomplish is by having binding a margin property. This margin property will need to be updated for each resize.
Option2
Else specify a Stackpanel with Orientation as Horizontal, Center aligned and containing ellipses which are updated as soon as Pivot selection changes. You can find a similar control being created by Jerry Nixon Pagination

As for Ellipses Color change you can Create a template for different state, use a trigger or even override current Pivot header templates

<SolidColorBrush x:Key="PivotHeaderForegroundSelectedBrush" Color="Blue" />
<SolidColorBrush x:Key="PivotHeaderForegroundUnselectedBrush" Color="White" />

How to add a image in Pivot header similar to page controller of iOS in Windows 10?

1 Answers