要实现如上图所示的效果分为三步：
1.重写Pivot样式，去掉Pivot的Header或者是直接使用默认的Pivot的样式然后不写Header
2.使用一个ListView或者是横向的StackPanel或者是横向的Grid加上一个Button代替Header的效果（我使用的是Grid，建议使用ListView）
3.在Pivot的SelelctionChanged事件中以及当做Header的Button的Click事件做一个同步
首先Pivot的Item你想放什么就放什么
然后就是代替Header的问题：我用的Grid套了5个Button
<Grid Grid.Row="" x:Name="TopBar" Background="#FDF187">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="2*"/>
<ColumnDefinition Width="2*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Button x:Name="Header0" Style="{StaticResource GrayLightButton}"
Background="Transparent" Grid.Column="" Content="设置" FontFamily="Segoe MDL2 Assets,Segoe UI"
FontSize="" HorizontalAlignment="Center" VerticalAlignment="Center" Click="Header0_Click"/>
<Button x:Name="Header1" Style="{StaticResource GrayLightButton}"
Background="Transparent" Grid.Column="" Content="鸣谢" FontFamily="Segoe MDL2 Assets,Segoe UI"
FontSize="" HorizontalAlignment="Center" VerticalAlignment="Center" Click="Header1_Click"/>
<Button x:Name="Header2" Style="{StaticResource GrayLightButton}"
Background="Transparent" Grid.Column="" Content="开源与引用" FontFamily="Segoe MDL2 Assets,Segoe UI"
FontSize="" HorizontalAlignment="Center" VerticalAlignment="Center" Click="Header2_Click"/>
<Button x:Name="Header3" Style="{StaticResource GrayLightButton}"
Background="Transparent" Grid.Column="" Content="更新记录" FontFamily="Segoe MDL2 Assets,Segoe UI"
FontSize="" HorizontalAlignment="Center" VerticalAlignment="Center" Click="Header3_Click"/>
<Button x:Name="Header4" Style="{StaticResource GrayLightButton}"
Background="Transparent" Grid.Column="" Content="关于" FontFamily="Segoe MDL2 Assets,Segoe UI"
FontSize="" HorizontalAlignment="Center" VerticalAlignment="Center" Click="Header4_Click"/>
</Grid>
最后就是在后台代码中实现PivotItem与Grid的同步：
Pivot的SelelctionChanged事件实现Button的文字和颜色切换
private void Pivot_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
Header0.Content = "设置";
Header0.FontSize = ;
Header0.Foreground = new SolidColorBrush(Color.FromArgb(, , , ));
Header1.Content = "鸣谢";
Header1.FontSize = ;
Header1.Foreground = new SolidColorBrush(Color.FromArgb(, , , ));
Header2.Content = "开源与引用";
Header2.FontSize = ;
Header2.Foreground = new SolidColorBrush(Color.FromArgb(, , , ));
Header3.Content = "更新记录";
Header3.FontSize = ;
Header3.Foreground = new SolidColorBrush(Color.FromArgb(, , , ));
Header4.Content = "关于";
Header4.FontSize = ;
Header4.Foreground = new SolidColorBrush(Color.FromArgb(, , , ));
switch (pivot.SelectedIndex)
{
case :
Header0.Content = "";//Segoe MDL2 Assets图标
Header0.FontSize = ;
Header0.Foreground = new SolidColorBrush(Color.FromArgb(, , , ));
break;
case :
Header1.Content = "";//Segoe MDL2 Assets图标
Header1.FontSize = ;
Header1.Foreground = new SolidColorBrush(Color.FromArgb(, , , ));
break;
case :
Header2.Content = "";//Segoe MDL2 Assets图标
Header2.FontSize = ;
Header2.Foreground = new SolidColorBrush(Color.FromArgb(, , , ));
break;
case :
Header3.Content = "";//Segoe MDL2 Assets图标
Header3.FontSize = ;
Header3.Foreground = new SolidColorBrush(Color.FromArgb(, , , ));
break;
case :
Header4.Content = "";//Segoe MDL2 Assets图标
Header4.FontSize = ;
Header4.Foreground = new SolidColorBrush(Color.FromArgb(, , , ));
break;
}
}
然后就是点击Button实现PivotItem的切换
以第一个Button举个栗子，以此类推
private void Header0_Click(object sender, RoutedEventArgs e)
{
pivot.SelectedIndex = ;
pivot.SelectedItem = pivot.Items[];
}
就这样就可以实现如上效果了。
还可以做一个扩展：在Grid中Button下面加一扁扁的矩形，然后后台代码处理矩形的隐藏和出现，可以实现更加好看的效果。
抛砖引玉，如有更炫酷的方法请联系我~