uwp - 上滑隐藏导航栏下滑显示
好久没写博客了，因为忙着工作。昨天周末填坑需要做一个上滑列表数据时隐藏导航栏下滑时显示的效果，下面分享一下我的做法，希望能给你带来帮助。
思路是通过判断滚动条是往下还是往上滑然后做出相应的显示隐藏导航栏处理即可；
首先在我们的内容外套一个ScrollViewer，然后在ScrollViewer的事件ViewChanged中做判断。
我们新 建一个page，布局出列表（包含模拟测试用的数据）、导航栏，代码如下：
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<ScrollViewer x:Name="sv" ViewChanged="sv_ViewChanged">
<!--模拟数据-->
<StackPanel>
<Grid Height="50" Margin="0,10,0,0" >
<Grid.Background>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<LinearGradientBrush.RelativeTransform>
<CompositeTransform CenterY="0.5" CenterX="0.5" Rotation="-90"/>
</LinearGradientBrush.RelativeTransform>
<GradientStop Color="#FF3FBBD6" Offset="0"/>
<GradientStop Color="#FFF7AFED" Offset="1"/>
</LinearGradientBrush>
</Grid.Background>
<TextBlock Text="模拟数据1" Foreground="White" HorizontalAlignment="Center" VerticalAlignment="Center"></TextBlock>
</Grid>
<Grid Height="50" Margin="0,10,0,0" >
<Grid.Background>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<LinearGradientBrush.RelativeTransform>
<CompositeTransform CenterY="0.5" CenterX="0.5" Rotation="-90"/>
</LinearGradientBrush.RelativeTransform>
<GradientStop Color="#FF3FBBD6" Offset="0"/>
<GradientStop Color="#FFF7AFED" Offset="1"/>
</LinearGradientBrush>
</Grid.Background>
<TextBlock Text="模拟数据2" Foreground="White" HorizontalAlignment="Center" VerticalAlignment="Center"></TextBlock>
</Grid>
<Grid Height="50" Margin="0,10,0,0" >
<Grid.Background>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<LinearGradientBrush.RelativeTransform>
<CompositeTransform CenterY="0.5" CenterX="0.5" Rotation="-90"/>
</LinearGradientBrush.RelativeTransform>
<GradientStop Color="#FF3FBBD6" Offset="0"/>
<GradientStop Color="#FFF7AFED" Offset="1"/>
</LinearGradientBrush>
</Grid.Background>
<TextBlock Text="模拟数据3" Foreground="White" HorizontalAlignment="Center" VerticalAlignment="Center"></TextBlock>
</Grid>
<Grid Height="50" Margin="0,10,0,0" >
<Grid.Background>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<LinearGradientBrush.RelativeTransform>
<CompositeTransform CenterY="0.5" CenterX="0.5" Rotation="-90"/>
</LinearGradientBrush.RelativeTransform>
<GradientStop Color="#FF3FBBD6" Offset="0"/>
<GradientStop Color="#FFF7AFED" Offset="1"/>
</LinearGradientBrush>
</Grid.Background>
<TextBlock Text="模拟数据4" Foreground="White" HorizontalAlignment="Center" VerticalAlignment="Center"></TextBlock>
</Grid>
<Grid Height="50" Margin="0,10,0,0" >
<Grid.Background>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<LinearGradientBrush.RelativeTransform>
<CompositeTransform CenterY="0.5" CenterX="0.5" Rotation="-90"/>
</LinearGradientBrush.RelativeTransform>
<GradientStop Color="#FF3FBBD6" Offset="0"/>
<GradientStop Color="#FFF7AFED" Offset="1"/>
</LinearGradientBrush>
</Grid.Background>
<TextBlock Text="模拟数据5" Foreground="White" HorizontalAlignment="Center" VerticalAlignment="Center"></TextBlock>
</Grid>
<Grid Height="50" Margin="0,10,0,0" >
<Grid.Background>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<LinearGradientBrush.RelativeTransform>
<CompositeTransform CenterY="0.5" CenterX="0.5" Rotation="-90"/>
</LinearGradientBrush.RelativeTransform>
<GradientStop Color="#FF3FBBD6" Offset="0"/>
<GradientStop Color="#FFF7AFED" Offset="1"/>
</LinearGradientBrush>
</Grid.Background>
<TextBlock Text="模拟数据6" Foreground="White" HorizontalAlignment="Center" VerticalAlignment="Center"></TextBlock>
</Grid>
<Grid Height="50" Margin="0,10,0,0" >
<Grid.Background>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<LinearGradientBrush.RelativeTransform>
<CompositeTransform CenterY="0.5" CenterX="0.5" Rotation="-90"/>
</LinearGradientBrush.RelativeTransform>
<GradientStop Color="#FF3FBBD6" Offset="0"/>
<GradientStop Color="#FFF7AFED" Offset="1"/>
</LinearGradientBrush>
</Grid.Background>
<TextBlock Text="模拟数据7" Foreground="White" HorizontalAlignment="Center" VerticalAlignment="Center"></TextBlock>
</Grid>
<Grid Height="50" Margin="0,10,0,0" >
<Grid.Background>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<LinearGradientBrush.RelativeTransform>
<CompositeTransform CenterY="0.5" CenterX="0.5" Rotation="-90"/>
</LinearGradientBrush.RelativeTransform>
<GradientStop Color="#FF3FBBD6" Offset="0"/>
<GradientStop Color="#FFF7AFED" Offset="1"/>
</LinearGradientBrush>
</Grid.Background>
<TextBlock Text="模拟数据8" Foreground="White" HorizontalAlignment="Center" VerticalAlignment="Center"></TextBlock>
</Grid>
<Grid Height="50" Margin="0,10,0,0" >
<Grid.Background>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<LinearGradientBrush.RelativeTransform>
<CompositeTransform CenterY="0.5" CenterX="0.5" Rotation="-90"/>
</LinearGradientBrush.RelativeTransform>
<GradientStop Color="#FF3FBBD6" Offset="0"/>
<GradientStop Color="#FFF7AFED" Offset="1"/>
</LinearGradientBrush>
</Grid.Background>
<TextBlock Text="模拟数据9" Foreground="White" HorizontalAlignment="Center" VerticalAlignment="Center"></TextBlock>
</Grid>
<Grid Height="50" Margin="0,10,0,0" >
<Grid.Background>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<LinearGradientBrush.RelativeTransform>
<CompositeTransform CenterY="0.5" CenterX="0.5" Rotation="-90"/>
</LinearGradientBrush.RelativeTransform>
<GradientStop Color="#FF3FBBD6" Offset="0"/>
<GradientStop Color="#FFF7AFED" Offset="1"/>
</LinearGradientBrush>
</Grid.Background>
<TextBlock Text="模拟数据10" Foreground="White" HorizontalAlignment="Center" VerticalAlignment="Center"></TextBlock>
</Grid>
<Grid Height="50" Margin="0,10,0,0" >
<Grid.Background>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<LinearGradientBrush.RelativeTransform>
<CompositeTransform CenterY="0.5" CenterX="0.5" Rotation="-90"/>
</LinearGradientBrush.RelativeTransform>
<GradientStop Color="#FF3FBBD6" Offset="0"/>
<GradientStop Color="#FFF7AFED" Offset="1"/>
</LinearGradientBrush>
</Grid.Background>
<TextBlock Text="模拟数据11" Foreground="White" HorizontalAlignment="Center" VerticalAlignment="Center"></TextBlock>
</Grid>
<Grid Height="50" Margin="0,10,0,0" >
<Grid.Background>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<LinearGradientBrush.RelativeTransform>
<CompositeTransform CenterY="0.5" CenterX="0.5" Rotation="-90"/>
</LinearGradientBrush.RelativeTransform>
<GradientStop Color="#FF3FBBD6" Offset="0"/>
<GradientStop Color="#FFF7AFED" Offset="1"/>
</LinearGradientBrush>
</Grid.Background>
<TextBlock Text="模拟数据12" Foreground="White" HorizontalAlignment="Center" VerticalAlignment="Center"></TextBlock>
</Grid>
<Grid Height="50" Margin="0,10,0,0" >
<Grid.Background>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<LinearGradientBrush.RelativeTransform>
<CompositeTransform CenterY="0.5" CenterX="0.5" Rotation="-90"/>
</LinearGradientBrush.RelativeTransform>
<GradientStop Color="#FF3FBBD6" Offset="0"/>
<GradientStop Color="#FFF7AFED" Offset="1"/>
</LinearGradientBrush>
</Grid.Background>
<TextBlock Text="模拟数据13" Foreground="White" HorizontalAlignment="Center" VerticalAlignment="Center"></TextBlock>
</Grid>
</StackPanel>
</ScrollViewer>
<!--导航栏-->
<Grid x:Name="bar" Height="50" Background="#FFB05AEC" VerticalAlignment="Bottom" Canvas.ZIndex="2" Opacity="0.9">
<TextBlock Text="导航栏" HorizontalAlignment="Center" VerticalAlignment="Center" Foreground="White"></TextBlock>
</Grid>
</Grid>
MainPage.xaml
以上代码的效果是这样的：
然后转到mainpage的后台，代码如下：
//滚动条位置变量
double scrlocation = 0;
//导航栏当前显示状态（这个是为了减少不必要的开销，因为我做的是动画隐藏显示效果如果不用一个变量来记录当前导航栏状态的会重复执行隐藏或显示）
bool isshowbmbar = true;
public MainPage()
{
this.InitializeComponent(); } private void sv_ViewChanged(object sender, ScrollViewerViewChangedEventArgs e)
{
if (sv.VerticalOffset != scrlocation)
{
if (sv.VerticalOffset > scrlocation)
{
//滚动条当前位置大于存储的变量值时代表往下滑，隐藏底部栏
//隐藏
if (isshowbmbar)
{
//这里为了简洁易懂就不做动画隐藏效果，直接用透明度进行隐藏。
bar.Opacity = 0;
isshowbmbar = false; }
}
else
{
//显示
if (isshowbmbar == false)
{
bar.Opacity = 1;
isshowbmbar = true; } } }
scrlocation = sv.VerticalOffset;
}
mainpage.xaml.cs
代码中也写了非常详细的注释了，这里在简单说几句，我用一个变量scrlocation来记录滚动停止后的滚动条所在位置，然后在列表滚动时也就是viewchanged事件发生时获取滚动条的位置，只要判断viewchanged事件发生时获取滚动条的位置是大于scrlocation还是小于就可以知道用户是往上滑还是往下滑了。这里还有一个变量isshowbmbar是记录当前导航栏的显示状态，因为滑动列表的时候viewchanged事件会不停地触发，如果不用这个变量记录并且判断的话会导致导航栏不停地显示或隐藏，如果你只是单纯用透明度来隐藏或显示的话性能影响上来说不算太大，但是如果你像我用动画来做隐藏显示效果的话会加大这个开销或者出现动画显示不正常的情况。
以上代码运行起来的效果如下（没有动画效果看起来不是很好看，懒得写懒啊大家自己加上就和我第一张效果图一样了。）：
希望我的思路能给你带来帮助，谢谢。如果写得不好见谅。
我把这个demo传上来，大家可以自己运行。（in vs2017rc .net4.6）
uwp - 上滑隐藏导航栏下滑显示的更多相关文章
- iOS---实现简书和知乎的上滑隐藏导航栏下拉显示导航栏效果
因为自己用简书和知乎比较多,所以对其导航栏的效果比较好奇,自己私下里找资料实现了一下.这个效果的关键点在于下方可供滑动的内容的便宜距离inset的改变,以及滑动的scrollview代理的执行,废话不 ...
- iOS 上滑隐藏导航,下滑显示导航,仿斗鱼导航效果
UItableView或 UIcollectionView 都是继承UIScrollView 滑动的时候,判断是上滑还是下滑 使用 UIScrollView 的代理方法 func scrollView ...
- AMScrollingNavbar框架(自动隐藏导航栏)使用简介
AMScrollingNavbar框架是一个可以上拉隐藏导航栏和下拉显示导航栏的框架,这个开源框架的调用也很简单,本章节就给大家介绍一下这个框架的用法. 一.下载及导入框架 AMScrollingNa ...
- iOS 滑动隐藏导航栏-三种方式
/** 1隐藏导航栏-简单- */ self.navigationController.hidesBarsOnSwipe = YES; /** 2隐藏导航栏-不随tableView滑动消失效果 ...
- 安卓ROOT后禁用/隐藏导航栏/虚拟按键
安卓ROOT后禁用/隐藏导航栏/虚拟按键 提醒:提前装好EASY TOUCH 等类似工具. 用ROOT EXPLORER 或 ROOT BROWSER system\bulid.prop 最后加一行: ...
- Material Design之CoordinatorLayout+AppBarLayout实现上滑隐藏ToolBar
ok,今天继续更新Material Design系列!!! 废话不说,先看看效果图吧: 好了,现在来讲讲上图是怎么实现的吧!讲之前先讲讲几个控件: CoordinatorLayout 该控件也是De ...
- iOS 隐藏导航栏下的黑线
一.找到导航栏下的黑线 // 寻找导航栏下的黑线 - (UIImageView *)findHairlineImageViewUnder:(UIView *)view { if ([view isKi ...
- iOS侧滑返回到隐藏导航栏的VC，导航栏会闪现一次
VCA:是一个隐藏导航栏的页面:VCA在ViewWillAppear生命周期函数中设置导航栏隐藏: //隐藏导航栏 [self.navigationController setNavigationBa ...
- iOS 优雅地隐藏导航栏NavigationBar (Objc)
@interface FSViewController () <UINavigationControllerDelegate> @end @implementation FSViewCon ...
随机推荐
- lua不同模块调用
一.起因 由于准备把lua加入的系统中,还需把字符串解析json.下了个json的lua,目前还没有搞定.但是一个lua,调用其他lua文件模块,目前刚刚搞定. 暂作记录. 二. 模块调用测试 1. ...
- thinkphp模型事件（钩子函数：模型中在增删改等操作前后自动执行的事件）
thinkphp模型事件(钩子函数:模型中在增删改等操作前后自动执行的事件) 一.总结 1.通过模型事件(钩子函数),可以在插入更新删除等前后执行一些特定的功能 2.模型事件是写在模型里面的,控制器中 ...
- js cookie创建读取删除函数封装
js cookie创建读取删除函数封装 一.总结 都是为了方便操作,这样弄了很方便 1.创建cookie的函数封装的作用:方便设置过期时间expire,方便设置键和值 2.查询cookie的数据封装的 ...
- P2P网贷第三方托管模式存在5大缺陷，托管机构才是最大赢家
1.注册开户需要2次,用户体验很差劲儿. 理财人和借款人,首先在平台注册,然后还要在第三方托管账户注册. 很多类似的地方,用户体验非常差劲. 比如,密码4个. 平台:登录密码.交易密码 ...
- Linux 网络编程系列教程
一.基础理论篇 01.网络协议入门 02.LAN.WAN.WLAN.VLAN 和 VPN 的区别 03.IP 地址介绍 04.广播地址介绍 05.无连接和面向连接协议的区别 06.因特网的IP协议是不 ...
- PHP移动互联网开发笔记（1）——环境搭建及配置
开篇说明:记得我上大二的时候第一次听到PHP,当时只知道这是一个开发网站的语言,并没有深入学习,在学了Java Web开发和Android开发之后我对互联网的发展方向有了一个我自己的认识,现在我们不能 ...
- [React Router v4] Style a Link that is Active with NavLink
We often need to be able to apply style to navigation links based on the current route. In React Rou ...
- kindeditor4跨域上传图片解决
项目中正在使用kindeditor, 版本号4.1.10 非常多公司的图片会走CDN,须要单独的一台图片上传服务如:(upload.268xue.com) kindeditor上传图片的简单内部流程: ...
- 将asp.net core2.0项目部署在IIS上运行
原文:将asp.net core2.0项目部署在IIS上运行 前言: 与ASP.NET时代不同,ASP.NET Core不再是由IIS工作进程(w3wp.exe)托管,而是独立运行的.它独立运行在控 ...
- idea中建立一个OSGI项目
参考网址:http://chenjingbo.iteye.com/blog/1893597 首先我使用的是equinox作为我的osgi framework 直接在官网上解压下载即可,第一步creta ...