在 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=""
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=""
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 可以解决我的问题。
我一直在努力改变 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=""
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=""
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 可以解决我的问题。