change the backgorund of the pivot item in windows phone 8

Question

I have a style

  <Style x:Key="PivotStyle1" TargetType="phone:Pivot">
        <Setter Property="Margin" Value="0"/>
        <Setter Property="Padding" Value="0"/>
        <Setter Property="Foreground" Value="{StaticResource PhoneForegroundBrush}"/>
        <Setter Property="Background" Value="Transparent"/>
        <Setter Property="ItemsPanel">
            <Setter.Value>
                <ItemsPanelTemplate>
                    <Grid/>
                </ItemsPanelTemplate>
            </Setter.Value>
        </Setter>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="phone:Pivot">
                    <Grid HorizontalAlignment="{TemplateBinding HorizontalAlignment}" VerticalAlignment="{TemplateBinding VerticalAlignment}">
                        <Grid.RowDefinitions>
                            <RowDefinition Height="Auto"/>
                            <RowDefinition Height="Auto"/>
                            <RowDefinition Height="*"/>
                        </Grid.RowDefinitions>                           
                        <Grid Background="{TemplateBinding Background}" CacheMode="BitmapCache"  Grid.RowSpan="3"/>
                        <Grid>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="Auto"/>
                                <ColumnDefinition />
                                <ColumnDefinition Width="Auto"/>
                            </Grid.ColumnDefinitions>
                            <Image
                                Height="45"
                                HorizontalAlignment="Left"
                                Margin="12,0,0,0"
                                VerticalAlignment="Bottom"
                                Source="/Assets/Icons/MyTasks.png" />
                            <ContentControl
                                ContentTemplate="{TemplateBinding TitleTemplate}"
                                Content="{TemplateBinding Title}"
                                Grid.Column="1"
                                HorizontalAlignment="Left"
                                Margin="10,0,0,-7"
                                VerticalAlignment="Center"
                                Style="{StaticResource PivotTitleStyle}"/>
                            <Image
                                Grid.Column="2"
                                Height="55" Margin="0,10,20,0"
                                HorizontalAlignment="Right"
                                VerticalAlignment="Bottom"
                                Source="/Assets/Icons/Settings.png"/>
                        </Grid>
                        <Primitives:PivotHeadersControl x:Name="HeadersListElement" Grid.Row="1"/>
                        <ItemsPresenter x:Name="PivotItemPresenter" Margin="{TemplateBinding Padding}"
                                        Grid.Row="2"/>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

This is my pivot code:

 <phone:Pivot Title="MY TASKS" Style="{StaticResource PivotStyle1}" >

        <!--Pivot item one-->
        <phone:PivotItem Header="all">               

        </phone:PivotItem>

        <phone:PivotItem Header="assigned">

        </phone:PivotItem>

        <phone:PivotItem Header="overdue">

        </phone:PivotItem>
    </phone:Pivot>

I want to change the color of pivot items. pivot item header "all" in red color, pivot item "assigned" in green color. I have tried to change the background, but that changes the full background. please suggest.

possible duplicate of change the color of each pivot item in windows phone 8 — ZombieSheep
@Maverick the header of each PivotItem is controlled by each item. You could create a template/style for the PivotItems and assign it to each item. In blend you can edit the PivotItemTemplate => additional templates => header template => create copy. This will create the resource for you and you should be able to take it from there — kbo4sho88

Maverick Maverick · Accepted Answer · 2013-10-29T10:52:48

This one worked for me.

 <phone:PivotItem>
            <phone:PivotItem.Header>
                <TextBlock Text="assigned" Foreground="#FF145377"></TextBlock>
            </phone:PivotItem.Header>
        </phone:PivotItem>

change the backgorund of the pivot item in windows phone 8

1 Answers