UWP：可滾動的PivotHeader

UWP開發裏，Pivot真是個使人又愛又恨的控件。爲了實現某些可滾動Header的效果，有些大佬甚至去掉了本來的Header，使用一個ListView或者ListBox本身畫Header，不過這樣會讓控件變得很複雜。

既然Pivot是一個模板化控件，那麼應該有方法直接讓Header能夠滾動。

先貼效果圖：

先自定義Pivot的Style，從generic.xaml找（位置應該在C:\Program Files (x86)\Windows Kits\10\DesignTime\CommonConfiguration\Neutral\UAP\(你的SDK版本)\Generic），或者在xaml設計器裏右鍵，編輯Style也能夠。

找到Style中的<VisualStateGroup x:Name="NavigationButtonsVisibility">，到</VisualStateGroup>，包括這兩行，所有註釋掉，就能夠取消左右兩側的按鈕。

 分析一下，Pivot有兩個狀態：

當HeaderPanel寬度小於Pivot寬度的時候，也就是Headers不溢出的時候，Header的位置是固定的；

當HeaderPanel寬度大於Pivot寬度的時候，也就是Headers溢出的時候，被選中的Header會被移動到第一位。

觀察一下Style能夠得知，這個是HeaderStates這個VisualStateGroup控制的，因此和上面同樣，註釋掉HeaderStates這個VisualStateGroup，這樣就取消了動態Header和固定Header的狀態轉換。

而後往下找，找到<PivotHeaderPanel x:Name="Header" >到</PivotHeaderPanel>，所有註釋掉，這是動態的Header，咱們只須要靜態的。

而後把<PivotHeaderPanel x:Name="StaticHeader">的Visibility改爲Visible，這樣就默認使用靜態的Header，即便Headers溢出也不會本身移動。

最後，在PivotHeaderPanel外面的Grid外面套一層ScrollViewer，代碼會變成下面的樣子：

 

<ScrollViewer ScrollViewer.HorizontalScrollBarVisibility="Hidden" ScrollViewer.HorizontalScrollMode="Enabled" ScrollViewer.VerticalScrollBarVisibility="Disabled" ScrollViewer.VerticalScrollMode="Disabled" >
    <Grid Background="{ThemeResource PivotHeaderBackground}">
        <Grid.RenderTransform>
            <CompositeTransform x:Name="HeaderOffsetTranslateTransform" />
        </Grid.RenderTransform>
        <PivotHeaderPanel x:Name="StaticHeader" Visibility="Visible" >
            <PivotHeaderPanel.RenderTransform>
                <CompositeTransform x:Name="StaticHeaderTranslateTransform"/>
            </PivotHeaderPanel.RenderTransform>
        </PivotHeaderPanel>
        <!--<PivotHeaderPanel x:Name="Header" >
            <PivotHeaderPanel.RenderTransform>
                <CompositeTransform x:Name="HeaderTranslateTransform"/>
            </PivotHeaderPanel.RenderTransform>
        </PivotHeaderPanel>-->
    </Grid>
</ScrollViewer>

 

運行一下試試看，Header是否是能夠使用鼠標滾輪左右滾動了。

 

至此，本文就已經能夠結束了。不過有人可能會問，爲何你的Pivot會有下面的Focus，個人就沒有呢？請接着往下看：

從xaml設計器貼出來的Pivot的Style裏，並無Header相關的，Selected、Unselected之類的VisualState，是微軟忘了寫？其實並非。

若是你和ItemsControl常常打交道，你會發現ListView、GridView之類的控件都有個ItemContainerStyle屬性，控制Items的容器的Style，通常來講Select之類的VisualState都在這裏面，但是Pivot並無提供Header的ItemContainerStyle啊？

其實PivotHeaderItemContainerStyle也是有的，只是微軟沒有直接提供給咱們，須要手動從文件裏複製一下，而且用一些很是規的方式使其生效。

首先打開generic.xaml，，在裏面全局搜索PivotHeaderItem，能夠找到以下段落：

將這一段複製出來，這時你有三個選擇：

1. 若是你自定義了Pivot的Style，請將這段放在<ControlTemplate TargetType="Pivot"> <Grid x:Name="RootElement" ...><Grid.Resource>(放在這裏)</Grid.Resource>。
2. 若是沒有自定義Style，請將這段放在<Pivot><Pivot.Resource>(放在這裏)</Pivot.Resource>
3. 單獨寫在資源字典或者Page.Resource或者Application.Resource裏，把x:Key設置爲PivotHeaderItemContainerStyle，而後在如上兩個位置寫<Style TargetType="PivotHeaderItem" BaseOn="{StaticResource PivotHeaderItemContainerStyle}">

注意：對於最終生效的Style（一、2和3中帶BaseOn的Style），不要設置x:Key和x:Name！（不設置x:Key和x:Name的Style資源，會應用給他的全部TargetType匹配的子控件。）

這樣咱們就能夠自定義PivotHeaderItemContainerStyle了。

而後找到<VisualStateGroup x:Name="SelectionStates">，在裏面的Selected，SelectedPointerOver，SelectedPressed的Storyboard中加入以下的段落：

<ObjectAnimationUsingKeyFrames Storyboard.TargetName="FocusPipe" Storyboard.TargetProperty="Visibility">
    <DiscreteObjectKeyFrame KeyTime="0" Value="Visible" />
</ObjectAnimationUsingKeyFrames>

這樣再運行，就能夠在Header被選中的時候顯示下面的Focus啦。