原文:uwp - 上滑隐藏导航栏下滑显示

好久没写博客了，因为忙着工作。昨天周末填坑需要做一个上滑列表数据时隐藏导航栏下滑时显示的效果，下面分享一下我的做法，希望能给你带来帮助。

思路是通过判断滚动条是往下还是往上滑然后做出相应的显示隐藏导航栏处理即可；

首先在我们的内容外套一个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.          <Grid x:Name="bar" Height="50" Background="#FFB05AEC" VerticalAlignment="Bottom" Canvas.ZIndex="2" Opacity="0.9">
  166.              <TextBlock Text="导航栏" HorizontalAlignment="Center" VerticalAlignment="Center" Foreground="White"></TextBlock>
  167.          </Grid>
  168.      </Grid>

MainPage.xaml

以上代码的效果是这样的：

然后转到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.          }

mainpage.xaml.cs

代码中也写了非常详细的注释了，这里在简单说几句，我用一个变量scrlocation来记录滚动停止后的滚动条所在位置，然后在列表滚动时也就是viewchanged事件发生时获取滚动条的位置，只要判断viewchanged事件发生时获取滚动条的位置是大于scrlocation还是小于就可以知道用户是往上滑还是往下滑了。这里还有一个变量isshowbmbar是记录当前导航栏的显示状态，因为滑动列表的时候viewchanged事件会不停地触发，如果不用这个变量记录并且判断的话会导致导航栏不停地显示或隐藏，如果你只是单纯用透明度来隐藏或显示的话性能影响上来说不算太大，但是如果你像我用动画来做隐藏显示效果的话会加大这个开销或者出现动画显示不正常的情况。

以上代码运行起来的效果如下（没有动画效果看起来不是很好看，懒得写懒啊大家自己加上就和我第一张效果图一样了。）：

希望我的思路能给你带来帮助，谢谢。如果写得不好见谅。

我把这个demo传上来，大家可以自己运行。（in vs2017rc .net4.6）

【上滑隐藏显示demo.zip点击下载】

uwp - 上滑隐藏导航栏下滑显示的更多相关文章

  1. iOS---实现简书和知乎的上滑隐藏导航栏下拉显示导航栏效果

    因为自己用简书和知乎比较多,所以对其导航栏的效果比较好奇,自己私下里找资料实现了一下.这个效果的关键点在于下方可供滑动的内容的便宜距离inset的改变,以及滑动的scrollview代理的执行,废话不 ...

  2. iOS 上滑隐藏导航,下滑显示导航,仿斗鱼导航效果

    UItableView或 UIcollectionView 都是继承UIScrollView 滑动的时候,判断是上滑还是下滑 使用 UIScrollView 的代理方法 func scrollView ...

  3. AMScrollingNavbar框架(自动隐藏导航栏)使用简介

    AMScrollingNavbar框架是一个可以上拉隐藏导航栏和下拉显示导航栏的框架,这个开源框架的调用也很简单,本章节就给大家介绍一下这个框架的用法. 一.下载及导入框架 AMScrollingNa ...

  4. iOS 滑动隐藏导航栏-三种方式

    /** 1隐藏导航栏-简单- */    self.navigationController.hidesBarsOnSwipe = YES; /** 2隐藏导航栏-不随tableView滑动消失效果 ...

  5. 安卓ROOT后禁用/隐藏导航栏/虚拟按键

    安卓ROOT后禁用/隐藏导航栏/虚拟按键 提醒:提前装好EASY TOUCH 等类似工具. 用ROOT EXPLORER 或 ROOT BROWSER system\bulid.prop 最后加一行: ...

  6. Material Design之CoordinatorLayout+AppBarLayout实现上滑隐藏ToolBar

    ok,今天继续更新Material Design系列!!! 废话不说,先看看效果图吧: 好了,现在来讲讲上图是怎么实现的吧!讲之前先讲讲几个控件: CoordinatorLayout  该控件也是De ...

  7. iOS 隐藏导航栏下的黑线

    一.找到导航栏下的黑线 // 寻找导航栏下的黑线 - (UIImageView *)findHairlineImageViewUnder:(UIView *)view { if ([view isKi ...

  8. iOS侧滑返回到隐藏导航栏的VC，导航栏会闪现一次

    VCA:是一个隐藏导航栏的页面:VCA在ViewWillAppear生命周期函数中设置导航栏隐藏: //隐藏导航栏 [self.navigationController setNavigationBa ...

  9. iOS 优雅地隐藏导航栏NavigationBar (Objc)

    @interface FSViewController () <UINavigationControllerDelegate> @end @implementation FSViewCon ...

随机推荐

  1. 介绍array_multisort方法

    介绍array_multisort方法 array_multisort — 对多个数组或多维数组进行排序.其php 手册中的说明如下:  代码如下: bool array_multisort ( ar ...

  2. go初探 - 生成随机整数

    func RandInt64(min, max int64) int64 { if min >= max || min == 0 || max == 0 { return max } rand. ...

  3. 8、linux下输入子系统

    input_sync(button_dev);    /*通知接收者,一个报告发送完毕*/ 参考:http://www.51hei.com/bbs/dpj-27652-1.html  很详细说明 in ...

  4. Vivado 2017.2 SDK 生成FSBL时存在的bug

    SDK 2017.1/.2 - ld.exe: cannot find -lrsa When importing a new HDF file into the SDK or after a clea ...

  5. Vim技巧之四大模式_插入模式

    Vim技巧之四大模式_插入模式 在插入模式中及时更正错误 插入-普通模式 在插入模式模式以下直接粘贴指定寄存器的内容 插入模式中做运算 用字符编码插入很常使用字符 替换已有的文本 Vim技巧之四大模式 ...

  6. 【66.47%】【codeforces 556B】Case of Fake Numbers

    time limit per test2 seconds memory limit per test256 megabytes inputstandard input outputstandard o ...

  7. teamview huawei

    https://apkpure.com/add-on-huawei/com.teamviewer.quicksupport.addon.huawei   4.0/5 ( 5 Discussions ) ...

  8. Docker容器应用日志查看

    原文:Docker容器应用日志查看 版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/benben_2015/article/details/80708 ...

  9. php自定义排序数组usort和uasort（uasort保持索引关联）（usort($arr, "cmp");）（比较函数时很普通函数的写法：function cmp($a, $b)）

    php自定义排序数组usort和uasort(uasort保持索引关联)(usort($arr, "cmp");)(比较函数时很普通函数的写法:function cmp($a, $ ...

  10. 微服务学习笔记（1）——使用MagicOnion实现gRPC

    原文:微服务学习笔记(1)--使用MagicOnion实现gRPC 1.什么是gRPC 官方文档:https://grpc.io/docs/guides/index.html 2.什么是MagicOn ...