c# - EditTemplate of Pivot

Question

我有一个申请页面。在此页面中，我有 2 个主要控件。它们是图像和枢轴控制。我想将页面设计为：

https://onedrive.live.com/redir?resid=C375ECE2AD56F56F%216996

在我的页面中，蓝色部分覆盖图像（应用程序徽标），第一部分（白色部分）覆盖 Pivot。Pivot 的 Header 对齐缩进约 120px。

我不知道如何在 WP 中制作此页面。

请大家帮帮我！

非常感谢。

Answer 1

您可以使用 Pivot Control 的 HeaderTemplate。

<phone:Pivot.HeaderTemplate>
    <DataTemplate>
        <Grid>
            <TextBlock Text="{Binding}" FontSize="{StaticResource PhoneFontSizeExtraLarge}"/>
        </Grid>
    </DataTemplate>
</phone:Pivot.HeaderTemplate>

除了文本之外，您还必须在其旁边添加您的徽标。您可以使用 Grid 将图像放在文本左侧或使用带有水平内容的堆栈面板。

更新：忘记提及页面顶部声明的“电话”命名空间：

<phone:PhoneApplicationPage
...
xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
...>

Answer 2

希望，这可能对你有用。根据您的要求对其进行修改。

<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
        <phone:Pivot>
            <phone:Pivot.HeaderTemplate>
                <DataTemplate>
                    <StackPanel Background="Blue"
                                Margin="15,-10,0,0">
                        <TextBlock Text="{Binding}"
                                   FontSize="20"
                                   />
                    </StackPanel>
                </DataTemplate>
            </phone:Pivot.HeaderTemplate>
            <phone:PivotItem Header="item1">
                <Grid Background="Red"></Grid>
            </phone:PivotItem>
            <phone:PivotItem Header="item2">
                <Grid Background="Green"></Grid>
            </phone:PivotItem>
        </phone:Pivot> 
        <Image Source="/Assets/abc.png"
               Height="30"
               Width="30"
               HorizontalAlignment="Left"
               VerticalAlignment="Top"/>
    </Grid>