Pivot HeadTemplate对齐

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>

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

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>

但是，您会注意到数据透视控件不像Android和iPhone上的标签那样有效。

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

实现您想要做的事情的最佳方法可能是使用枢轴页面顶部的按钮，并通过修改已更改的枢轴选择来手动处理它们的行为。