Pivot item headers like instagram in windows phone 8

Question

I need your ideas how can i put Segoe UI Font or icons to Pivot Headers. I started a new project and put basic Pivot on my XAML, if you ask more and more code, that's all.

This is the app link that i want to know how can they put items as icons rather than texts. http://instagram.com/

i need sample code rather than fairy tale or success stories.

        <phone:PivotItem CacheMode="{x:Null}"   FontFamily="Segoe UI Symbol" Header="feed"  >

Answer 1

As it turns out there is a great article on the Nokia Developer Wiki for doing just that.

The gist of it is to not have a Header set for the PivotItem and instead to display a ListBox at the top of the page. You then link the ListBox SelectedIndex to the Pivot SelectedIndex.

<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>
    <ListBox SelectedIndex="{Binding SelectedIndex, ElementName=ContentPivot, Mode=TwoWay}">
        <!-- Items -->
    </ListBox>
    <phone:Pivot x:Name="ContentPivot">
        <!-- Items -->
    </phone:Pivot>
</Grid>

Answer 2

This is the actual answer in MSDN forums.

..and this is how it looks on the phone's screen.

Simply use the event handlers. Tap of Image and SelectionChanged of Pivot.

Here is the xaml I used:

<Grid x:Name="LayoutRoot" Background="#2b5a83">
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto" />
        <RowDefinition/>
    </Grid.RowDefinitions>

    <Grid VerticalAlignment="Top" Height="82" 
          Background="#2b5a83" Canvas.ZIndex="1">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>
        <Image x:Name="icon0" Grid.Column="0" 
               Source="/Assets/ApplicationIcon.png" 
               Opacity="0.5" Tap="icon0_Tap"/>
        <Image x:Name="icon1" Grid.Column="1" 
               Source="/Assets/ApplicationIcon.png" 
               Opacity="0.5" Tap="icon1_Tap" />
    </Grid>

    <!--Pivot Control-->
    <phone:Pivot Grid.Row="1" x:Name="MainPivot" 
                 Foreground="White" Background="#2b5a83" 
                 SelectionChanged="Pivot_SelectionChanged">

        <!--Pivot item one-->
        <phone:PivotItem>
            <TextBlock>
                Deneme
            </TextBlock>
        </phone:PivotItem>

        <!--Pivot item two-->
        <phone:PivotItem>
            <TextBlock>
                Deneme 2
            </TextBlock>
        </phone:PivotItem>
    </phone:Pivot>
</Grid>

... and the CSharp code-behind as follows:

    private void Pivot_SelectionChanged(object sender, SelectionChangedEventArgs e)
    {
        switch (MainPivot.SelectedIndex)
        {
            case 0:
                Select0();
                break;
            case 1:
                Select1();
                break;
            default:
                MessageBox.Show("Add another case and write it's new method, " + Environment.NewLine +
                    "Also bind the `Tap` event of another image to a new handler calling this newly created method.");
                break;
        }
    }

    private void Icon1_Tap(object sender, GestureEventArgs e)
    {
        Select1();
    }

    private void Select0()
    {
        icon0.Opacity = 1.0;
        icon1.Opacity = 0.5;
        MainPivot.SelectedIndex = 0;
    }

    private void Select1()
    {
        icon1.Opacity = 1.0;
        icon0.Opacity = 0.5;
        MainPivot.SelectedIndex = 1;
    }

    private void icon0_Tap(object sender, System.Windows.Input.GestureEventArgs e)
    {
        Select0();
    }

    private void icon1_Tap(object sender, System.Windows.Input.GestureEventArgs e)
    {
        Select1();
    }

Try it! =) ...and let me know of the outcome:)