頁面內容在使用模板時流過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