EditTemplate of Pivot答案

【问题标题】：EditTemplate of PivotEditTemplate of Pivot
【发布时间】：2014-04-16 11:22:18
【问题描述】：

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

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

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

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

请大家帮帮我！

非常感谢。

【问题讨论】：

当枢轴项目改变时，您希望徽标是静态的还是可移动的？或者你想要每个数据透视项目上的标志？
是的，我想要静态徽标。与此应用相同：windowsphone.com/en-us/store/app/money-lover/… 但徽标的 Magin = (12,12,12,12) 而不是 (0,0,0,0)。

标签： c# windows-phone-8 pivot itemtemplate pivotitem

【解决方案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"
...>

【讨论】：

我希望标志是静态的，同：windowsphone.com/en-us/store/app/money-lover/…
我不明白，如果你应用这个，一切都是静态的。
我的想法是徽标不是 Pivot 的组件。徽标的左边距为 12，右边距为 12。当我们滚动 Pivot 时，标题不在徽标下方。同情我，因为我的英语很糟糕，我是越南人。
您不应滚动枢轴，而应仅滚动枢轴项目内容（例如 LongListSelector）。这样，您将始终看到数据透视表头和您的图标。从用户体验来看，枢轴应始终可见。

【解决方案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>

【讨论】：

这是我使用代码时的结果。 onedrive.live.com/…
您好，我看到了您应用的屏幕截图。如果您在应用程序页面中实现了上述代码，则设置页眉模板 StackPanel 的边距。如果您觉得这有帮助，请将其标记为答案。
我认为您的回答对我的问题没有帮助。因为我只希望 Pivot 的表头对齐缩进一个空格。这意味着当我们滚动 Pivot 时，pivot 的标题不在 logo 下方。