右侧伸缩导航的实现
2018-07-24 本文已影响0人
数字迷雾
效果描述：初始状态只在右侧显示一个导航条，鼠标进入导航条范围则整个右侧菜单从右向左匀速推出。
实现概述：完全在界面中用xaml编写完成，不用在.cs文件中加支持代码，不需要使用blend等设计工具。
涉及技术：WPF触发器，简单动画故事板的使用，其他的就是布局和相关控件的样式重写，。
真实案例中实现的效果，用到的可以拿去。应客户浦发银行的要求，导航条改为在界面底部显示，有机会去到北京金融街浦发银行的小伙伴可以在大厅看到真正的东西。
在我实际的项目中，整个菜单的布局使用grid实现，菜单加导航条的实际宽度为240，导航条宽度为48，在grid中添加两个触发器，分别为鼠标进入的事件的触发和鼠标离开的触发，每个触发器中添加一个故事板动画，鼠标进入触发的动画为使整个菜单宽度变为240，鼠标离开的动画使整个菜单的宽度变为48，具体的导航条和菜单的样式重写不在此处详述，关于样式重写会新开一篇文章进行讲解，因为涉及到的东西还是比较多的。
源代码地址：https://github.com/leoualy/WPFExamples
该地址是整个wpf案例的工程， 包含多个wpf实例，下载即可运行选定的项目。
可以下载整个wpf的案例项目，会一直更新中...
界面效果如下图:
