Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

Tags:

c#

xaml

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

like image 693
Sangadji Avatar asked Jul 12 '15 07:07

Sangadji


1 Answers

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.

like image 62
moswald Avatar answered Oct 10 '22 21:10

moswald