Pivot-Header的花式效果

要实现如上图所示的效果分为三步：

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下面加一扁扁的矩形，然后后台代码处理矩形的隐藏和出现，可以实现更加好看的效果。

抛砖引玉，如有更炫酷的方法请联系我~