(Windows 10 UWP) How to bind Header property in PivotItem control into custom HeaderTemplate in Pivot control?

Question

I just tried the new navigation control in Windows 10 UWP project which is the tab/pivot. Here is my code and it works pretty well for the first time...

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <Pivot>
        <PivotItem x:Name="PivotItem_Inbox" Header="Inbox">
            <Grid/>
        </PivotItem>
        <PivotItem x:Name="PivotItem_Draft" Header="Draft">
            <Grid/>
        </PivotItem>
    </Pivot>
</Grid>

XAML design view : http://i.stack.imgur.com/4qMmO.jpg

I'd like to modify its header template so I can assign new background color, font sizes, visual states, etc. So I decided to declare HeaderTemplate element tag.

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <Pivot>
        <Pivot.HeaderTemplate>
            <DataTemplate>
                <Grid Background="Green">
                    <TextBlock Text="{Binding Header}" FontSize="24" FontFamily="Segoe UI"/>
                </Grid>
            </DataTemplate>
        </Pivot.HeaderTemplate>
        <PivotItem x:Name="PivotItem_Inbox" Header="Inbox">
            <Grid/>
        </PivotItem>
        <PivotItem x:Name="PivotItem_Draft" Header="Draft">
            <Grid/>
        </PivotItem>
    </Pivot>
</Grid>

But after declaring the HeaderTemplate, it seems now I am missing the header text in each pivot item controls (which is the "Inbox" and "Draft" in the previous image). I already tried many ways to re-bind it but still unsuccesful. Please help!

XAML design view 2 (end-result) : http://i.stack.imgur.com/ZoS0a.jpg

Answer 1

A much simpler solution:

<Pivot.HeaderTemplate>
    <DataTemplate>
        <Grid Background="Green">
            <TextBlock Text="{Binding}" FontSize="24" FontFamily="Segoe UI"/>
        </Grid>
    </DataTemplate>
</Pivot.HeaderTemplate>

The original mistake was trying to bind to the property Header , when that's implicit since this is the header template.

Answer 2

I got the solution!

To create custom pivot header you need to create a XAML user control. Here is my user control which I named TabHeader.xaml :

<UserControl
x:Class="Edelweisuniversalapp.Pages.Dashboard.TabHeader"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:Edelweisuniversalapp.Pages.Dashboard"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
d:DesignHeight="128"
d:DesignWidth="128">

<Grid Height="128" Width="128">
    <StackPanel>
        <FontIcon
            HorizontalAlignment="Center"
            Margin="0,12,0,0"
            Glyph="{Binding Glyph}"
            FontSize="16"
            />
        <TextBlock
            FontFamily="Segoe UI"
            Text="{Binding Label}"
            Style="{StaticResource CaptionTextBlockStyle}"
            LineStackingStrategy="BlockLineHeight"
            LineHeight="14"
            MaxLines="2"
            IsTextScaleFactorEnabled="False"
            TextAlignment="Center"
            HorizontalAlignment="Center"
            Margin="2,5,2,7"
        />
    </StackPanel>

</Grid>

And below is the TabHeader.xaml.cs :

using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Runtime.InteropServices.WindowsRuntime;
using Windows.Foundation;
using Windows.Foundation.Collections;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Controls.Primitives;
using Windows.UI.Xaml.Data;
using Windows.UI.Xaml.Input;
using Windows.UI.Xaml.Media;
using Windows.UI.Xaml.Navigation;

namespace Edelweisuniversalapp.Pages.Dashboard
{
public sealed partial class TabHeader : UserControl
{
    public string Glyph
    {
        get { return (string)GetValue(GlyphProperty); }
        set { SetValue(GlyphProperty, value); }
    }

    // Using a DependencyProperty as the backing store for Glyph.  This enables animation, styling, binding, etc...
    public static readonly DependencyProperty GlyphProperty =
        DependencyProperty.Register("Glyph", typeof(string), typeof(TabHeader), null);

    public string Label
    {
        get { return (string)GetValue(LabelProperty); }
        set { SetValue(LabelProperty, value); }
    }

    // Using a DependencyProperty as the backing store for Label.  This enables animation, styling, binding, etc...
    public static readonly DependencyProperty LabelProperty =
        DependencyProperty.Register("Label", typeof(string), typeof(TabHeader), null);

    public TabHeader()
    {
        this.InitializeComponent();
        this.DataContext = this;
    }
}
}

And then you can use the user control in the pivot control like this :

<Pivot Style="{StaticResource TabsStylePivotStyle}" Grid.Row="0">            
        <PivotItem>
            <PivotItem.Header>
                <local:TabHeader Height="124" Label="Inbox" Glyph="&#xE719;"/>
            </PivotItem.Header>
            <PivotItem.Content>
                <TextBlock Text="Content content content1"/>
            </PivotItem.Content>
        </PivotItem>
        <PivotItem>
            <PivotItem.Header>
                <local:TabHeader Height="124" Label="Draft" Glyph="&#xE719;"/>
            </PivotItem.Header>
            <PivotItem.Content>
                <TextBlock Text="Content content content2"/>
            </PivotItem.Content>
        </PivotItem>
        <PivotItem>
            <PivotItem.Header>
                <local:TabHeader Height="124" Label="Outbox" Glyph="&#xE719;"/>
            </PivotItem.Header>
            <PivotItem.Content>
                <TextBlock Text="Content content content3"/>
            </PivotItem.Content>
        </PivotItem>
    </Pivot>

And here is the result http://i.stack.imgur.com/gUF46.jpg