吸顶大法 -- UWP中的工具栏吸顶的实现方式之一

如果一个页面中有很长的列表/内容，很多应用都会在用户向下滚动时隐藏页面的头，给用户留出更多的阅读空间，同时提供一个方便的吸顶工具栏，比如淘宝中的店铺页面。

下面是一个比较简单的实现，如果有同学有更好的实现，欢迎留言，让我们共同进步。

首先假设我们的页面整体包含3部分;

页面头：随页面滚动慢慢消失/重现
工具栏: 开始时随页面滚动，在页面头消失后，吸顶，固定不动
可滚动内容：一个listview

结构代码如下，为了区别清楚，我是用不同的背景色做区分：

 1 <Page
 2     x:Class="App3.MainPage"
 3     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
 4     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
 5     xmlns:local="using:App3"
 6     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
 7     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
 8     mc:Ignorable="d">
 9 
10     <Page.Resources>
11         <Style TargetType="ListViewItem">
12             <!-- 让listview item拉伸 -->
13             <Setter Property="HorizontalContentAlignment" Value="Stretch"></Setter>
14         </Style>
15     </Page.Resources>
16 
17     <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
18         <Grid.RowDefinitions>
19             <!-- 头部高 -->
20             <RowDefinition Height="120" x:Name="headerRow"></RowDefinition>
21             <!-- 工具栏高 -->
22             <RowDefinition Height="48"></RowDefinition>
23             <!-- 其余内容 -->
24             <RowDefinition Height="*"></RowDefinition>
25         </Grid.RowDefinitions>
26 
27         <!-- 头部定义 -->
28         <Grid Background="LightGray" x:Name="head" Grid.Row="0">
29             <StackPanel Orientation="Horizontal"
30                             HorizontalAlignment="Left"
31                             VerticalAlignment="Center"
32                             Margin="12, 0, 0, 0">
33                 <Image Source="http://img.alicdn.com/tps/i4/TB12mhwHVXXXXctXVXXAAT2HVXX-63-63.png"
34                            Width="80"
35                            Height="80"></Image>
36 
37                 <TextBlock HorizontalAlignment="Left"
38                                VerticalAlignment="Center"
39                                Margin="12, 0, 0, 0">这是个测试</TextBlock>
40             </StackPanel>
41         </Grid>
42 
43         <!-- 工具栏定义 -->
44         <Grid Grid.Row="1" Background="DarkGray">
45             <StackPanel Orientation="Horizontal">
46                 <HyperlinkButton Margin="18, 0, 0, 0">按钮1</HyperlinkButton>
47                 <HyperlinkButton Margin="12,0, 0, 0">按钮2</HyperlinkButton>
48             </StackPanel>
49         </Grid>
50 
51         <!-- 内容部分 -->
52         <ScrollViewer x:Name="scroller" Grid.Row="2" ViewChanged="scroller_ViewChanged">
53             <ListView x:Name="list" ScrollViewer.HorizontalScrollMode="Disabled"
54                       ScrollViewer.VerticalScrollMode="Disabled">
55                 <ListView.ItemTemplate>
56                     <DataTemplate>
57                         <Grid Height="120" Background="LightGoldenrodYellow">
58                             <TextBlock Text="{Binding}"></TextBlock>
59                         </Grid>
60                     </DataTemplate>
61                 </ListView.ItemTemplate>
62             </ListView>
63         </ScrollViewer>
64     </Grid>
65 </Page>

View Code