你的位置:首页 > ASP.net教程

[ASP.net教程]吸顶大法


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

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

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

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

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

 1 <Page 2   x:Class="App3.MainPage" 3   ="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 4   ="http://schemas.microsoft.com/winfx/2006/xaml" 5   ="using:App3" 6   ="http://schemas.microsoft.com/expression/blend/2008" 7   ="http://schemas.open 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

 

效果如下图:

接下来我们需要在ScrollViewer.ViewChanged事件中处理滚动事件,将页面头部分慢慢的隐藏,知道高度为0,进而模拟出工具栏吸顶的状态,同学们可以在脑子里想象一下这个场景(●’◡’●)。但是由于在XAML中我们使用了RowDefinition定义的头部高度,所以就不能直接修改控件高度了,而是要动态修改这个RowDefinition的高度(我之前也不知道这货也是可以动态修改的,也是看了其他同学的code学到的)。

 1 public sealed partial class MainPage : Page 2   { 3     public List<string> Items { get; set; } = Enumerable.Repeat("this is a test item", 30).ToList(); 4  5     public MainPage() 6     { 7       this.InitializeComponent(); 8  9       this.Loaded += MainPage_Loaded;10     }11 12     private void MainPage_Loaded(object sender, RoutedEventArgs e)13     {14       this.list.ItemsSource = this.Items;15     }16 17     private void scroller_ViewChanged(object sender, ScrollViewerViewChangedEventArgs e)18     {19       //得到scrollerview的滚动高度20       var verticalOffset = scroller.VerticalOffset;21 22       //计算当前header应该显示的高度23       var delta = _headerDefaultHeight - verticalOffset;24 25       //高一定大于0!!!26       headerRow.Height = new GridLength(delta < 0 ? 0 : delta);27     }28 29     // 为了方便这里hard code,也可以从行定义中取得30     double _headerDefaultHeight = 120D;31 }

View Code

一个简单的头部隐藏,工具栏吸顶的小功能就实现了。

但是如果你仔细观察,头部在消失的过程中,布局有变化,强迫症表示好难受啊。

为了解决这个问题,首先让我们分析原因,其实很简单,因为在代码中一直在动态的修改头的高度,而头部控件中都是动态的布局。为了怎么解决这个问题呢?简单一点就是修改margin,既然是因为高度变化了导致布局变化,那么我们就让可显示区域变化相应的高度,这样布局就没有影响了!

修改后代码如下(只贴出修改部分):

 1     private void scroller_ViewChanged(object sender, ScrollViewerViewChangedEventArgs e) 2     { 3       //得到scrollerview的滚动高度 4       var verticalOffset = scroller.VerticalOffset; 5  6       //计算当前header应该显示的高度 7       var delta = _headerDefaultHeight - verticalOffset; 8  9       //高一定大于0!!!10       headerRow.Height = new GridLength(delta < 0 ? 0 : delta);11 12       // 将head的位置提升,改变可显示区域13       head.Margin = new Thickness(0, -verticalOffset, 0, 0);14     }

View Code

这样再来看看滚动的效果!

到这里你以为完了么?不,这里面还有一个小坑在前面等着你去踩!如果你在一些比较慢的机器上(比如一些低端的win phone)运行这个页面,快速滚动的话你会有碰到一个很迷的异常,“Layout cycle detected.”,而且根本定位不到异常的具体位置。。。相信有些同学也遇到过这个问题,通常这是因为更新UI太频繁,简单粗暴的方法是加上Task.Delay,时间可以短一些,比如1ms。同时上面的代码其实还有很大的优化空间,比如我们的ViewChanged事件里其实不是必须每次都要更新UI的,通过优化更新逻辑也会降低这个异常出现的概率。