在 UWP 中更改枢轴 Header

Change Pivot Header in UWP

我一直在努力改变 pivot header 背景,就像 Windows 10 中的照片应用程序一样。但是,它只改变文本的背景 (header),什么我要的是把整个背景换掉。

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

如何改变枢轴的背景header? 谢谢!

您可以编辑默认的透视样式:

<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

我发现 Responsive Pivot Headers in Universal Windows Platform apps 可以解决我的问题。