windows-phone-8 - 枢轴头模板对齐

Question

这是我的 Pivot 控件在我的 WP 应用程序上的外观。

这是相同的代码。

<phone:Pivot>
            <!--Pivot item one-->
            <phone:PivotItem>
                <phone:PivotItem.Header>
                    <ContentControl>
                        <Image Source="/Assets/alarmClock.png"/>
                    </ContentControl>
                </phone:PivotItem.Header>

                <Grid>
                    <TextBlock Text="hello1"/>
                </Grid>
            </phone:PivotItem>

            <!--Pivot item two-->
            <phone:PivotItem >
                <phone:PivotItem.Header>
                    <ContentControl>
                        <Image Source="/Assets/clock.png"/>
                    </ContentControl>

                </phone:PivotItem.Header>
                <Grid>
                    <TextBlock Text="hello 2"/>
                </Grid>
            </phone:PivotItem>

            <!--Pivot item three-->
            <phone:PivotItem>
                <phone:PivotItem.Header>
                    <ContentControl>
                        <Image Source="/Assets/timer.png"/>
                    </ContentControl>

                </phone:PivotItem.Header>
                <Grid>
                    <TextBlock Text="hello 3"/>
                </Grid>
            </phone:PivotItem>
        </phone:Pivot>

我想自定义标题的外观。这就是我希望标题自行对齐的方式（见下图）。我不知道该怎么做。下面是我希望它与黑色网格和垂直管道的外观。谁能帮我这个 ？我想我将不得不为此写一个样式。但是，我不知道我可以通过哪种方式定义样式，以便按照以下方式更改对齐方式。

Answer 1

更接近您想要实现的目标是不费吹灰之力：

<phone:PhoneApplicationPage.Resources>
    <DataTemplate x:Key="PivotHeader">
        <Grid Margin="-11,0,-11,0">
            <Border BorderBrush="#FFF70000" BorderThickness="1">
                <Grid Width="152" HorizontalAlignment="Center">
                    <Image Height="80" Source="{Binding}"></Image>
                </Grid>
            </Border>
        </Grid>
    </DataTemplate>

</phone:PhoneApplicationPage.Resources>

<!--LayoutRoot is the root grid where all page content is placed-->
<Grid x:Name="LayoutRoot" Background="Transparent">
    <!--Pivot Control-->
    <phone:Pivot HeaderTemplate="{StaticResource PivotHeader}">
        <phone:PivotItem Header="/Assets/Clock.png">
            <Grid>
                <TextBlock Text="hello 1"/>
            </Grid>
        </phone:PivotItem>

        <phone:PivotItem Header="/Assets/Clock.png">
            <Grid>
                <TextBlock Text="hello 2"/>
            </Grid>
        </phone:PivotItem>

        <phone:PivotItem Header="/Assets/Clock.png">
            <Grid>
                <TextBlock Text="hello 3"/>
            </Grid>
        </phone:PivotItem>

    </phone:Pivot>
</Grid>

但是，您会注意到 Pivot Control 不像Android和iPhone上的选项卡那样工作。

我也不建议更改 Windows Phone 中枢轴控件的行为。

也许实现您想要做的最好的方法是使用数据透视页面顶部的按钮并通过修改数据透视选择更改来手动处理它们的行为。