WPF 简单模仿 VSCode 界面布局

Posted 2022-11-12 dotNET跨平台

 WPF 简单模仿 VSCode 界面布局

本文经原作者授权以原创方式二次分享，欢迎转载、分享。

WPF 简单模仿 VSCode 界面布局

作者：弈虎-吕女士会翻墙

原文链接：   https://github.com/Chen-Lin-Zhao-Wei/WPFLikeVSCode

• 分享一篇群友这几天自己写的 WPF 简单模仿 VSCode 界面布局。

• 具体功能也不多，难度也不大，自定义了若干控件实现以上程序：

• CusWindow：自定义窗体，WindowChrome方案， 用于添加 HeaderContent 在标题中显示内容。

• FrameTabControl: 窗体中用于显示主内容的TabContrl,内部逻辑只增加下拉选中其他选项卡的下拉按钮就没了。

• FrameTabItem: FrameTabControl的子项，页面的容器。

• GroupBoxExtend：继承GroupBox并重写样式，增加了AdditionContent属性。

• SideTabControl：继承TabControl并重写样式，增加了TabContent.Content的滑入划出，样式已固定死，无法适应TabStripPlacement变化，这里请注意，用于左侧边栏,Content中控件的宽度由ContentLength控制。

• SideTabItem：继承子TabItem并重写样式，部分参与触发SideTabControl的划入划出。

• SideTabSizeResiger：一个Thumb用于调整SideTabControl中Content的呈现宽度。

• 额外的内容是TreeView样式的调整，见 Styles.TreeViewer.xaml。

• 还有垂直的Menu的样式调整 见Styles.VerticalMenu.xaml。

效果

 鸣谢 - 弈虎-吕女士会翻墙

源码地址^[1]

博客园^[2]

参考资料

[1]

源码地址: https://github.com/Chen-Lin-Zhao-Wei/WPFLikeVSCode

[2]

博客园: https://home.cnblogs.com/u/wandia/