UWP開發裏,Pivot真是個使人又愛又恨的控件。爲了實現某些可滾動Header的效果,有些大佬甚至去掉了本來的Header,使用一個ListView或者ListBox本身畫Header,不過這樣會讓控件變得很複雜。spa
既然Pivot是一個模板化控件,那麼應該有方法直接讓Header能夠滾動。設計
先貼效果圖:code
先自定義Pivot的Style,從generic.xaml找(位置應該在C:\Program Files (x86)\Windows Kits\10\DesignTime\CommonConfiguration\Neutral\UAP\(你的SDK版本)\Generic),或者在xaml設計器裏右鍵,編輯Style也能夠。orm
找到Style中的<VisualStateGroup x:Name="NavigationButtonsVisibility">,到</VisualStateGroup>,包括這兩行,所有註釋掉,就能夠取消左右兩側的按鈕。blog
分析一下,Pivot有兩個狀態:ip
當HeaderPanel寬度小於Pivot寬度的時候,也就是Headers不溢出的時候,Header的位置是固定的;資源
當HeaderPanel寬度大於Pivot寬度的時候,也就是Headers溢出的時候,被選中的Header會被移動到第一位。開發
觀察一下Style能夠得知,這個是HeaderStates這個VisualStateGroup控制的,因此和上面同樣,註釋掉HeaderStates這個VisualStateGroup,這樣就取消了動態Header和固定Header的狀態轉換。get
而後往下找,找到<PivotHeaderPanel x:Name="Header" >到</PivotHeaderPanel>,所有註釋掉,這是動態的Header,咱們只須要靜態的。it
而後把<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,能夠找到以下段落:
將這一段複製出來,這時你有三個選擇:
注意:對於最終生效的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啦。