WPF 简单模仿 VSCode 界面布局
本文经原作者授权以原创方式二次分享,欢迎转载、分享。
WPF 简单模仿 VSCode 界面布局
作者:弈虎-吕女士会翻墙
原文链接: https://github.com/Chen-Lin-Zhao-Wei/WPFLikeVSCode
分享一篇群友这几天自己写的 WPF 简单模仿 VSCode 界面布局。
具体功能也不多,难度也不大,自定义了若干控件实现以上程序:
![e2fd50ee92716471def1d7f88bf6e172.png](https://i-blog.csdnimg.cn/blog_migrate/9f62adf4b259ba26ce2b462f0e3e207b.png)
CusWindow
:自定义窗体,WindowChrome
方案, 用于添加HeaderContent
在标题中显示内容。
![34110b98cb502eaecd630ac63295fc82.png](https://i-blog.csdnimg.cn/blog_migrate/01f76fc85329e278a84cb46a21bd7fcf.png)
FrameTabControl
: 窗体中用于显示主内容的TabContrl
,内部逻辑只增加下拉选中其他选项卡的下拉按钮就没了。
![a45468e0a4704055ee4cde1793ac59f2.png](https://i-blog.csdnimg.cn/blog_migrate/bf7645ab89058dd75644d2d9e41a81f6.png)
FrameTabItem
:FrameTabControl
的子项,页面的容器。
![72e96398574d461707e8d771784965e1.png](https://i-blog.csdnimg.cn/blog_migrate/fba9666422e292464fe61a3a892f920a.png)
GroupBoxExtend
:继承GroupBox
并重写样式,增加了AdditionContent
属性。
![138d9f78682a8b73370ff019c814569d.png](https://i-blog.csdnimg.cn/blog_migrate/b968d8a80228e0db15b0e0cb2d05c3e6.png)
SideTabControl
:继承TabControl
并重写样式,增加了TabContent.Content
的滑入划出,样式已固定死,无法适应TabStripPlacement
变化,这里请注意,用于左侧边栏,Content
中控件的宽度由ContentLength
控制。
![04db51ce7efef889f5acf9d523431164.png](https://i-blog.csdnimg.cn/blog_migrate/cfe5d21538665c1b9a2375618b962765.png)
SideTabItem
:继承子TabItem
并重写样式,部分参与触发SideTabControl
的划入划出。
![25682007f22ce74720f1cca871ce0a0a.png](https://i-blog.csdnimg.cn/blog_migrate/2afcdc27a62bc2891c182e2e9df6dac9.png)
SideTabSizeResiger
:一个Thumb
用于调整SideTabControl
中Content
的呈现宽度。
![5a521d5f0a1b11726ab5e315cbf61fe1.png](https://i-blog.csdnimg.cn/blog_migrate/40a9fecac288324314f7b8ca011dec8d.png)
额外的内容是
TreeView
样式的调整,见Styles.TreeViewer.xaml
。
![2cd8eb05581a688f4fccd37dc0002e48.png](https://i-blog.csdnimg.cn/blog_migrate/531773a24367754b4a93bcabfbe2c3ed.png)
还有垂直的
Menu
的样式调整 见Styles.VerticalMenu.xaml
。
![f0e8355156ac43e22e513d3186831bf4.png](https://i-blog.csdnimg.cn/blog_migrate/a0ef3cfaa45b91370e5c33041a1483ac.png)
效果
鸣谢 - 弈虎-吕女士会翻墙
源码地址[1]
博客园[2]
参考资料
[1]
源码地址: https://github.com/Chen-Lin-Zhao-Wei/WPFLikeVSCode
[2]博客园: https://home.cnblogs.com/u/wandia/
技术群:添加小编微信并备注进群
小编微信:mm1552923
公众号:dotNet编程大全