吸頂大法 -- UWP中的工具欄吸頂的實現方式之一

如果一個頁面中有很長的列表/內容，很多應用都會在用戶向下滾動時隱藏頁面的頭，給用戶留出更多的閱讀空間，同時提供一個方便的吸頂工具欄，比如淘寶中的店鋪頁面。

下面是一個比較簡單的實現，如果有同學有更好的實現，歡迎留言，讓我們共同進步。

首先假設我們的頁面整體包含3部分;

1.     頁面頭：隨頁面滾動慢慢消失/重現
2.     工具欄: 開始時隨頁面滾動，在頁面頭消失后，吸頂，固定不動
3.     可滾動內容：一個listview

結構代碼如下，為了區別清楚，我是用不同的背景色做區分：

<Page
    x:Class="App3.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:App3"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <Page.Resources>
        <Style TargetType="ListViewItem">
            <!-- 讓listview item拉伸 -->
            <Setter Property="HorizontalContentAlignment" Value="Stretch"></Setter>
        </Style>
    </Page.Resources>

    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <Grid.RowDefinitions>
            <!-- 頭部高 -->
            <RowDefinition Height="120" x:Name="headerRow"></RowDefinition>
            <!-- 工具欄高 -->
            <RowDefinition Height="48"></RowDefinition>
            <!-- 其余內容 -->
            <RowDefinition Height="*"></RowDefinition>
        </Grid.RowDefinitions>

        <!-- 頭部定義 -->
        <Grid Background="LightGray" x:Name="head" Grid.Row="0">
            <StackPanel Orientation="Horizontal"
                            HorizontalAlignment="Left"
                            VerticalAlignment="Center"
                            Margin="12, 0, 0, 0">
                <Image Source="http://img.alicdn.com/tps/i4/TB12mhwHVXXXXctXVXXAAT2HVXX-63-63.png"
                           Width="80"
                           Height="80"></Image>

                <TextBlock HorizontalAlignment="Left"
                               VerticalAlignment="Center"
                               Margin="12, 0, 0, 0">這是個測試</TextBlock>
            </StackPanel>
        </Grid>

        <!-- 工具欄定義 -->
        <Grid Grid.Row="1" Background="DarkGray">
            <StackPanel Orientation="Horizontal">
                <HyperlinkButton Margin="18, 0, 0, 0">按鈕1</HyperlinkButton>
                <HyperlinkButton Margin="12,0, 0, 0">按鈕2</HyperlinkButton>
            </StackPanel>
        </Grid>

        <!-- 內容部分 -->
        <ScrollViewer x:Name="scroller" Grid.Row="2" ViewChanged="scroller_ViewChanged">
            <ListView x:Name="list" ScrollViewer.HorizontalScrollMode="Disabled"
                      ScrollViewer.VerticalScrollMode="Disabled">
                <ListView.ItemTemplate>
                    <DataTemplate>
                        <Grid Height="120" Background="LightGoldenrodYellow">
                            <TextBlock Text="{Binding}"></TextBlock>
                        </Grid>
                    </DataTemplate>
                </ListView.ItemTemplate>
            </ListView>
        </ScrollViewer>
    </Grid>
</Page>

 

效果如下圖：

接下來我們需要在ScrollViewer.ViewChanged事件中處理滾動事件，將頁面頭部分慢慢的隱藏，知道高度為0，進而模擬出工具欄吸頂的狀態，同學們可以在腦子里想象一下這個場景(●’◡’●)。但是由於在XAML中我們使用了RowDefinition定義的頭部高度，所以就不能直接修改控件高度了，而是要動態修改這個RowDefinition的高度（我之前也不知道這貨也是可以動態修改的，也是看了其他同學的code學到的）。

public sealed partial class MainPage : Page  2  {  3         public List<string> Items { get; set; } = Enumerable.Repeat("this is a test item", 30).ToList();  4 
        public MainPage()  6  {  7             this.InitializeComponent();  8 
            this.Loaded += MainPage_Loaded; 10  } 11 
        private void MainPage_Loaded(object sender, RoutedEventArgs e) 13  { 14             this.list.ItemsSource = this.Items; 15  } 16 
        private void scroller_ViewChanged(object sender, ScrollViewerViewChangedEventArgs e) 18  { 19             //得到scrollerview的滾動高度
            var verticalOffset = scroller.VerticalOffset; 21 
            //計算當前header應該顯示的高度
            var delta = _headerDefaultHeight - verticalOffset; 24 
            //高一定大於0！！！
            headerRow.Height = new GridLength(delta < 0 ? 0 : delta); 27  } 28 
        // 為了方便這里hard code，也可以從行定義中取得
        double _headerDefaultHeight = 120D; 31 }

一個簡單的頭部隱藏，工具欄吸頂的小功能就實現了。

但是如果你仔細觀察，頭部在消失的過程中，布局有變化，強迫症表示好難受啊。

為了解決這個問題，首先讓我們分析原因，其實很簡單，因為在代碼中一直在動態的修改頭的高度，而頭部控件中都是動態的布局。為了怎么解決這個問題呢？簡單一點就是修改margin，既然是因為高度變化了導致布局變化，那么我們就讓可顯示區域變化相應的高度，這樣布局就沒有影響了！

修改后代碼如下（只貼出修改部分）：

        private void scroller_ViewChanged(object sender, ScrollViewerViewChangedEventArgs e)  2  {  3             //得到scrollerview的滾動高度
            var verticalOffset = scroller.VerticalOffset;  5 
            //計算當前header應該顯示的高度
            var delta = _headerDefaultHeight - verticalOffset;  8 
            //高一定大於0！！！
            headerRow.Height = new GridLength(delta < 0 ? 0 : delta); 11 
            // 將head的位置提升，改變可顯示區域
            head.Margin = new Thickness(0, -verticalOffset, 0, 0); 14         }

這樣再來看看滾動的效果！

到這里你以為完了么？不，這里面還有一個小坑在前面等着你去踩！如果你在一些比較慢的機器上（比如一些低端的win phone）運行這個頁面，快速滾動的話你會有碰到一個很迷的異常，“Layout cycle detected.”，而且根本定位不到異常的具體位置。。。相信有些同學也遇到過這個問題，通常這是因為更新UI太頻繁，簡單粗暴的方法是加上Task.Delay，時間可以短一些，比如1ms。同時上面的代碼其實還有很大的優化空間，比如我們的ViewChanged事件里其實不是必須每次都要更新UI的，通過優化更新邏輯也會降低這個異常出現的概率。