页面内容在使用模板时流过PivotItem标题

Question

我使用了Blend来修改我的透视项目标题的模板。结果看起来不错，但我不理解最终的标记。

当我将数据绑定到我的数据透视项时，出现问题，因为它看起来漂浮在标题上。我可以通过设置边距来解决这个问题，但不是为每个数据透视表项都做这件事，而是希望了解样式标记并希望将其修复。

<Style x:Key="PivotStyle1" TargetType="controls:Pivot"> 
<Setter Property="Margin" Value="0"/> 
<Setter Property="Padding" Value="0"/> 
<Setter Property="Background" Value="White"/> 
<Setter Property="ItemsPanel"> 
    <Setter.Value> 
     <ItemsPanelTemplate> 
      <Grid/> 
     </ItemsPanelTemplate> 
    </Setter.Value> 
</Setter> 
<Setter Property="Template"> 
    <Setter.Value> 
     <ControlTemplate TargetType="controls:Pivot"> 
      <Grid HorizontalAlignment="{TemplateBinding HorizontalAlignment}" VerticalAlignment="{TemplateBinding VerticalAlignment}"> 
       <Grid.RowDefinitions> 
        <RowDefinition Height="Auto"/> 
        <RowDefinition Height="Auto"/> 
        <RowDefinition Height="*"/> 
       </Grid.RowDefinitions> 
       <Grid CacheMode="BitmapCache" Grid.RowSpan="2" > 
        <Grid.Background> 
         <LinearGradientBrush EndPoint="0.5,1" MappingMode="RelativeToBoundingBox" StartPoint="0.5,0"> 
          <GradientStop Color="#FFD7E9F1"/> 
          <GradientStop Color="#FF1BA1E2" Offset="1"/> 
         </LinearGradientBrush> 
        </Grid.Background> 
       </Grid> 
       <Grid Background="{TemplateBinding Background}" CacheMode="BitmapCache" Grid.Row="2" /> 
       <ContentPresenter ContentTemplate="{TemplateBinding TitleTemplate}" 
        Content="{TemplateBinding Title}" Margin="24,17,0,-7"/> 
       <controlsPrimitives:PivotHeadersControl x:Name="HeadersListElement" Grid.Row="1" Foreground="White" /> 
       <ItemsPresenter x:Name="PivotItemPresenter" Margin="0,2,0,8" Grid.RowSpan="3"/> 
      </Grid> 
     </ControlTemplate> 
    </Setter.Value> 
</Setter> 

设定Pivot.HeaderTemplate肖恩下面表明要简单得多，但是在标题项目之间的背景颜色的间隙的效果。

<controls:Pivot> 
     <controls:Pivot.HeaderTemplate> 
      <DataTemplate> 
       <StackPanel> 
        <StackPanel.Background> 
         <LinearGradientBrush EndPoint="0.5,1" MappingMode="RelativeToBoundingBox" StartPoint="0.5,0"> 
          <GradientStop Color="#FFD7E9F1"/> 
          <GradientStop Color="#FF1BA1E2" Offset="1"/> 
         </LinearGradientBrush> 
        </StackPanel.Background> 

        <TextBlock Text="{Binding}" FontSize="{StaticResource PhoneFontSizeExtraExtraLarge}" Foreground="White" /> 

       </StackPanel> 
      </DataTemplate> 
     </controls:Pivot.HeaderTemplate> 

Answer 1

如果你只是想修改标题，只需修改页眉

<controls:Pivot> 
    <controls:Pivot.HeaderTemplate> 
     <DataTemplate> 
      <TextBlock Text="{Binding}" FontSize="{StaticResource PhoneFontSizeExtraExtraLarge}" 
         Margin="24,17,0,-7" Foreground="White" /> 
     </DataTemplate> 
    </controls:Pivot.HeaderTemplate> 
    <controls:PivotItem Title="item one"/> 
</controls:Pivot> 

根据您最新的更新，我看你想要做什么。以下添加到您的网页资源

  <Style TargetType="controlsPrimitives:PivotHeadersControl"> 
       <Setter Property="Template"> 
        <Setter.Value> 
         <ControlTemplate TargetType="controlsPrimitives:PivotHeadersControl"> 
          <Grid> 
           <Grid.Background> 
            <LinearGradientBrush EndPoint="0.5,1" MappingMode="RelativeToBoundingBox" StartPoint="0.5,0"> 
             <GradientStop Color="#FFD7E9F1"/> 
             <GradientStop Color="#FF1BA1E2" Offset="1"/> 
            </LinearGradientBrush> 
           </Grid.Background> 
           <Canvas x:Name="Canvas"> 
            <ItemsPresenter/> 
           </Canvas> 
          </Grid> 
         </ControlTemplate> 
        </Setter.Value> 
       </Setter> 
      </Style> 

你需要以下命名空间中定义

xmlns:controlsPrimitives="clr-namespace:Microsoft.Phone.Controls.Primitives;assembly=Microsoft.Phone.Controls" 

因此，更多的信息在我的博客www.VisuallyLocated.com