基于C#实现左侧折叠导航菜单的完整技术方案涵盖WinForms和WPF两种主流开发框架结合界面设计、交互逻辑和工程实践一、WinForms实现方案1. 基础控件组合核心控件选择Panel容器用于包裹折叠内容Button/Label作为菜单触发器TreeView展示多级菜单结构SplitContainer实现左右分栏布局示例代码12345678910111213141516171819202122// 初始化菜单面板Panel menuPanel newPanel {Dock DockStyle.Left,Width 200,BackColor Color.FromArgb(240, 240, 240)};// 创建折叠按钮Button toggleBtn newButton {Text ☰ 菜单,Dock DockStyle.Top,Font newFont(微软雅黑, 10, FontStyle.Bold),BackColor Color.DimGray};toggleBtn.Click (s, e) {menuPanel.Width menuPanel.Width 200 ? 60 : 200;this.Invalidate();// 触发重绘};// 添加到窗体this.Controls.Add(toggleBtn);this.Controls.Add(menuPanel);2. 动画效果实现通过定时器实现平滑展开/折叠12345678910111213141516171819202122Timer aniTimer newTimer { Interval 20 };inttargetWidth 200;intcurrentWidth 60;voidAnimateResize() {if(menuPanel.Width targetWidth) {menuPanel.Width 5;toggleBtn.Text ☰ 菜单;}elseif(menuPanel.Width currentWidth) {menuPanel.Width - 5;toggleBtn.Text ▶ 内容;}else{aniTimer.Stop();}}// 触发时启动动画toggleBtn.Click (s, e) {targetWidth menuPanel.Width 200 ? 60 : 200;currentWidth menuPanel.Width;aniTimer.Start();};3. 多级菜单实现使用TreeView控件构建层级结构12345678TreeNode node1 newTreeNode(系统管理, 0, 0);TreeNode node1_1 newTreeNode(用户管理, 1, 1);TreeNode node1_2 newTreeNode(权限设置, 2, 2);node1.Nodes.Add(node1_1);node1.Nodes.Add(node1_2);treeView1.Nodes.Add(node1);treeView1.ExpandAll();二、WPF实现方案1. XAML布局设计123456789101112131415161718192021222324252627282930313233343536373839404142Windowx:ClassFoldableMenu.MainWindowxmlnshttp://schemas.microsoft.com/winfx/2006/xaml/presentationTitle折叠导航菜单Height450Width800GridGrid.ColumnDefinitionsColumnDefinitionWidthAuto/ColumnDefinitionWidth*//Grid.ColumnDefinitions!-- 左侧菜单 --DockPanelx:NameMenuDockGrid.Column0Width200Background#2D2D30ButtonDockPanel.DockTopContent☰ 菜单ForegroundWhiteFontSize16Margin5ClickToggleMenu/ExpanderHeader系统管理IsExpandedFalseExpander.HeaderTemplateDataTemplateTextBlockText{Binding}ForegroundLightBlueMargin5//DataTemplate/Expander.HeaderTemplateListBoxListBoxItemContent用户管理/ListBoxItemContent权限设置//ListBox/Expander/DockPanel!-- 主内容区 --GridGrid.Column1TextBlockText主内容区域FontSize24VerticalAlignmentCenterHorizontalAlignmentCenter//Grid/Grid/Window2. 动态菜单绑定通过ViewModel绑定数据12345678910111213141516171819publicclassMenuModel : INotifyPropertyChanged {privatebool_isExpanded;publicboolIsExpanded {get _isExpanded;set{_isExpanded value;OnPropertyChanged(nameof(IsExpanded));}}// 实现INotifyPropertyChanged接口publiceventPropertyChangedEventHandler PropertyChanged;protectedvoidOnPropertyChanged(stringprop) {PropertyChanged?.Invoke(this,newPropertyChangedEventArgs(prop));}}// XAML绑定Expander Header系统管理IsExpanded{Binding IsExpanded}3. 动画效果实现使用Storyboard实现折叠动画123456789101112131415161718192021Window.ResourcesStoryboard x:KeyCollapseAnimDoubleAnimation Storyboard.TargetNameMenuDockStoryboard.TargetPropertyWidthFrom200To60Duration0:0:0.3//StoryboardStoryboard x:KeyExpandAnimDoubleAnimation Storyboard.TargetNameMenuDockStoryboard.TargetPropertyWidthFrom60To200Duration0:0:0.3//Storyboard/Window.Resources// 触发动画privatevoidToggleMenu(objectsender, RoutedEventArgs e) {Storyboard sb (MenuDock.Width 200)? (Storyboard)FindResource(CollapseAnim): (Storyboard)FindResource(ExpandAnim);sb.Begin(this);}参考代码 C#左侧折叠导航菜单 youwenfan.com/contentcsb/111938.html三、进阶功能实现1. 图标与样式定制图标集成使用Image控件或字体图标库如FontAwesome悬停效果通过Style.Triggers实现颜色变化12345678StyleTargetTypeButtonSetterPropertyBackgroundValueTransparent/Style.TriggersTriggerPropertyIsMouseOverValueTrueSetterPropertyBackgroundValue#404040//Trigger/Style.Triggers/Style2. 状态持久化使用ApplicationSettings保存展开状态123456// 保存状态Properties.Settings.Default.MenuWidth menuDock.Width;Properties.Settings.Default.Save();// 恢复状态menuDock.Width Properties.Settings.Default.MenuWidth;3. 多分辨率适配WPF自适应布局使用Viewbox控件自动缩放WinForms动态调整监听Resize事件123privatevoidForm_Resize(objectsender, EventArgs e) {menuPanel.Width this.ClientSize.Width / 4;}四、第三方库推荐库名称特点适用场景HslCommunication提供现成的导航控件支持主题切换企业级应用开发DevExpress WinForms包含Ribbon控件和高级布局管理器复杂业务系统MaterialDesignInXaml实现Material Design风格菜单现代化UI设计五、工程实践建议模块化设计将菜单项封装为独立UserControl权限控制通过角色标识动态加载菜单项性能优化虚拟化技术处理大量菜单项WPF的VirtualizingStackPanel测试方案多分辨率测试1920x1080/1366x768等快速点击防抖处理低配环境性能测试到此这篇关于C#实现左侧折叠导航菜单的示例代码的文章就介绍到这了
C#中实现左侧折叠导航菜单的示例代码
发布时间：2026/5/24 23:24:34
基于C#实现左侧折叠导航菜单的完整技术方案涵盖WinForms和WPF两种主流开发框架结合界面设计、交互逻辑和工程实践一、WinForms实现方案1. 基础控件组合核心控件选择Panel容器用于包裹折叠内容Button/Label作为菜单触发器TreeView展示多级菜单结构SplitContainer实现左右分栏布局示例代码12345678910111213141516171819202122// 初始化菜单面板Panel menuPanel newPanel {Dock DockStyle.Left,Width 200,BackColor Color.FromArgb(240, 240, 240)};// 创建折叠按钮Button toggleBtn newButton {Text ☰ 菜单,Dock DockStyle.Top,Font newFont(微软雅黑, 10, FontStyle.Bold),BackColor Color.DimGray};toggleBtn.Click (s, e) {menuPanel.Width menuPanel.Width 200 ? 60 : 200;this.Invalidate();// 触发重绘};// 添加到窗体this.Controls.Add(toggleBtn);this.Controls.Add(menuPanel);2. 动画效果实现通过定时器实现平滑展开/折叠12345678910111213141516171819202122Timer aniTimer newTimer { Interval 20 };inttargetWidth 200;intcurrentWidth 60;voidAnimateResize() {if(menuPanel.Width targetWidth) {menuPanel.Width 5;toggleBtn.Text ☰ 菜单;}elseif(menuPanel.Width currentWidth) {menuPanel.Width - 5;toggleBtn.Text ▶ 内容;}else{aniTimer.Stop();}}// 触发时启动动画toggleBtn.Click (s, e) {targetWidth menuPanel.Width 200 ? 60 : 200;currentWidth menuPanel.Width;aniTimer.Start();};3. 多级菜单实现使用TreeView控件构建层级结构12345678TreeNode node1 newTreeNode(系统管理, 0, 0);TreeNode node1_1 newTreeNode(用户管理, 1, 1);TreeNode node1_2 newTreeNode(权限设置, 2, 2);node1.Nodes.Add(node1_1);node1.Nodes.Add(node1_2);treeView1.Nodes.Add(node1);treeView1.ExpandAll();二、WPF实现方案1. XAML布局设计123456789101112131415161718192021222324252627282930313233343536373839404142Windowx:ClassFoldableMenu.MainWindowxmlnshttp://schemas.microsoft.com/winfx/2006/xaml/presentationTitle折叠导航菜单Height450Width800GridGrid.ColumnDefinitionsColumnDefinitionWidthAuto/ColumnDefinitionWidth*//Grid.ColumnDefinitions!-- 左侧菜单 --DockPanelx:NameMenuDockGrid.Column0Width200Background#2D2D30ButtonDockPanel.DockTopContent☰ 菜单ForegroundWhiteFontSize16Margin5ClickToggleMenu/ExpanderHeader系统管理IsExpandedFalseExpander.HeaderTemplateDataTemplateTextBlockText{Binding}ForegroundLightBlueMargin5//DataTemplate/Expander.HeaderTemplateListBoxListBoxItemContent用户管理/ListBoxItemContent权限设置//ListBox/Expander/DockPanel!-- 主内容区 --GridGrid.Column1TextBlockText主内容区域FontSize24VerticalAlignmentCenterHorizontalAlignmentCenter//Grid/Grid/Window2. 动态菜单绑定通过ViewModel绑定数据12345678910111213141516171819publicclassMenuModel : INotifyPropertyChanged {privatebool_isExpanded;publicboolIsExpanded {get _isExpanded;set{_isExpanded value;OnPropertyChanged(nameof(IsExpanded));}}// 实现INotifyPropertyChanged接口publiceventPropertyChangedEventHandler PropertyChanged;protectedvoidOnPropertyChanged(stringprop) {PropertyChanged?.Invoke(this,newPropertyChangedEventArgs(prop));}}// XAML绑定Expander Header系统管理IsExpanded{Binding IsExpanded}3. 动画效果实现使用Storyboard实现折叠动画123456789101112131415161718192021Window.ResourcesStoryboard x:KeyCollapseAnimDoubleAnimation Storyboard.TargetNameMenuDockStoryboard.TargetPropertyWidthFrom200To60Duration0:0:0.3//StoryboardStoryboard x:KeyExpandAnimDoubleAnimation Storyboard.TargetNameMenuDockStoryboard.TargetPropertyWidthFrom60To200Duration0:0:0.3//Storyboard/Window.Resources// 触发动画privatevoidToggleMenu(objectsender, RoutedEventArgs e) {Storyboard sb (MenuDock.Width 200)? (Storyboard)FindResource(CollapseAnim): (Storyboard)FindResource(ExpandAnim);sb.Begin(this);}参考代码 C#左侧折叠导航菜单 youwenfan.com/contentcsb/111938.html三、进阶功能实现1. 图标与样式定制图标集成使用Image控件或字体图标库如FontAwesome悬停效果通过Style.Triggers实现颜色变化12345678StyleTargetTypeButtonSetterPropertyBackgroundValueTransparent/Style.TriggersTriggerPropertyIsMouseOverValueTrueSetterPropertyBackgroundValue#404040//Trigger/Style.Triggers/Style2. 状态持久化使用ApplicationSettings保存展开状态123456// 保存状态Properties.Settings.Default.MenuWidth menuDock.Width;Properties.Settings.Default.Save();// 恢复状态menuDock.Width Properties.Settings.Default.MenuWidth;3. 多分辨率适配WPF自适应布局使用Viewbox控件自动缩放WinForms动态调整监听Resize事件123privatevoidForm_Resize(objectsender, EventArgs e) {menuPanel.Width this.ClientSize.Width / 4;}四、第三方库推荐库名称特点适用场景HslCommunication提供现成的导航控件支持主题切换企业级应用开发DevExpress WinForms包含Ribbon控件和高级布局管理器复杂业务系统MaterialDesignInXaml实现Material Design风格菜单现代化UI设计五、工程实践建议模块化设计将菜单项封装为独立UserControl权限控制通过角色标识动态加载菜单项性能优化虚拟化技术处理大量菜单项WPF的VirtualizingStackPanel测试方案多分辨率测试1920x1080/1366x768等快速点击防抖处理低配环境性能测试到此这篇关于C#实现左侧折叠导航菜单的示例代码的文章就介绍到这了
