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
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With