CODEWITHSUNDEEP
c#windows-phone-7xamlwindows-phone
Earlgray
Earlgray

Reputation: 647

WP7 C# - How to change style of Pivot header

I need to change Pivot header background and padding (top menu of Pivot control where are titles of pivot items).

I try this:

    <controls:Pivot Grid.Row="1" Margin="0" Padding="0">
        <controls:Pivot.HeaderTemplate>
            <DataTemplate>
                <StackPanel Background="#666666" Margin="0" />
            </DataTemplate>
        </controls:Pivot.HeaderTemplate>

        <controls:PivotItem Background="#65006a">
            <controls:PivotItem.Header>
                <TextBlock FontSize="60" Margin="0">tasks</TextBlock>
            </controls:PivotItem.Header>
        </controls:PivotItem>

    </controls:Pivot>

But it doesnt solve it.

How can I do this?

Upvotes: 3

Views: 3575

Answers (2)

user3497034
user3497034

Reputation:

Here, I have modified the header of a pivot control. I have defined different control with different colours so you can easily identify what I have done. Modify this source as per need to change pivot header. 

<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
          <phone:Pivot>
            <phone:Pivot.HeaderTemplate>
                <DataTemplate>
                    <StackPanel Background="Blue"
                                Margin="15,-10,0,0">
                        <TextBlock Text="{Binding}"
                                   FontSize="20"
                                   />
                    </StackPanel>
                </DataTemplate>
            </phone:Pivot.HeaderTemplate>
            <phone:PivotItem Header="item1">
                <Grid Background="Red"></Grid>
            </phone:PivotItem>
            <phone:PivotItem Header="item2">
                <Grid Background="Green"></Grid>
            </phone:PivotItem>
        </phone:Pivot> 

    </Grid>

Upvotes: 1

Toni Petrina
Toni Petrina

Reputation: 7112

The proper way to do it is with the following snipped:

<controls:Pivot.HeaderTemplate>
    <DataTemplate>
        <StackPanel Background="#666666" Margin="0">
            <TextBlock FontSize="60" Margin="0" Text="{Binding}"/>
        </StackPanel>
    </DataTemplate>
</controls:Pivot.HeaderTemplate>

<controls:PivotItem Background="#65006a" Header="tasks">
</controls:PivotItem>

Each PivotItem has header text which is then passed to the data template contained in HeaderTemplate. You can see that I've moved TextBlock inside StackPanel and set its text via binding. What you did wrong is that header template contained only StackPanel and nothing inside it.

Upvotes: 4

Related Questions