How to ReStyle Pivot Header - windows-phone-8

Question

I have recently come across an interesting app and I would like to somewhat modify my solution to resemble their Pivot Header Template. The app can be seen here http://www.windowsphone.com/en-us/store/app/fhotoroom/acad1eed-3149-4b6c-bc4b-8567f409e3e0
where as a user swipes between pivot items the icons in the top right are highlighted accordingly. I have referenced a solution where the icons are paths and as the user swipes between pivot items the icons change colors. The only thing is, I would like to show icons on the right, while on the left the name changes to the respective pivot header name (but only show a single name at a time). I'm kind of lost on how to start this. My thoughts were, get a pivot style copy from blend into the apps page, and then somehow retemplate this so that icons show on the right while the name is on the left. Am I thinking of this correctly? How might I start changing the style to reflect something like this? Is there a better way?

Answer 1

I think pivot header doesn't match behavior that you want to achieve. By default every single pivot item has its own header, and if I don't misunderstand, in this case you got one header for whole pivot control, with displayed text and highlighted icon in the header changes according to active pivot item.
If that is the case, it will be easier to remove the pivot header. Then create a single element on top of the page as pivot header. Bind selected pivot index to a property in model. Then bind the text in the header element to a property that return different string based on selected pivot index. Use similar data-binding concept for highlighting icon (you already have referenced solution for this one). Example :
<Grid Background="DarkBlue">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<TextBlock Text="{Binding HeaderText}" Foreground="White"
FontSize="40" Margin="10,5,5,5"/>
<StackPanel Grid.Column="1" Orientation="Horizontal">
<!--Some icons here-->
....
</StackPanel>
</Grid>
<phone:Pivot SelectedIndex="{Binding PivotIndex, Mode=TwoWay}" Grid.Row="1">
<phone:PivotItem>
...
</phone:PivotItem>
....
</phone:Pivot>
And in the viewmodel :
private int _pivotIndex;
public int PivotIndex
{
get { return _pivotIndex; }
set { _pivotIndex = value; NotifyPropertyChanged("PivotIndex"); }
}
public string HeaderText
{
get { return GetHeaderByIndex(PivotIndex); }
}
private string GetHeaderByIndex(int pivotIndex)
{
switch (pivotIndex)
{
case 0:
return "#recent";
case 1:
return "#favorite";
default:
return "";
}
}
How about that, or is that not the case?

Answer 2

NOKIA made a really good tutorial how to do this. You can go trough the tutorial or just download the code at the bottom of the page.
Tabbed interface with Pivot animation for Windows Phone