UWP:可滾動的PivotHeader

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,能夠找到以下段落:

將這一段複製出來,這時你有三個選擇:

  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啦。

相關文章
相關標籤/搜索