简介：这是一份面向C# WinForm开发者的侧边导航栏控件资源，参考主流网站导航UI设计，适合需要为桌面应用快速搭建左侧导航菜单的初中级开发者。控件采用扁平化风格，图标、尺寸位置、文字颜色与样式均可灵活调整，并附带VS2017可直接运行的Demo，兼容.NET 2.0框架，便于在旧项目中集成或作为自定义控件学习参考。压缩包共37个文件，约1.06MB，以cs源码、png图标、resx与resources资源文件为主，另含sln解决方案、csproj工程文件及编译产物，结构完整可直接打开调试。目前已有7753人学习下载，说明该控件在实际项目中具备一定参考价值。需要说明的是，导航项呈现为非树形结构，作者也坦言部分能力受限的问题未能解决，但不影响学习与常规应用，读者可借此掌握自绘导航控件的布局、分组与事件处理思路。
1. WinForm 侧边栏导航：从一堆 Button 到可折叠导航控件的落地路径
做过 C# 上位机或者内部管理系统的同行大概都有这个经历：主界面左侧要放一排导航按钮，刚开始用 Panel 堆几个 Button，能跑；加到十几个菜单项之后，滚动、折叠、高亮、图标对齐全乱套，改一处崩三处。WinForm 自带的 ToolStrip、TabControl 都不是为「侧边导航」这个场景设计的，第三方控件库又重又贵，很多时候项目根本不允许引入。于是「自己写一个 WinForm 侧边栏导航控件」就成了绕不开的一步。
这篇笔记讲的就是这件事：怎么从零做一个能折叠、能高亮、能带子菜单、能适配 DPI 的左侧导航栏控件，以及在这个过程中真正会翻车的地方。适合两类人：一类是刚接手 WinForm 项目、被要求「把左边菜单做得像样点」的新手；另一类是写过几版导航栏、每次都在重绘和事件冒泡上踩坑的老手。下面按「控件怎么设计 → 怎么画出来 → 怎么接业务 → 怎么避坑 → 怎么进阶」的顺序推下去，每一步都能直接抄进项目里跑。
2. 导航控件怎么拆：从容器、项、渲染三层设计说起
2.1 为什么不用 ToolStrip 和 TabControl 硬凑
先说选型。WinForm 里能直接当导航用的现成控件就那么几个，但都不对口。ToolStrip 本质是工具栏，它的布局逻辑是横向优先，竖排要设LayoutStyle = VerticalStackWithOverflow，一旦项多了会冒出溢出箭头，而且它没有「选中态」这个概念，高亮得自己画。TabControl 是页签容器，标签位置固定在边缘，做左侧导航时标签文字是竖排的，可读性差，而且它把「导航」和「内容区」耦合在一起，业务上不好解耦。
真正合适的做法是自绘控件：一个继承自Panel或Control的容器，内部维护一个导航项集合，每一项自己负责绘制。这样布局、状态、事件全在掌控里。常见做法是分三层：
- 容器层（SidebarNav）：负责整体布局、滚动、折叠展开、项集合管理。
- 项层（NavItem）：一个数据类，存标题、图标、子项、选中态、展开态、Tag。
- 渲染层：在容器的
OnPaint里统一绘制，或者每个项做成独立子控件。
我一般选「容器统一绘制」这条路，因为项做成独立控件后，几十个项就是几十个窗口句柄，滚动和重绘会明显卡顿，而且事件冒泡处理起来很烦。
2.2 导航项的数据结构怎么定
项层不要用控件，用纯数据类。下面这个结构是我在几个项目里收敛出来的，够用且不臃肿：
public class NavItem { public string Id { get; set; } // 业务唯一标识，用于路由 public string Text { get; set; } // 显示文字 public Image Icon { get; set; } // 图标，建议 20x20 或 24x24 public string IconKey { get; set; } // 图标资源键，便于换肤 public List<NavItem> Children { get; set; } = new List<NavItem>(); public object Tag { get; set; } // 挂业务对象，比如窗体类型 public bool IsExpanded { get; set; } // 有子项时是否展开 public bool IsSelected { get; set; } // 是否当前选中 public bool Visible { get; set; } = true; // 支持按权限隐藏 public int Level { get; set; } // 层级，0 为顶级 }Id和Tag是关键。Id用来做路由匹配，避免用显示文字当键——文字一改，路由全断。Tag我习惯直接挂Type，点击时用Activator.CreateInstance反射出窗体，这样新增菜单不用改 switch。Level决定缩进，子项缩进 20px 是视觉上比较舒服的值。
2.3 容器要暴露哪些属性和事件
容器层对外要干净。属性上至少要有Items、SelectedId、ItemHeight、Indent、Collapsed（整体折叠成图标条）、ShowIcons。事件上核心就两个：ItemSelected（选中变化）和ItemExpanded（展开折叠）。不要暴露太多绘制细节，否则调用方会依赖内部实现，后面改渲染就痛苦。
public class SidebarNav : Control { public event EventHandler<NavItemEventArgs> ItemSelected; public event EventHandler<NavItemEventArgs> ItemExpanded; private readonly List<NavItem> _items = new List<NavItem>(); public IReadOnlyList<NavItem> Items => _items; public string SelectedId { get; private set; } public int ItemHeight { get; set; } = 44; public int Indent { get; set; } = 20; public bool Collapsed { get; set; } = false; public bool ShowIcons { get; set; } = true; public void SetItems(IEnumerable<NavItem> items) { /* 赋值并重算布局 */ } public void SelectItem(string id) { /* 设置选中并触发事件 */ } }这里有个细节：Control默认不支持滚动，项多了要自己处理。要么继承ScrollableControl，要么自己维护一个_scrollOffset配合鼠标滚轮。我倾向后者，因为ScrollableControl的自动滚动条样式和自绘风格不搭，还得额外处理。
3. 把导航栏画出来：OnPaint 里的坐标、状态与 DPI 处理
3.1 双缓冲和绘制入口
自绘控件第一件事是开双缓冲，否则滚动和悬停时闪得没法看。在构造函数里设：
public SidebarNav() { SetStyle(ControlStyles.AllPaintingInWmPaint | ControlStyles.OptimizedDoubleBuffer | ControlStyles.UserPaint | ControlStyles.ResizeRedraw, true); BackColor = Color.FromArgb(33, 37, 43); // 深色侧边栏底色 ForeColor = Color.FromArgb(200, 205, 210); }AllPaintingInWmPaint配合OptimizedDoubleBuffer是 WinForm 自绘的标准组合，能消掉绝大部分闪烁。ResizeRedraw保证尺寸变化时重绘，不然拉伸窗口会出现残影。
3.2 每一项的绘制顺序和状态色
绘制逻辑集中在OnPaint，按「背景 → 选中态 → 悬停态 → 图标 → 文字 → 展开箭头」的顺序画。状态色建议定成常量，别散在代码里：
protected override void OnPaint(PaintEventArgs e) { var g = e.Graphics; g.SmoothingMode = SmoothingMode.AntiAlias; g.TextRenderingHint = TextRenderingHint.ClearTypeGridFit; int y = -_scrollOffset; foreach (var item in FlattenVisible(_items)) { var rect = new Rectangle(0, y, Width, ItemHeight); if (rect.Bottom < 0 || rect.Top > Height) { y += ItemHeight; continue; } // 选中态：左侧 3px 高亮条 + 整行浅色背景 if (item.IsSelected) { using (var b = new SolidBrush(Color.FromArgb(45, 55, 70))) g.FillRectangle(b, rect); using (var b = new SolidBrush(Color.FromArgb(64, 158, 255))) g.FillRectangle(b, new Rectangle(0, y, 3, ItemHeight)); } else if (rect.Contains(PointToClient(MousePosition))) { using (var b = new SolidBrush(Color.FromArgb(40, 46, 54))) g.FillRectangle(b, rect); } // 图标 + 文字 + 箭头 DrawItemContent(g, item, rect); y += ItemHeight; } }FlattenVisible把树形结构按展开状态拍平成一维列表，绘制和命中测试都用它，保证两边逻辑一致——这是避免「点到的项和看到的项对不上」的关键。
3.3 文字、图标和展开箭头的对齐
文字用TextRenderer.DrawText而不是Graphics.DrawString，前者渲染质量更接近系统原生，中文不会发虚。图标用g.DrawImage并指定目标矩形，避免原图尺寸不一致导致错位。展开箭头别用字符「▼」，字符在不同字体下基线飘，自己画两条线更稳：
private void DrawArrow(Graphics g, Rectangle rect, bool expanded) { var cx = rect.Right - 18; var cy = rect.Top + rect.Height / 2; using (var pen = new Pen(Color.FromArgb(150, 160, 170), 1.6f)) { if (expanded) { g.DrawLine(pen, cx - 4, cy - 2, cx, cy + 2); g.DrawLine(pen, cx, cy + 2, cx + 4, cy - 2); } else { g.DrawLine(pen, cx - 2, cy - 4, cx + 2, cy); g.DrawLine(pen, cx + 2, cy, cx - 2, cy + 4); } } }3.4 高 DPI 下不糊的三个设置
WinForm 在高分屏上默认会做位图拉伸，自绘控件直接糊成一片。要处理三处：一是 app.manifest 里声明 DPI 感知级别；二是窗体构造函数里调Application.SetHighDpiMode（.NET Core/5+ 才有）；三是绘制时所有尺寸按DeviceDpi / 96f缩放。
private float Scale => DeviceDpi / 96f; // 绘制时 int itemH = (int)(ItemHeight * Scale); int indent = (int)(Indent * Scale);图标资源最好准备 1x 和 2x 两套，或者用矢量绘制。直接放大 20x20 的 PNG 在 150% 缩放下边缘会发毛，这是血泪经验。
4. 接业务：选中路由、折叠动画与权限过滤
4.1 点击命中测试与选中路由
命中测试要和绘制用同一份拍平列表，否则展开折叠后坐标就错位。鼠标事件里算出索引，反查 NavItem：
protected override void OnMouseDown(MouseEventArgs e) { base.OnMouseDown(e); int index = (e.Y + _scrollOffset) / ItemHeight; var flat = FlattenVisible(_items).ToList(); if (index < 0 || index >= flat.Count) return; var item = flat[index]; if (item.Children.Count > 0) { item.IsExpanded = !item.IsExpanded; ItemExpanded?.Invoke(this, new NavItemEventArgs(item)); } else { SelectItem(item.Id); } Invalidate(); } public void SelectItem(string id) { foreach (var it in FlattenVisible(_items)) it.IsSelected = it.Id == id; SelectedId = id; ItemSelected?.Invoke(this, new NavItemEventArgs(FindById(id))); Invalidate(); }路由交给外部处理，控件只负责抛ItemSelected。主窗体订阅后根据Tag里的窗体类型切换内容区，这样导航控件和业务窗体彻底解耦。
4.2 折叠动画用 Timer 还是直接跳变
整体折叠（收成 60px 图标条）和子菜单展开，要不要动画？我的建议是子菜单展开直接跳变，整体折叠可以加个 120ms 的宽度动画。Timer 间隔设 15ms，每帧改 8~10px，超过就停。动画期间要禁用重入，否则快速点击会叠出多个 Timer。
private Timer _animTimer; private int _targetWidth; private void AnimateWidth(int target) { _targetWidth = target; if (_animTimer == null) { _animTimer = new Timer { Interval = 15 }; _animTimer.Tick += (s, e) => { int diff = _targetWidth - Width; if (Math.Abs(diff) <= 8) { Width = _targetWidth; _animTimer.Stop(); } else Width += Math.Sign(diff) * 8; }; } _animTimer.Start(); }注意动画改的是控件Width，父容器的布局要能跟着走，否则内容区不会自动让位。用Dock = Left加Splitter或者TableLayoutPanel都行，别用绝对坐标。
4.3 按权限动态过滤菜单项
内部系统经常要按角色显示不同菜单。过滤放在数据层，别在绘制层判断，否则拍平列表和命中测试都要重复写权限逻辑。做法是加载时递归标记Visible：
private void ApplyPermission(List<NavItem> items, HashSet<string> allowedIds) { foreach (var item in items) { item.Visible = allowedIds.Contains(item.Id); if (item.Children.Count > 0) { ApplyPermission(item.Children, allowedIds); // 子项全隐藏时，父项也隐藏 if (!item.Children.Any(c => c.Visible)) item.Visible = false; } } }FlattenVisible里只遍历Visible == true的项，这样权限、绘制、命中三处自动一致。
5. 避坑与排查：自绘导航栏最容易翻车的 5 个点
5.1 滚动后点击错位
现象：项多了一屏放不下，滚动之后点第 5 项，选中的却是第 3 项。原因：命中测试没把_scrollOffset算进去，或者绘制和命中用了两份不同的列表。解决：统一用FlattenVisible生成列表，命中时index = (e.Y + _scrollOffset) / ItemHeight，绘制时起始y = -_scrollOffset，两边严格对称。
5.2 悬停高亮闪烁
现象：鼠标移动时整条导航栏闪。原因：OnMouseMove里每次都Invalidate()整个控件，且没开双缓冲。解决：开OptimizedDoubleBuffer，并且只在悬停项发生变化时才重绘，用一个_hoverIndex记录上一次的值，相同就直接 return。
5.3 中文文字发虚、被截断
现象：文字边缘模糊，或者长菜单名后面直接没了。原因：用了Graphics.DrawString且没设TextRenderingHint，或者绘制矩形宽度没减去图标和箭头的占位。解决：改用TextRenderer.DrawText并传TextFormatFlags.EndEllipsis，矩形宽度算成Width - iconWidth - arrowWidth - padding。
5.4 展开子菜单后父项文字被顶掉
现象：展开子项，父项那一行文字消失或错位。原因：拍平列表时把父项和子项都算进去了，但绘制时父项的Level缩进没重置，或者y累加逻辑在递归里重复加了。解决：拍平函数里每项只加一次ItemHeight，缩进按Level * Indent单独算，别混进y。
5.5 高 DPI 下图标和文字不同步缩放
现象：150% 缩放下图标变大了，文字还是原大小，或者反过来。原因：只对部分尺寸做了Scale换算。解决：把ItemHeight、Indent、图标目标矩形、字体大小全部走同一个Scale系数，字体用new Font(Font.FontFamily, Font.Size * Scale)重建，别只改一处。
6. 进阶：把导航栏做成可配置、可换肤的独立控件库
做到上面那步，导航栏已经能用了。但如果项目里多个窗体都要用，或者要交付给别的团队，就该把它抽成独立类库。我一般的做法是建一个NavSidebar.Controls类库项目，把SidebarNav、NavItem、NavItemEventArgs和一套主题类放进去，主项目引用 DLL 即可。
主题这块，别把颜色写死在OnPaint里。定义一个NavTheme类，把背景色、选中色、悬停色、文字色、高亮条色、字体全收进去：
public class NavTheme { public Color Background { get; set; } = Color.FromArgb(33, 37, 43); public Color SelectedBg { get; set; } = Color.FromArgb(45, 55, 70); public Color HoverBg { get; set; } = Color.FromArgb(40, 46, 54); public Color AccentBar { get; set; } = Color.FromArgb(64, 158, 255); public Color TextColor { get; set; } = Color.FromArgb(200, 205, 210); public Color ArrowColor { get; set; } = Color.FromArgb(150, 160, 170); public Font ItemFont { get; set; } = new Font("微软雅黑", 10f); public static NavTheme Dark => new NavTheme(); public static NavTheme Light => new NavTheme { Background = Color.FromArgb(245, 246, 248), SelectedBg = Color.FromArgb(225, 235, 250), HoverBg = Color.FromArgb(235, 238, 242), TextColor = Color.FromArgb(50, 55, 65), ArrowColor = Color.FromArgb(120, 130, 140) }; }控件加一个Theme属性，OnPaint里全部从Theme取色。换肤时只改这一个属性再Invalidate()，不用动绘制代码。这套结构我在三个项目里复用下来，新增一个主题基本就是填几个颜色值的事。
验证方法也简单：写个测试窗体，左边放导航栏，右边放Panel当内容区，菜单项挂几个空窗体，跑起来点一遍，重点看滚动、展开、DPI 切换（把系统缩放从 100% 调到 150% 再调回来）这三件事。这三关过了，基本就能进生产。
最后说个我自己的习惯：每次写完导航控件，我都会把FlattenVisible单独拎出来写几个单元测试，喂进去一棵三层树，断言拍平后的顺序和数量。因为这个函数是绘制、命中、权限三处的公共依赖，它错了，表现出的症状会五花八门，排查起来最费时间。提前把它测住，后面省下的时间远超写测试的那十分钟。希望帮到你。
本文还有配套的精品资源，点击获取
