如何为自定义Slider添加带数值刻度线并适配控件尺寸

核心修改思路 #

1. 重新规划控件内部布局，为顶部数值区域预留足够空间，避免字体被遮挡
2. 结合控件高度和刻度间距动态计算字体大小，保证可读性的同时不超出边界
3. 精确计算数值的居中绘制位置，优化视觉对齐效果
4. 规范字体资源的使用，避免内存泄漏

修改后的完整代码 #

using System;
using System.Drawing;
using System.Drawing.Drawing2D;
using System.Windows.Forms;

namespace Test
{
    public static class GraphicsExtensions
    {
        public static void DrawCircle(this Graphics g, Pen pen,
                                      float centerX, float centerY, float radius)
        {
            g.DrawEllipse(pen, centerX - radius, centerY - radius,
                          radius + radius, radius + radius);
        }

        public static void FillCircle(this Graphics g, Brush brush,
                                      float centerX, float centerY, float radius)
        {
            g.FillEllipse(brush, centerX - radius, centerY - radius,
                          radius + radius, radius + radius);
        }
    }

    public class CustomSlider : Control
    {
        private float _radius;
        private PointF _thumbPos;
        private SizeF _barSize;
        private PointF _barPos;
        private float _labelAreaHeight; // 数值标签区域高度

        public event EventHandler ValueChanged;

        public CustomSlider()
        {
            DoubleBuffered = true;
        }

        private float _min = 0.0f;
        public float Min
        {
            get => _min;
            set
            {
                _min = value;
                RecalculateParameters();
            }
        }

        private float _max = 1.0f;
        public float Max
        {
            get => _max;
            set
            {
                _max = value;
                RecalculateParameters();
            }
        }

        private float _value = 0.3f;
        public float Value
        {
            get => _value;
            set
            {
                _value = Math.Clamp(value, Min, Max);
                ValueChanged?.Invoke(this, EventArgs.Empty);
                RecalculateParameters();
            }
        }

        protected override void OnPaint(PaintEventArgs e)
        {
            base.OnPaint(e);
            e.Graphics.SmoothingMode = SmoothingMode.AntiAlias;

            // 绘制灰色滑块轨道
            e.Graphics.FillRectangle(Brushes.DarkGray, _barPos.X, _barPos.Y, _barSize.Width, _barSize.Height);
            e.Graphics.DrawRectangle(Pens.Gray, _barPos.X, _barPos.Y, _barSize.Width, _barSize.Height);

            // 计算刻度参数
            int numLines = 10;
            float lineSpacing = _barSize.Width / (numLines - 1); // 确保首尾刻度对齐轨道两端

            // 动态计算字体大小：取标签区域高度的70%，限制字号范围
            float fontSize = Math.Clamp(_labelAreaHeight * 0.7f, 8f, 20f);
            using (Font numFont = new Font("Arial", fontSize, FontStyle.Regular, GraphicsUnit.Pixel))
            {
                float numY = 2f; // 数值从顶部开始绘制，预留边距

                for (int i = 0; i < numLines; i++)
                {
                    float lineX = _barPos.X + i * lineSpacing;

                    // 绘制刻度线（从轨道底部向下延伸）
                    e.Graphics.DrawLine(Pens.White, lineX, _barPos.Y + _barSize.Height, lineX, _barPos.Y + _barSize.Height + 8f);

                    // 绘制数值：精确居中对齐刻度线
                    string numberString = ((int)(Min + (Max - Min) * i / (numLines - 1))).ToString();
                    SizeF numSize = e.Graphics.MeasureString(numberString, numFont);
                    float numX = lineX - numSize.Width / 2f;

                    // 确保数值不超出控件边界
                    numX = Math.Max(numX, 2f);
                    if (numX + numSize.Width > ClientSize.Width)
                        numX = ClientSize.Width - numSize.Width - 2f;

                    e.Graphics.DrawString(numberString, numFont, Brushes.Black, numX, numY);
                }
            }

            // 绘制红色滑块thumb
            using (GraphicsPath thumbPath = new GraphicsPath())
            {
                thumbPath.AddEllipse(_thumbPos.X - _radius, _thumbPos.Y - _radius, _radius * 2f, _radius * 2f);
                using (PathGradientBrush thumbBrush = new PathGradientBrush(thumbPath))
                {
                    thumbBrush.CenterPoint = new PointF(_thumbPos.X, _thumbPos.Y);
                    thumbBrush.CenterColor = Color.White;
                    thumbBrush.SurroundColors = new[] { Color.Red };
                    e.Graphics.FillPath(thumbBrush, thumbPath);
                }
                e.Graphics.DrawEllipse(Pens.White, _thumbPos.X - _radius, _thumbPos.Y - _radius, _radius * 2f, _radius * 2f);
            }
        }

        protected override void OnResize(EventArgs e)
        {
            base.OnResize(e);
            RecalculateParameters();
        }

        private void RecalculateParameters()
        {
            // 预留标签区域高度：取控件高度的1/3，至少20px
            _labelAreaHeight = Math.Max(ClientSize.Height / 3f, 20f);
            // 剩余高度分配给滑块轨道和thumb
            float availableHeight = ClientSize.Height - _labelAreaHeight - 10f; // 轨道与标签的间距

            _radius = availableHeight / 2f;
            _barSize = new SizeF(ClientSize.Width - 2f * _radius, availableHeight / 2f);
            _barPos = new PointF(_radius, _labelAreaHeight + 10f + (availableHeight - _barSize.Height) / 2);
            
            // 计算thumb位置，确保在轨道范围内
            float valueRatio = (Value - Min) / (Max - Min);
            _thumbPos = new PointF(
                _barPos.X + valueRatio * _barSize.Width,
                _barPos.Y + _barSize.Height / 2f);
            
            Invalidate();
        }

        bool _moving = false;
        SizeF _delta;

        protected override void OnMouseDown(MouseEventArgs e)
        {
            base.OnMouseDown(e);
            _delta = new SizeF(e.Location.X - _thumbPos.X, e.Location.Y - _thumbPos.Y);
            if (_delta.Width * _delta.Width + _delta.Height * _delta.Height <= _radius * _radius)
            {
                _moving = true;
            }
        }

        protected override void OnMouseMove(MouseEventArgs e)
        {
            base.OnMouseMove(e);
            if (_moving)
            {
                float thumbX = e.Location.X - _delta.Width;
                thumbX = Math.Clamp(thumbX, _barPos.X, _barPos.X + _barSize.Width);
                Value = Min + (thumbX - _barPos.X) * (Max - Min) / _barSize.Width;
            }
        }

        protected override void OnMouseUp(MouseEventArgs e)
        {
            base.OnMouseUp(e);
            _moving = false;
        }
    }
}

关键改动说明 #

• 空间分配优化：新增_labelAreaHeight变量，专门预留顶部区域用于显示数值，避免与滑块轨道重叠遮挡
• 字体动态计算：基于标签区域高度的70%计算字号，用Math.Clamp限制字号范围（8-20px），兼顾可读性和适配性
• 刻度对齐修正：将刻度间距计算改为_barSize.Width / (numLines - 1)，确保首尾刻度精准对齐轨道两端
• 数值位置校准：精确计算数值的水平居中位置，添加边界检查避免数值超出控件范围
• 资源管理优化：对Font、GraphicsPath等可释放对象使用using语句，自动释放资源防止内存泄漏

内容的提问来源于stack exchange，提问作者Daniel Lip