Pivot HeadTemplate alignment - windows-phone-8

Question

Here is how my Pivot control looks on my WP app.
here is the code for same.
<phone:Pivot>
<!--Pivot item one-->
<phone:PivotItem>
<phone:PivotItem.Header>
<ContentControl>
<Image Source="/Assets/alarmClock.png"/>
</ContentControl>
</phone:PivotItem.Header>
<Grid>
<TextBlock Text="hello1"/>
</Grid>
</phone:PivotItem>
<!--Pivot item two-->
<phone:PivotItem >
<phone:PivotItem.Header>
<ContentControl>
<Image Source="/Assets/clock.png"/>
</ContentControl>
</phone:PivotItem.Header>
<Grid>
<TextBlock Text="hello 2"/>
</Grid>
</phone:PivotItem>
<!--Pivot item three-->
<phone:PivotItem>
<phone:PivotItem.Header>
<ContentControl>
<Image Source="/Assets/timer.png"/>
</ContentControl>
</phone:PivotItem.Header>
<Grid>
<TextBlock Text="hello 3"/>
</Grid>
</phone:PivotItem>
</phone:Pivot>
I want to customized how the header looks. This is how i want the headers to align itself (see below image). I am not sure how it is to be done. Below is how i want it to look with the black grid and vertical pipes. Can anyone help me with this ? I think i will have to write a Style for same. However, I don't know in which way i can defined a style so that alignment is changed as per below.

Answer 1

The closer to what you want to achieve is this with no much effort:
<phone:PhoneApplicationPage.Resources>
<DataTemplate x:Key="PivotHeader">
<Grid Margin="-11,0,-11,0">
<Border BorderBrush="#FFF70000" BorderThickness="1">
<Grid Width="152" HorizontalAlignment="Center">
<Image Height="80" Source="{Binding}"></Image>
</Grid>
</Border>
</Grid>
</DataTemplate>
</phone:PhoneApplicationPage.Resources>
<!--LayoutRoot is the root grid where all page content is placed-->
<Grid x:Name="LayoutRoot" Background="Transparent">
<!--Pivot Control-->
<phone:Pivot HeaderTemplate="{StaticResource PivotHeader}">
<phone:PivotItem Header="/Assets/Clock.png">
<Grid>
<TextBlock Text="hello 1"/>
</Grid>
</phone:PivotItem>
<phone:PivotItem Header="/Assets/Clock.png">
<Grid>
<TextBlock Text="hello 2"/>
</Grid>
</phone:PivotItem>
<phone:PivotItem Header="/Assets/Clock.png">
<Grid>
<TextBlock Text="hello 3"/>
</Grid>
</phone:PivotItem>
</phone:Pivot>
</Grid>
However you will notice that a Pivot Control does not work like tabs on Android and iPhone.
I wouldn't recommend changing the behavior of the pivot control in Windows Phone either.
Maybe the best way to achieve what you are trying to do is to use buttons at the top of a pivot page and manually handle their behavior by modifying pivots selection changed.