在UWP中更改數據透視表頭

Question

我一直在努力改變數據透視表頭背景，與Windows 10中的照片應用程序相同。但是，它只改變文本（標題）的背景，我想要改變整個背景。

<DataTemplate x:Name="PivotHeaderTemplate"> 
    <StackPanel Background="Red"> 
    <TextBlock Text="{Binding Header}" Style="{StaticResource SubtitleTextBlockStyle}"/> 
    </StackPanel> 
</DataTemplate> 

如何更改數據透視表的背景？ 謝謝！

Answer 1

我發現Responsive Pivot Headers in Universal Windows Platform apps爲我的問題的解決方案。

Answer 2

您可以編輯默認透視風格：

<x:Double x:Key="PivotTitleFontSize">15</x:Double> 
<FontWeight x:Key="PivotTitleThemeFontWeight">Bold</FontWeight> 
<Thickness x:Key="PivotLandscapeThemePadding">12,14,0,13</Thickness> 
<Thickness x:Key="PivotNavButtonBorderThemeThickness">0</Thickness> 
<Thickness x:Key="PivotNavButtonMargin">0,6,0,0</Thickness> 
<Thickness x:Key="PivotPortraitThemePadding">12,14,0,13</Thickness> 

<SolidColorBrush x:Key="PivotHeaderBackground">Red</SolidColorBrush> 

    <Style TargetType="Pivot"> 
     <Setter Property="Margin" 
       Value="0" /> 
     <Setter Property="Padding" 
       Value="0" /> 
     <Setter Property="Background" 
       Value="Transparent" /> 
     <Setter Property="IsTabStop" 
       Value="False" /> 
     <Setter Property="ItemsPanel"> 
      <Setter.Value> 
       <ItemsPanelTemplate> 
        <Grid /> 
       </ItemsPanelTemplate> 
      </Setter.Value> 
     </Setter> 
     <Setter Property="Template"> 
      <Setter.Value> 
       <ControlTemplate TargetType="Pivot"> 
        <Grid x:Name="RootElement" 
          Background="{TemplateBinding Background}" 
          HorizontalAlignment="{TemplateBinding HorizontalAlignment}" 
          VerticalAlignment="{TemplateBinding VerticalAlignment}"> 
         <Grid.Resources> 
          <Style x:Key="BaseContentControlStyle" 
            TargetType="ContentControl"> 
           <Setter Property="FontFamily" 
             Value="XamlAutoFontFamily" /> 
           <Setter Property="FontWeight" 
             Value="SemiBold" /> 
           <Setter Property="FontSize" 
             Value="15" /> 
           <Setter Property="Template"> 
            <Setter.Value> 
             <ControlTemplate TargetType="ContentControl"> 
              <ContentPresenter ContentTemplate="{TemplateBinding ContentTemplate}" 
                   ContentTransitions="{TemplateBinding ContentTransitions}" 
                   Content="{TemplateBinding Content}" 
                   HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" 
                   Margin="{TemplateBinding Padding}" 
                   OpticalMarginAlignment="TrimSideBearings" 
                   VerticalAlignment="{TemplateBinding VerticalContentAlignment}" /> 
             </ControlTemplate> 
            </Setter.Value> 
           </Setter> 
          </Style> 
          <Style x:Key="TitleContentControlStyle" 
            BasedOn="{StaticResource BaseContentControlStyle}" 
            TargetType="ContentControl"> 
           <Setter Property="FontFamily" 
             Value="{ThemeResource PivotTitleFontFamily}" /> 
           <Setter Property="FontWeight" 
             Value="{ThemeResource PivotTitleThemeFontWeight}" /> 
           <Setter Property="FontSize" 
             Value="{ThemeResource PivotTitleFontSize}" /> 
          </Style> 
         </Grid.Resources> 
         <Grid.RowDefinitions> 
          <RowDefinition Height="Auto" /> 
          <RowDefinition Height="*" /> 
         </Grid.RowDefinitions> 
         <VisualStateManager.VisualStateGroups> 
          <VisualStateGroup x:Name="Orientation"> 
           <VisualState x:Name="Portrait"> 
            <Storyboard> 
             <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Margin" 
                     Storyboard.TargetName="TitleContentControl"> 
              <DiscreteObjectKeyFrame KeyTime="0" 
                    Value="{ThemeResource PivotPortraitThemePadding}" /> 
             </ObjectAnimationUsingKeyFrames> 
            </Storyboard> 
           </VisualState> 
           <VisualState x:Name="Landscape"> 
            <Storyboard> 
             <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Margin" 
                     Storyboard.TargetName="TitleContentControl"> 
              <DiscreteObjectKeyFrame KeyTime="0" 
                    Value="{ThemeResource PivotLandscapeThemePadding}" /> 
             </ObjectAnimationUsingKeyFrames> 
            </Storyboard> 
           </VisualState> 
          </VisualStateGroup> 
          <VisualStateGroup x:Name="NavigationButtonsVisibility"> 
           <VisualState x:Name="NavigationButtonsHidden" /> 
           <VisualState x:Name="NavigationButtonsVisible"> 
            <Storyboard> 
             <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Opacity" 
                     Storyboard.TargetName="NextButton"> 
              <DiscreteObjectKeyFrame KeyTime="0" 
                    Value="1" /> 
             </ObjectAnimationUsingKeyFrames> 
             <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="IsEnabled" 
                     Storyboard.TargetName="NextButton"> 
              <DiscreteObjectKeyFrame KeyTime="0" 
                    Value="True" /> 
             </ObjectAnimationUsingKeyFrames> 
             <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Opacity" 
                     Storyboard.TargetName="PreviousButton"> 
              <DiscreteObjectKeyFrame KeyTime="0" 
                    Value="1" /> 
             </ObjectAnimationUsingKeyFrames> 
             <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="IsEnabled" 
                     Storyboard.TargetName="PreviousButton"> 
              <DiscreteObjectKeyFrame KeyTime="0" 
                    Value="True" /> 
             </ObjectAnimationUsingKeyFrames> 
            </Storyboard> 
           </VisualState> 
          </VisualStateGroup> 
          <VisualStateGroup x:Name="HeaderStates"> 
           <VisualState x:Name="HeaderDynamic" /> 
           <VisualState x:Name="HeaderStatic"> 
            <Storyboard> 
             <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" 
                     Storyboard.TargetName="Header"> 
              <DiscreteObjectKeyFrame KeyTime="0" 
                    Value="Collapsed" /> 
             </ObjectAnimationUsingKeyFrames> 
             <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" 
                     Storyboard.TargetName="StaticHeader"> 
              <DiscreteObjectKeyFrame KeyTime="0" 
                    Value="Visible" /> 
             </ObjectAnimationUsingKeyFrames> 
            </Storyboard> 
           </VisualState> 
          </VisualStateGroup> 
         </VisualStateManager.VisualStateGroups> 
         <ContentControl x:Name="TitleContentControl" 
             ContentTemplate="{TemplateBinding TitleTemplate}" 
             Content="{TemplateBinding Title}" 
             IsTabStop="False" 
             Margin="{StaticResource PivotPortraitThemePadding}" 
             Style="{StaticResource TitleContentControlStyle}" 
             Visibility="Collapsed" /> 
         <Grid Grid.Row="1"> 
          <Grid.Resources> 
           <ControlTemplate x:Key="NextTemplate" 
               TargetType="Button"> 
            <Border x:Name="Root" 
              BorderBrush="{ThemeResource SystemControlForegroundTransparentBrush}" 
              BorderThickness="{ThemeResource PivotNavButtonBorderThemeThickness}" 
              Background="{ThemeResource SystemControlBackgroundBaseMediumLowBrush}"> 
             <VisualStateManager.VisualStateGroups> 
              <VisualStateGroup x:Name="CommonStates"> 
               <VisualState x:Name="Normal" /> 
               <VisualState x:Name="PointerOver"> 
                <Storyboard> 
                 <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" 
                         Storyboard.TargetName="Root"> 
                  <DiscreteObjectKeyFrame KeyTime="0" 
                        Value="{ThemeResource SystemControlHighlightBaseMediumBrush}" /> 
                 </ObjectAnimationUsingKeyFrames> 
                 <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" 
                         Storyboard.TargetName="Arrow"> 
                  <DiscreteObjectKeyFrame KeyTime="0" 
                        Value="{ThemeResource SystemControlHighlightAltAltMediumHighBrush}" /> 
                 </ObjectAnimationUsingKeyFrames> 
                </Storyboard> 
               </VisualState> 
               <VisualState x:Name="Pressed"> 
                <Storyboard> 
                 <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" 
                         Storyboard.TargetName="Root"> 
                  <DiscreteObjectKeyFrame KeyTime="0" 
                        Value="{ThemeResource SystemControlHighlightBaseMediumHighBrush}" /> 
                 </ObjectAnimationUsingKeyFrames> 
                 <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" 
                         Storyboard.TargetName="Arrow"> 
                  <DiscreteObjectKeyFrame KeyTime="0" 
                        Value="{ThemeResource SystemControlHighlightAltAltMediumHighBrush}" /> 
                 </ObjectAnimationUsingKeyFrames> 
                </Storyboard> 
               </VisualState> 
              </VisualStateGroup> 
             </VisualStateManager.VisualStateGroups> 
             <FontIcon x:Name="Arrow" 
                Foreground="{ThemeResource SystemControlForegroundAltMediumHighBrush}" 
                FontSize="12" 
                FontFamily="{ThemeResource SymbolThemeFontFamily}" 
                Glyph="&#xE0E3;" 
                HorizontalAlignment="Center" 
                MirroredWhenRightToLeft="True" 
                UseLayoutRounding="False" 
                VerticalAlignment="Center" /> 
            </Border> 
           </ControlTemplate> 
           <ControlTemplate x:Key="PreviousTemplate" 
               TargetType="Button"> 
            <Border x:Name="Root" 
              BorderBrush="{ThemeResource SystemControlForegroundTransparentBrush}" 
              BorderThickness="{ThemeResource PivotNavButtonBorderThemeThickness}" 
              Background="{ThemeResource SystemControlBackgroundBaseMediumLowBrush}"> 
             <VisualStateManager.VisualStateGroups> 
              <VisualStateGroup x:Name="CommonStates"> 
               <VisualState x:Name="Normal" /> 
               <VisualState x:Name="PointerOver"> 
                <Storyboard> 
                 <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" 
                         Storyboard.TargetName="Root"> 
                  <DiscreteObjectKeyFrame KeyTime="0" 
                        Value="{ThemeResource SystemControlHighlightBaseMediumBrush}" /> 
                 </ObjectAnimationUsingKeyFrames> 
                 <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" 
                         Storyboard.TargetName="Arrow"> 
                  <DiscreteObjectKeyFrame KeyTime="0" 
                        Value="{ThemeResource SystemControlHighlightAltAltMediumHighBrush}" /> 
                 </ObjectAnimationUsingKeyFrames> 
                </Storyboard> 
               </VisualState> 
               <VisualState x:Name="Pressed"> 
                <Storyboard> 
                 <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" 
                         Storyboard.TargetName="Root"> 
                  <DiscreteObjectKeyFrame KeyTime="0" 
                        Value="{ThemeResource SystemControlHighlightBaseMediumHighBrush}" /> 
                 </ObjectAnimationUsingKeyFrames> 
                 <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" 
                         Storyboard.TargetName="Arrow"> 
                  <DiscreteObjectKeyFrame KeyTime="0" 
                        Value="{ThemeResource SystemControlHighlightAltAltMediumHighBrush}" /> 
                 </ObjectAnimationUsingKeyFrames> 
                </Storyboard> 
               </VisualState> 
              </VisualStateGroup> 
             </VisualStateManager.VisualStateGroups> 
             <FontIcon x:Name="Arrow" 
                Foreground="{ThemeResource SystemControlForegroundAltMediumHighBrush}" 
                FontSize="12" 
                FontFamily="{ThemeResource SymbolThemeFontFamily}" 
                Glyph="&#xE0E2;" 
                HorizontalAlignment="Center" 
                MirroredWhenRightToLeft="True" 
                UseLayoutRounding="False" 
                VerticalAlignment="Center" /> 
            </Border> 
           </ControlTemplate> 
          </Grid.Resources> 
          <ScrollViewer x:Name="ScrollViewer" 
              BringIntoViewOnFocusChange="False" 
              HorizontalSnapPointsAlignment="Center" 
              HorizontalSnapPointsType="MandatorySingle" 
              HorizontalScrollBarVisibility="Hidden" 
              Margin="{TemplateBinding Padding}" 
              Template="{StaticResource ScrollViewerScrollBarlessTemplate}" 
              VerticalSnapPointsType="None" 
              VerticalScrollBarVisibility="Disabled" 
              VerticalScrollMode="Disabled" 
              VerticalContentAlignment="Stretch" 
              ZoomMode="Disabled"> 
           <PivotPanel x:Name="Panel" 
              VerticalAlignment="Stretch"> 
            <Grid x:Name="PivotLayoutElement"> 
             <Grid.ColumnDefinitions> 
              <ColumnDefinition Width="Auto" /> 
              <ColumnDefinition Width="*" /> 
              <ColumnDefinition Width="Auto" /> 
             </Grid.ColumnDefinitions> 
             <Grid.RowDefinitions> 
              <RowDefinition Height="Auto" /> 
              <RowDefinition Height="*" /> 
             </Grid.RowDefinitions> 
             <Grid.RenderTransform> 
              <CompositeTransform x:Name="PivotLayoutElementTranslateTransform" /> 
             </Grid.RenderTransform> 
             <ContentPresenter x:Name="LeftHeaderPresenter" 
                  ContentTemplate="{TemplateBinding LeftHeaderTemplate}" 
                  Content="{TemplateBinding LeftHeader}" 
                  HorizontalAlignment="Stretch" 
                  VerticalAlignment="Stretch" /> 
             <ContentControl x:Name="HeaderClipper" 
                 Grid.Column="1" 
                 HorizontalContentAlignment="Stretch" 
                 UseSystemFocusVisuals="True"> 
              <ContentControl.Clip> 
               <RectangleGeometry x:Name="HeaderClipperGeometry" /> 
              </ContentControl.Clip> 
              <Grid Background="{StaticResource PivotHeaderBackground}"> 
               <PivotHeaderPanel x:Name="StaticHeader" 
                    Visibility="Collapsed" /> 
               <PivotHeaderPanel x:Name="Header"> 
                <PivotHeaderPanel.RenderTransform> 
                 <TransformGroup> 
                  <CompositeTransform x:Name="HeaderTranslateTransform" /> 
                  <CompositeTransform x:Name="HeaderOffsetTranslateTransform" /> 
                 </TransformGroup> 
                </PivotHeaderPanel.RenderTransform> 
               </PivotHeaderPanel> 
              </Grid> 
             </ContentControl> 
             <Button x:Name="PreviousButton" 
               Background="Transparent" 
               Grid.Column="1" 
               HorizontalAlignment="Left" 
               Height="36" 
               IsTabStop="False" 
               IsEnabled="False" 
               Margin="{ThemeResource PivotNavButtonMargin}" 
               Opacity="0" 
               Template="{StaticResource PreviousTemplate}" 
               UseSystemFocusVisuals="False" 
               VerticalAlignment="Top" 
               Width="20" /> 
             <Button x:Name="NextButton" 
               Background="Transparent" 
               Grid.Column="1" 
               HorizontalAlignment="Right" 
               Height="36" 
               IsTabStop="False" 
               IsEnabled="False" 
               Margin="{ThemeResource PivotNavButtonMargin}" 
               Opacity="0" 
               Template="{StaticResource NextTemplate}" 
               UseSystemFocusVisuals="False" 
               VerticalAlignment="Top" 
               Width="20" /> 
             <ContentPresenter x:Name="RightHeaderPresenter" 
                  ContentTemplate="{TemplateBinding RightHeaderTemplate}" 
                  Content="{TemplateBinding RightHeader}" 
                  Grid.Column="2" 
                  HorizontalAlignment="Stretch" 
                  VerticalAlignment="Stretch" /> 
             <ItemsPresenter x:Name="PivotItemPresenter" 
                 Grid.ColumnSpan="3" 
                 Grid.Row="1"> 
              <ItemsPresenter.RenderTransform> 
               <TransformGroup> 
                <TranslateTransform x:Name="ItemsPresenterTranslateTransform" /> 
                <CompositeTransform x:Name="ItemsPresenterCompositeTransform" /> 
               </TransformGroup> 
              </ItemsPresenter.RenderTransform> 
             </ItemsPresenter> 
            </Grid> 
           </PivotPanel> 
          </ScrollViewer> 
         </Grid> 
        </Grid> 
       </ControlTemplate> 
      </Setter.Value> 
     </Setter> 
    </Style> 

來源：https://msdn.microsoft.com/en-us/library/windows/apps/mt299144.aspx