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