无法更改与Windows Phone 8中的透视图项不同的透视图的前景色

Question

Purpose

I want to change my phone pivot and pivot item to be different foreground color from each other; I want pivot to be white and pivot item to be pink foreground color.

Problem

When I tried to change the pivot foreground color to white, the all the pivot items inside that pivot will take the same foreground color as their parent pivot no matter what foreground color I assigned to pivot items.

My code

Here are my design in xmal file:

<phone:Pivot Title="SKIN TEST" Foreground="#000000" Margin="-10,-30,0,0">
            <phone:PivotItem Header="product" Margin="10,37,14,-9">

                <Grid>
                    <!-- Title product detail -->
                    <ScrollViewer Height="Auto" Margin="32,-71,-22,91" Foreground="#000000">
                        <StackPanel>
                            <TextBlock FontSize="26" x:Name="txtbPro_Name" HorizontalAlignment="Left" Margin="10,10,0,0" TextWrapping="Wrap" Text="{Binding ItemDryName}" VerticalAlignment="Top" RenderTransformOrigin="0.254,-0.205" Height="auto" Width="414" MaxWidth="440" MaxHeight="240"/>
                            <!-- Image product detail -->
                            <Image x:Name="img_Product" HorizontalAlignment="Left" Height="220" Margin="10,10,0,0" VerticalAlignment="Top" Width="220" Source="{Binding ItemDryImage}"/>
                            <!-- Ingredient product detail -->
                            <TextBlock HorizontalAlignment="Left" Margin="10,30,0,0" TextWrapping="Wrap" Text="Ingredient"  Foreground="#000000" VerticalAlignment="Top" RenderTransformOrigin="-1.887,-1.756" Height="36" Width="412" FontSize="24"/>
                            <TextBlock x:Name="txtb_ingridient" HorizontalAlignment="Left" Margin="10,15,0,30" TextWrapping="Wrap"  Foreground="#000000" VerticalAlignment="Top" Height="auto" Width="412" FontSize="24"/>

                        </StackPanel>
                    </ScrollViewer>
                </Grid>

            </phone:PivotItem>

            <phone:PivotItem Header="description">
                <Grid>
                    <!-- Description of product detail -->
                    <ScrollViewer Height="Auto" Margin="10,0,0,-315" Foreground="#000000">
                        <StackPanel>
                            <TextBlock x:Name="txtb_description1" Text="" TextWrapping="Wrap" Width="auto"  FontSize="24"/>
                            <Line Width="100" Height="10"/>
                            <TextBlock x:Name="txtb_description2" Text="" TextWrapping="Wrap" Width="auto" FontSize="24"/>
                        </StackPanel>
                    </ScrollViewer>
                </Grid>
            </phone:PivotItem>

            <phone:PivotItem Header="how to use">
                <Grid>
                    <!-- How to use of product detail-->
                    <TextBlock x:Name="txtb_howToUse" HorizontalAlignment="Left" Margin="10,0,0,0" TextWrapping="Wrap" Foreground="#000000" FontSize="24" 
                               Text="Lorem ipsum dolor sit amet, consectetur adipiscing elit.  " VerticalAlignment="Top" Height="593" Width="auto"/>
                </Grid>
            </phone:PivotItem>
        </phone:Pivot>

How can I make it different? Do I need to apply any static resource and style on each pivot??

Answer 1

I tried your code and I can't see what is what you want to do exactly or your problem. phone:Pivot foreground is for the Main title of the pivot if I set it to pink, only that title changes. The pivotItem foreground gives color to the content inside it (not the header!), but the you should remove the foregound color in the scrollviewer to si the changes. Is your problem with the header?