原文:
uwp - 上滑隐藏导航栏下滑显示
MainPage.xaml
mainpage.xaml.cs
好久没写博客了，因为忙着工作。昨天周末填坑需要做一个上滑列表数据时隐藏导航栏下滑时显示的效果，下面分享一下我的做法，希望能给你带来帮助。
思路是通过判断滚动条是往下还是往上滑然后做出相应的显示隐藏导航栏处理即可；
首先在我们的内容外套一个ScrollViewer，然后在ScrollViewer的事件ViewChanged中做判断。
我们新 建一个page，布局出列表（包含模拟测试用的数据）、导航栏，代码如下：
1 <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"> 2 <ScrollViewer x:Name="sv" ViewChanged="sv_ViewChanged"> 3 <!--模拟数据--> 4 <StackPanel> 5 <Grid Height="50" Margin="0,10,0,0" > 6 <Grid.Background> 7 <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0"> 8 <LinearGradientBrush.RelativeTransform> 9 <CompositeTransform CenterY="0.5" CenterX="0.5" Rotation="-90"/> 10 </LinearGradientBrush.RelativeTransform> 11 <GradientStop Color="#FF3FBBD6" Offset="0"/> 12 <GradientStop Color="#FFF7AFED" Offset="1"/> 13 </LinearGradientBrush> 14 </Grid.Background> 15 <TextBlock Text="模拟数据1" Foreground="White" HorizontalAlignment="Center" VerticalAlignment="Center"></TextBlock> 16 </Grid> 17 <Grid Height="50" Margin="0,10,0,0" > 18 <Grid.Background> 19 <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0"> 20 <LinearGradientBrush.RelativeTransform> 21 <CompositeTransform CenterY="0.5" CenterX="0.5" Rotation="-90"/> 22 </LinearGradientBrush.RelativeTransform> 23 <GradientStop Color="#FF3FBBD6" Offset="0"/> 24 <GradientStop Color="#FFF7AFED" Offset="1"/> 25 </LinearGradientBrush> 26 </Grid.Background> 27 <TextBlock Text="模拟数据2" Foreground="White" HorizontalAlignment="Center" VerticalAlignment="Center"></TextBlock> 28 </Grid> 29 <Grid Height="50" Margin="0,10,0,0" > 30 <Grid.Background> 31 <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0"> 32 <LinearGradientBrush.RelativeTransform> 33 <CompositeTransform CenterY="0.5" CenterX="0.5" Rotation="-90"/> 34 </LinearGradientBrush.RelativeTransform> 35 <GradientStop Color="#FF3FBBD6" Offset="0"/> 36 <GradientStop Color="#FFF7AFED" Offset="1"/> 37 </LinearGradientBrush> 38 </Grid.Background> 39 <TextBlock Text="模拟数据3" Foreground="White" HorizontalAlignment="Center" VerticalAlignment="Center"></TextBlock> 40 </Grid> 41 <Grid Height="50" Margin="0,10,0,0" > 42 <Grid.Background> 43 <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0"> 44 <LinearGradientBrush.RelativeTransform> 45 <CompositeTransform CenterY="0.5" CenterX="0.5" Rotation="-90"/> 46 </LinearGradientBrush.RelativeTransform> 47 <GradientStop Color="#FF3FBBD6" Offset="0"/> 48 <GradientStop Color="#FFF7AFED" Offset="1"/> 49 </LinearGradientBrush> 50 </Grid.Background> 51 <TextBlock Text="模拟数据4" Foreground="White" HorizontalAlignment="Center" VerticalAlignment="Center"></TextBlock> 52 </Grid> 53 <Grid Height="50" Margin="0,10,0,0" > 54 <Grid.Background> 55 <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0"> 56 <LinearGradientBrush.RelativeTransform> 57 <CompositeTransform CenterY="0.5" CenterX="0.5" Rotation="-90"/> 58 </LinearGradientBrush.RelativeTransform> 59 <GradientStop Color="#FF3FBBD6" Offset="0"/> 60 <GradientStop Color="#FFF7AFED" Offset="1"/> 61 </LinearGradientBrush> 62 </Grid.Background> 63 <TextBlock Text="模拟数据5" Foreground="White" HorizontalAlignment="Center" VerticalAlignment="Center"></TextBlock> 64 </Grid> 65 <Grid Height="50" Margin="0,10,0,0" > 66 <Grid.Background> 67 <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0"> 68 <LinearGradientBrush.RelativeTransform> 69 <CompositeTransform CenterY="0.5" CenterX="0.5" Rotation="-90"/> 70 </LinearGradientBrush.RelativeTransform> 71 <GradientStop Color="#FF3FBBD6" Offset="0"/> 72 <GradientStop Color="#FFF7AFED" Offset="1"/> 73 </LinearGradientBrush> 74 </Grid.Background> 75 <TextBlock Text="模拟数据6" Foreground="White" HorizontalAlignment="Center" VerticalAlignment="Center"></TextBlock> 76 </Grid> 77 <Grid Height="50" Margin="0,10,0,0" > 78 <Grid.Background> 79 <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0"> 80 <LinearGradientBrush.RelativeTransform> 81 <CompositeTransform CenterY="0.5" CenterX="0.5" Rotation="-90"/> 82 </LinearGradientBrush.RelativeTransform> 83 <GradientStop Color="#FF3FBBD6" Offset="0"/> 84 <GradientStop Color="#FFF7AFED" Offset="1"/> 85 </LinearGradientBrush> 86 </Grid.Background> 87 <TextBlock Text="模拟数据7" Foreground="White" HorizontalAlignment="Center" VerticalAlignment="Center"></TextBlock> 88 </Grid> 89 <Grid Height="50" Margin="0,10,0,0" > 90 <Grid.Background> 91 <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0"> 92 <LinearGradientBrush.RelativeTransform> 93 <CompositeTransform CenterY="0.5" CenterX="0.5" Rotation="-90"/> 94 </LinearGradientBrush.RelativeTransform> 95 <GradientStop Color="#FF3FBBD6" Offset="0"/> 96 <GradientStop Color="#FFF7AFED" Offset="1"/> 97 </LinearGradientBrush> 98 </Grid.Background> 99 <TextBlock Text="模拟数据8" Foreground="White" HorizontalAlignment="Center" VerticalAlignment="Center"></TextBlock> 100 </Grid> 101 <Grid Height="50" Margin="0,10,0,0" > 102 <Grid.Background> 103 <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0"> 104 <LinearGradientBrush.RelativeTransform> 105 <CompositeTransform CenterY="0.5" CenterX="0.5" Rotation="-90"/> 106 </LinearGradientBrush.RelativeTransform> 107 <GradientStop Color="#FF3FBBD6" Offset="0"/> 108 <GradientStop Color="#FFF7AFED" Offset="1"/> 109 </LinearGradientBrush> 110 </Grid.Background> 111 <TextBlock Text="模拟数据9" Foreground="White" HorizontalAlignment="Center" VerticalAlignment="Center"></TextBlock> 112 </Grid> 113 <Grid Height="50" Margin="0,10,0,0" > 114 <Grid.Background> 115 <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0"> 116 <LinearGradientBrush.RelativeTransform> 117 <CompositeTransform CenterY="0.5" CenterX="0.5" Rotation="-90"/> 118 </LinearGradientBrush.RelativeTransform> 119 <GradientStop Color="#FF3FBBD6" Offset="0"/> 120 <GradientStop Color="#FFF7AFED" Offset="1"/> 121 </LinearGradientBrush> 122 </Grid.Background> 123 <TextBlock Text="模拟数据10" Foreground="White" HorizontalAlignment="Center" VerticalAlignment="Center"></TextBlock> 124 </Grid> 125 <Grid Height="50" Margin="0,10,0,0" > 126 <Grid.Background> 127 <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0"> 128 <LinearGradientBrush.RelativeTransform> 129 <CompositeTransform CenterY="0.5" CenterX="0.5" Rotation="-90"/> 130 </LinearGradientBrush.RelativeTransform> 131 <GradientStop Color="#FF3FBBD6" Offset="0"/> 132 <GradientStop Color="#FFF7AFED" Offset="1"/> 133 </LinearGradientBrush> 134 </Grid.Background> 135 <TextBlock Text="模拟数据11" Foreground="White" HorizontalAlignment="Center" VerticalAlignment="Center"></TextBlock> 136 </Grid> 137 <Grid Height="50" Margin="0,10,0,0" > 138 <Grid.Background> 139 <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0"> 140 <LinearGradientBrush.RelativeTransform> 141 <CompositeTransform CenterY="0.5" CenterX="0.5" Rotation="-90"/> 142 </LinearGradientBrush.RelativeTransform> 143 <GradientStop Color="#FF3FBBD6" Offset="0"/> 144 <GradientStop Color="#FFF7AFED" Offset="1"/> 145 </LinearGradientBrush> 146 </Grid.Background> 147 <TextBlock Text="模拟数据12" Foreground="White" HorizontalAlignment="Center" VerticalAlignment="Center"></TextBlock> 148 </Grid> 149 <Grid Height="50" Margin="0,10,0,0" > 150 <Grid.Background> 151 <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0"> 152 <LinearGradientBrush.RelativeTransform> 153 <CompositeTransform CenterY="0.5" CenterX="0.5" Rotation="-90"/> 154 </LinearGradientBrush.RelativeTransform> 155 <GradientStop Color="#FF3FBBD6" Offset="0"/> 156 <GradientStop Color="#FFF7AFED" Offset="1"/> 157 </LinearGradientBrush> 158 </Grid.Background> 159 <TextBlock Text="模拟数据13" Foreground="White" HorizontalAlignment="Center" VerticalAlignment="Center"></TextBlock> 160 </Grid> 161 </StackPanel> 162 </ScrollViewer> 163 164 165 166 <!--导航栏--> 167 <Grid x:Name="bar" Height="50" Background="#FFB05AEC" VerticalAlignment="Bottom" Canvas.ZIndex="2" Opacity="0.9"> 168 <TextBlock Text="导航栏" HorizontalAlignment="Center" VerticalAlignment="Center" Foreground="White"></TextBlock> 169 </Grid> 170 </Grid>
以上代码的效果是这样的：
然后转到mainpage的后台，代码如下：
1 //滚动条位置变量 2 double scrlocation = 0; 3 //导航栏当前显示状态（这个是为了减少不必要的开销，因为我做的是动画隐藏显示效果如果不用一个变量来记录当前导航栏状态的会重复执行隐藏或显示） 4 bool isshowbmbar = true; 5 public MainPage() 6 { 7 this.InitializeComponent(); 8 9 } 10 11 private void sv_ViewChanged(object sender, ScrollViewerViewChangedEventArgs e) 12 { 13 if (sv.VerticalOffset != scrlocation) 14 { 15 if (sv.VerticalOffset > scrlocation) 16 { 17 //滚动条当前位置大于存储的变量值时代表往下滑，隐藏底部栏 18 //隐藏 19 if (isshowbmbar) 20 { 21 //这里为了简洁易懂就不做动画隐藏效果，直接用透明度进行隐藏。 22 bar.Opacity = 0; 23 isshowbmbar = false; 24 25 } 26 } 27 else 28 { 29 //显示 30 if (isshowbmbar == false) 31 { 32 bar.Opacity = 1; 33 isshowbmbar = true; 34 35 } 36 37 } 38 39 } 40 scrlocation = sv.VerticalOffset; 41 }
代码中也写了非常详细的注释了，这里在简单说几句，我用一个变量scrlocation来记录滚动停止后的滚动条所在位置，然后在列表滚动时也就是viewchanged事件发生时获取滚动条的位置，只要判断viewchanged事件发生时获取滚动条的位置是大于scrlocation还是小于就可以知道用户是往上滑还是往下滑了。这里还有一个变量isshowbmbar是记录当前导航栏的显示状态，因为滑动列表的时候viewchanged事件会不停地触发，如果不用这个变量记录并且判断的话会导致导航栏不停地显示或隐藏，如果你只是单纯用透明度来隐藏或显示的话性能影响上来说不算太大，但是如果你像我用动画来做隐藏显示效果的话会加大这个开销或者出现动画显示不正常的情况。
以上代码运行起来的效果如下（没有动画效果看起来不是很好看，懒得写懒啊大家自己加上就和我第一张效果图一样了。）：
希望我的思路能给你带来帮助，谢谢。如果写得不好见谅。
我把这个demo传上来，大家可以自己运行。（in vs2017rc .net4.6）
