枢轴标题区域和内容区域的独特背景颜色

Question

我正在开发 Windows Phone 8.1 Silverlight 应用程序。我目前有一个带有 Pivot 控件的页面，它是这样的：

<phone:PhoneApplicationPage
    x:Class="SomeApp.TestPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
    xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"
    Foreground="{StaticResource PhoneForegroundBrush}"
    SupportedOrientations="Portrait"  Orientation="Portrait"
    shell:SystemTray.IsVisible="True">

    <Grid x:Name="LayoutRoot" Background="Chocolate">
        <phone:Pivot Title="DC UNIVERSE" Background="Chocolate">
            <phone:PivotItem x:Name="Batman" Header="Batman">
                <Grid x:Name="BatmanCharacterListPanel" Background="Beige">
                    <!--Some Content Here-->
                </Grid>
            </phone:PivotItem>
            <phone:PivotItem x:Name="Superman" Header="Superman">
                <Grid x:Name="SupermanCharacterListPanel" Background="Beige">
                    <!--Some Content Here-->
                </Grid>
            </phone:PivotItem>
        </phone:Pivot>
    </Grid>

</phone:PhoneApplicationPage>

当我在两个 Pivot 项目之间切换时，页面之间会显示背景色。我不要那个。我希望流程是一种连续的米色。简而言之，我希望 Pivot 在滑动过程中 "look" 像全景图一样。

我的问题的另一种表达方式是如何单独为 Pivot Control 的 header 区域设置背景颜色并为内容区域设置不同的颜色？

Answer 1

发生这种情况是因为您设置了整个 Pivot 的背景。当然，在未加载内容之前，您会看到该背景色。因此，您应该为 Pivot Title 和 PivotItem Header 应用背景色。你应该看看这个 post 来实现这个： http://irisclasson.com/2015/01/03/changing-the-pivot-header-template-in-windows-phone-8-and-windows-phone-winrt/

Answer 2

您可以设置枢轴本身的颜色

<Pivot Background="Beige">
</Pivot>

然后要设置 header 的颜色，您可以为

设置样式

<Style TargetType="controlsPrimitives:PivotHeadersControl">
    <Setter Property="Template">
         <Setter.Value>
             <ControlTemplate TargetType="controlsPrimitives:PivotHeadersControl">
                 <Grid Background="Red">
                     <Canvas x:Name="Canvas">
                         <ItemsPresenter/>
                     </Canvas>
                 </Grid>
             </ControlTemplate>
         </Setter.Value>
    </Setter>
</Style>

您可以在 http://visuallylocated.com/post/2012/05/23/Changing-the-background-color-of-your-pivot-headers.aspx

找到有关设置 header 背景的更多详细信息

枢轴标题区域和内容区域的独特背景颜色

Unique background colours for pivot title area and content area

xaml

silverlight

windows-phone-8

windows-phone-8.1