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

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

巴特西

Pivot-Header的花式效果

最新文章

热门文章