不幸的是,要实现这一点,需要进行很多样式设置。首先,您需要为 Pivot 创建一个样式。最好使用 Expression Blend 执行此操作。
<Style x:Key="PivotStyle1" TargetType="controls:Pivot">
<Setter Property="Margin" Value="0"/>
<Setter Property="Padding" Value="0"/>
<Setter Property="Foreground" Value="{StaticResource PhoneForegroundBrush}"/>
<Setter Property="Background" Value="Transparent"/>
<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 Background="{TemplateBinding Background}" CacheMode="BitmapCache" Grid.RowSpan="3"/>
<ContentPresenter ContentTemplate="{TemplateBinding TitleTemplate}" Content="{TemplateBinding Title}" Margin="24,17,0,-7"/>
<controlsPrimitives:PivotHeadersControl x:Name="HeadersListElement" Grid.Row="1"/>
<ItemsPresenter x:Name="PivotItemPresenter" Margin="{TemplateBinding Padding}" Grid.Row="2"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
请注意,其中有一个样式PivotHeadersControl
。此控件是一个 TemplatedItemsControl 类型PivotHeaderItem
。这个 PivotHeaderItem 是我们需要设置的样式。您可以设置该ItemContainerStyle
属性以根据标题的状态更改标题的外观。
<Style x:Key="PivotHeaderItemStyle1" TargetType="controlsPrimitives:PivotHeaderItem">
<Setter Property="Background" Value="Transparent"/>
<Setter Property="Padding" Value="21,0,1,0"/>
<Setter Property="CacheMode" Value="BitmapCache"/>
<Setter Property="Margin" Value="0"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="controlsPrimitives:PivotHeaderItem">
<Grid>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="SelectionStates">
<VisualState x:Name="Unselected">
<Storyboard>
<ColorAnimation Duration="0" Storyboard.TargetName="contentPresenter"
Storyboard.TargetProperty="(TextBlock.Foreground).(SolidColorBrush.Color)" To="Gray"/>
</Storyboard>
</VisualState>
<VisualState x:Name="Selected">
<Storyboard>
<DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="contentPresenter"/>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<TextBlock x:Name="contentPresenter"
Text="{TemplateBinding Content}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
Foreground="{StaticResource PhoneAccentBrush}"
Margin="{TemplateBinding Padding}" Opacity=".4"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
我已将默认样式修改为使用 TextBlock 而不是 ContentPresenter。这允许您从 Unselected 状态情节提要中设置前景。
确保将 Pivot 的 Style 设置为 PivotStyle1,并且 PivotHeadersControl 的 ItemContainerStyle 设置为 PivotHeaderItemStyle1。您还需要对其进行一些修改,以按照您想要的方式调整大小。