右侧伸缩导航的实现

效果描述:初始状态只在右侧显示一个导航条,鼠标进入导航条范围则整个右侧菜单从右向左匀速推出。

实现概述:完全在界面中用xaml编写完成,不用在.cs文件中加支持代码,不需要使用blend等设计工具。

涉及技术:WPF触发器,简单动画故事板的使用,其他的就是布局和相关控件的样式重写,。

       真实案例中实现的效果,用到的可以拿去。应客户浦发银行的要求,导航条改为在界面底部显示,有机会去到北京金融街浦发银行的小伙伴可以在大厅看到真正的东西。

      在我实际的项目中,整个菜单的布局使用grid实现,菜单加导航条的实际宽度为240,导航条宽度为48,在grid中添加两个触发器,分别为鼠标进入的事件的触发和鼠标离开的触发,每个触发器中添加一个故事板动画,鼠标进入触发的动画为使整个菜单宽度变为240,鼠标离开的动画使整个菜单的宽度变为48,具体的导航条和菜单的样式重写不在此处详述,关于样式重写会新开一篇文章进行讲解,因为涉及到的东西还是比较多的。

源代码地址:https://github.com/leoualy/WPFExamples

该地址是整个wpf案例的工程, 包含多个wpf实例,下载即可运行选定的项目。

可以下载整个wpf的案例项目,会一直更新中...

界面效果如下图:


©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 1、通过CocoaPods安装项目名称项目信息 AFNetworking网络请求组件 FMDB本地数据库组件 SD...
    阳明AI阅读 16,056评论 3 119
  • 和一只松鼠做邻居,虽然纱窗被咬破,屋里被乱搞,半夜睡觉还被惊醒,虽然我经常公开讨伐他,但是,我心里还是有点小得意 ...
    纳西所思阅读 2,744评论 0 1
  • 火红的朝阳 撕开黛青色天幕 映着半塘湖水 爬上山头 在粼粼的水波中 荡漾的诗意 唤醒早起的人儿 摇着渔船 撒开渔网...
    相逢萍水阅读 3,462评论 0 6
  • 这几天,在小城安静的逛着。发着呆,玩玩乐乐。 安静下来,发现这里也很美。 这是什么? 三角梅啊。 文艺小清新。 很...
    AMAmber阅读 1,351评论 0 0

友情链接更多精彩内容