C#中实现左侧折叠导航菜单的示例代码
<div id="navCategory"><h5 class="catalogue">目录</h5><ul class="first_class_ul"><li>一、WinForms实现方案</li><ul class="second_class_ul"><li>1. 基础控件组合</li><li>2. 动画效果实现</li><li>3. 多级菜单实现</li></ul><li>二、WPF实现方案</li><ul class="second_class_ul"><li>1. XAML布局设计</li><li>2. 动态菜单绑定</li><li>3. 动画效果实现</li></ul><li>三、进阶功能实现</li><ul class="second_class_ul"><li>1. 图标与样式定制</li><li>2. 状态持久化</li><li>3. 多分辨率适配</li></ul><li>四、第三方库推荐</li><ul class="second_class_ul"></ul><li>五、工程实践建议</li><ul class="second_class_ul"></ul></ul></div><p>基于C#实现左侧折叠导航菜单的完整技术方案，涵盖WinForms和WPF两种主流开发框架，结合界面设计、交互逻辑和工程实践：</p><p class="maodian"></p><h2>一、WinForms实现方案</h2>
<p class="maodian"></p><h3>1. 基础控件组合</h3>
<p><strong>核心控件选择</strong>：</p>
<ul><li><strong>Panel容器</strong>：用于包裹折叠内容</li><li><strong>Button/Label</strong>：作为菜单触发器</li><li><strong>TreeView</strong>：展示多级菜单结构</li><li><strong>SplitContainer</strong>：实现左右分栏布局</li></ul>
<p><strong>示例代码</strong>：</p>
<div class="jb51code"><pre class="brush:csharp;">// 初始化菜单面板
Panel menuPanel = new Panel {
Dock = DockStyle.Left,
Width = 200,
BackColor = Color.FromArgb(240, 240, 240)
};
// 创建折叠按钮
Button toggleBtn = new Button {
Text = "☰ 菜单",
Dock = DockStyle.Top,
Font = new Font("微软雅黑", 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);
</pre></div>
<p class="maodian"></p><h3>2. 动画效果实现</h3>
<p>通过定时器实现平滑展开/折叠：</p>
<div class="jb51code"><pre class="brush:csharp;">Timer aniTimer = new Timer { Interval = 20 };
int targetWidth = 200;
int currentWidth = 60;
void AnimateResize() {
if (menuPanel.Width < targetWidth) {
menuPanel.Width += 5;
toggleBtn.Text = "☰ 菜单";
} else if (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();
};
</pre></div>
<p class="maodian"></p><h3>3. 多级菜单实现</h3>
<p>使用<code>TreeView</code>控件构建层级结构：</p>
<div class="jb51code"><pre class="brush:csharp;">TreeNode node1 = new TreeNode("系统管理", 0, 0);
TreeNode node1_1 = new TreeNode("用户管理", 1, 1);
TreeNode node1_2 = new TreeNode("权限设置", 2, 2);
node1.Nodes.Add(node1_1);
node1.Nodes.Add(node1_2);
treeView1.Nodes.Add(node1);
treeView1.ExpandAll();
</pre></div>
<p class="maodian"></p><h2>二、WPF实现方案</h2>
<p class="maodian"></p><h3>1. XAML布局设计</h3>
<div class="jb51code"><pre class="brush:xml;"><Window x:Class="FoldableMenu.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
Title="折叠导航菜单" Height="450" Width="800">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<!-- 左侧菜单 -->
<DockPanel x:Name="MenuDock" Grid.Column="0" Width="200" Background="#2D2D30">
<Button DockPanel.Dock="Top"
Content="☰ 菜单"
Foreground="White"
FontSize="16"
Margin="5"
Click="ToggleMenu"/>
<Expander Header="系统管理" IsExpanded="False">
<Expander.HeaderTemplate>
<DataTemplate>
<TextBlock Text="{Binding}"
Foreground="LightBlue"
Margin="5"/>
</DataTemplate>
</Expander.HeaderTemplate>
<ListBox>
<ListBoxItem Content="用户管理"/>
<ListBoxItem Content="权限设置"/>
</ListBox>
</Expander>
</DockPanel>
<!-- 主内容区 -->
<Grid Grid.Column="1">
<TextBlock Text="主内容区域"
FontSize="24"
VerticalAlignment="Center"
HorizontalAlignment="Center"/>
</Grid>
</Grid>
</Window>
</pre></div>
<p class="maodian"></p><h3>2. 动态菜单绑定</h3>
<p>通过ViewModel绑定数据：</p>
<div class="jb51code"><pre class="brush:csharp;">public class MenuModel : INotifyPropertyChanged {
private bool _isExpanded;
public bool IsExpanded {
get => _isExpanded;
set {
_isExpanded = value;
OnPropertyChanged(nameof(IsExpanded));
}
}
// 实现INotifyPropertyChanged接口
public event PropertyChangedEventHandler PropertyChanged;
protected void OnPropertyChanged(string prop) {
PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(prop));
}
}
// XAML绑定
<Expander Header="系统管理" IsExpanded="{Binding IsExpanded}">
</pre></div>
<p class="maodian"></p><h3>3. 动画效果实现</h3>
<p>使用Storyboard实现折叠动画：</p>
<div class="jb51code"><pre class="brush:csharp;"><Window.Resources>
<Storyboard x:Key="CollapseAnim">
<DoubleAnimation Storyboard.TargetName="MenuDock"
Storyboard.TargetProperty="Width"
From="200" To="60" Duration="0:0:0.3"/>
</Storyboard>
<Storyboard x:Key="ExpandAnim">
<DoubleAnimation Storyboard.TargetName="MenuDock"
Storyboard.TargetProperty="Width"
From="60" To="200" Duration="0:0:0.3"/>
</Storyboard>
</Window.Resources>
// 触发动画
private void ToggleMenu(object sender, RoutedEventArgs e) {
Storyboard sb = (MenuDock.Width == 200)
? (Storyboard)FindResource("CollapseAnim")
: (Storyboard)FindResource("ExpandAnim");
sb.Begin(this);
}
</pre></div>
<p>参考代码 C#左侧折叠导航菜单 youwenfan.com/contentcsb/111938.html</p>
<p class="maodian"></p><h2>三、进阶功能实现</h2>
<p class="maodian"></p><h3>1. 图标与样式定制</h3>
<ul><li><strong>图标集成</strong>：使用<code>Image</code>控件或字体图标库（如FontAwesome）</li><li><strong>悬停效果</strong>：通过<code>Style.Triggers</code>实现颜色变化</li></ul>
<div class="jb51code"><pre class="brush:xml;"><Style TargetType="Button">
<Setter Property="Background" Value="Transparent"/>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="#404040"/>
</Trigger>
</Style.Triggers>
</Style>
</pre></div>
<p class="maodian"></p><h3>2. 状态持久化</h3>
<p>使用<code>ApplicationSettings</code>保存展开状态：</p>
<div class="jb51code"><pre class="brush:csharp;">// 保存状态
Properties.Settings.Default.MenuWidth = menuDock.Width;
Properties.Settings.Default.Save();
// 恢复状态
menuDock.Width = Properties.Settings.Default.MenuWidth;
</pre></div>
<p class="maodian"></p><h3>3. 多分辨率适配</h3>
<ul><li><strong>WPF自适应布局</strong>：使用<code>Viewbox</code>控件自动缩放</li><li><strong>WinForms动态调整</strong>：监听<code>Resize</code>事件</li></ul>
<div class="jb51code"><pre class="brush:csharp;">private void Form_Resize(object sender, EventArgs e) {
menuPanel.Width = this.ClientSize.Width / 4;
}
</pre></div>
<p class="maodian"></p><h2>四、第三方库推荐</h2>
<table><thead><tr><th>库名称</th><th>特点</th><th>适用场景</th></tr></thead><tbody><tr><td>HslCommunication</td><td>提供现成的导航控件，支持主题切换</td><td>企业级应用开发</td></tr><tr><td>DevExpress WinForms</td><td>包含Ribbon控件和高级布局管理器</td><td>复杂业务系统</td></tr><tr><td>MaterialDesignInXaml</td><td>实现Material Design风格菜单</td><td>现代化UI设计</td></tr></tbody></table>
<p class="maodian"></p><h2>五、工程实践建议</h2>
<ol><li><strong>模块化设计</strong>：将菜单项封装为独立UserControl</li><li><strong>权限控制</strong>：通过角色标识动态加载菜单项</li><li><strong>性能优化</strong>：虚拟化技术处理大量菜单项（WPF的<code>VirtualizingStackPanel</code>）</li><li>测试方案：<ul><li>多分辨率测试（1920x1080/1366x768等）</li><li>快速点击防抖处理</li><li>低配环境性能测试</li></ul></li></ol>
<p>到此这篇关于C#实现左侧折叠导航菜单的示例代码的文章就介绍到这了,更多相关C# 左侧折叠导航菜单内容请搜索琼殿技术社区以前的文章或继续浏览下面的相关文章希望大家以后多多支持琼殿技术社区！</p>
<div class="art_xg">
<b>您可能感兴趣的文章:</b><ul><li>C# WinForm中禁止改变窗口大小的方法</li><li>C# Winform中实现主窗口打开登录窗口关闭的方法</li><li>c# winform窗口一直置顶显示在桌面最上方或最底层的方法</li><li>c# winform取消右上角关闭按钮的实现方法</li><li>C#,winform,ShowDialog,子窗体向父窗体传值</li><li>WinForm窗体间传值的方法</li><li>c# winform多线程的小例子</li><li>在winform下实现左右布局多窗口界面的方法</li><li>C#中winform实现自动触发鼠标、键盘事件的方法</li></ul>
</div>
</div>
<!--endmain-->
頁:
[1]