C# RichTextBox 做简单的HTML代码编辑器 ---------左侧显示行号

说明:此显示行号为实际行号,不论是空行还是自动换行,都计算在内,跟实际IDE的行号不同,同步滚动会有半行高度以内的误差。

实现原理,在RichTextBox 编辑器左侧放置另一RichTextBox (或其它控件也可),行号为编辑器实际文字行数,滚动时计算文字滚动高度,再根据行高算出当前行大约位置,左侧自动滚动到当前行。

如果想准确的话,可以不用行,直接拿到文字滚动高度,右侧行号也滚动到相应高度即可。

        //行号 生成显示  这里rtbLineNum用的 RichTextBox,也可以用其它
        private void ShowLineNum()
        {
            rtbLineNum.Text = "";


            //计算行高,行数
            int linesLength = 0;
            var pFirst = tbEditor.GetPositionFromCharIndex(0);
            var pEnd = tbEditor.GetPositionFromCharIndex(tbEditor.Text.Length);
            if (pEnd.Y > pFirst.Y)
            {
                var pSecondLine = tbEditor.GetPositionFromCharIndex(tbEditor.GetFirstCharIndexFromLine(1));
                var lineHeight = pSecondLine.Y - pFirst.Y;
                linesLength = (pEnd.Y - pFirst.Y) / lineHeight;
            }
            else
            {
                linesLength = 1;
            }

            //生成行数
            for (var i = 0; i < linesLength; i++)
            {
                rtbLineNum.AppendText(i + 1 + "\n");
            }

            //行号右对齐
            rtbLineNum.SelectAll();
            rtbLineNum.SelectionAlignment = HorizontalAlignment.Right;
        }

        //上次滚动位置 行
        private int _scrollToLine = 0;


        //同步滚动
        private void SyncSrollLocation()
        {
            //首行首字符初始位置
            var p = new Point(1,1); 


            //计算行高
            int lineHeight = 0;
            var pFirst = tbEditor.GetPositionFromCharIndex(0);//首行位置
            var pEnd = tbEditor.GetPositionFromCharIndex(tbEditor.Text.Length);//最后一行位置
            if (pEnd.Y > pFirst.Y)//排除只有一行的情况
            {
                var pSecondLine = tbEditor.GetPositionFromCharIndex(tbEditor.GetFirstCharIndexFromLine(1));
                lineHeight = pSecondLine.Y - pFirst.Y;
            }

            //滚动高度 即首行位置移动高度    
            int scrollHeight = p.Y - pFirst.Y;

            //滚动到的行的位置  由于滚动大都并非整行滚动 所以四舍五入 ***程序的误差就在这里
            var scrollTolineIndex = (int)Math.Round((double)(scrollHeight / lineHeight), MidpointRounding.AwayFromZero);     


            if (_scrollToLine != scrollTolineIndex)
            {
                _scrollToLine = scrollTolineIndex;
                var sStart = rtbLineNum.GetFirstCharIndexFromLine(scrollTolineIndex);//左侧行号 当前滚动到行 首字符位置
                if (sStart >= 0)
                {
                    rtbLineNum.SelectionStart = sStart;
                    rtbLineNum.SelectionLength = 0;
                    rtbLineNum.ScrollToCaret();
                }
            }
        }


        //编辑器 Resize事件
        private void tbEditor_Resize(object sender, EventArgs e)
        {
            ShowLineNum();
            SyncSrollLocation();
        }

        //编辑器 TextChanged事件
        private void tbEditor_TextChanged(object sender, EventArgs e)
        {
            ShowLineNum();
            SyncSrollLocation();
        }



        //编辑器 VScroll事件
        private void tbEditor_VScroll(object sender, EventArgs e)
        {
            SyncSrollLocation();
        }

 

  • 1
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
要在 C#RichTextBox 控件左侧显示行号,可以通过以下方法实现: 1. 在你的窗体或用户控件添加一个 RichTextBox 控件,用于显示文本内容。 2. 在左侧添加一个 Panel 控件,用于显示行号。 3. 添加一个事件处理程序,在 RichTextBox 的 TextChanged 事件更新行号。 ```csharp private void richTextBox_TextChanged(object sender, EventArgs e) { UpdateLineNumbers(); } private void UpdateLineNumbers() { // 清空行号面板 linePanel.Controls.Clear(); // 获取 RichTextBox 的行数 int lineCount = richTextBox.Lines.Length; // 计算行号面板的宽度 int panelWidth = TextRenderer.MeasureText(lineCount.ToString(), richTextBox.Font).Width + 8; // 设置行号面板的宽度和高度与 RichTextBox 保持一致 linePanel.Width = panelWidth; linePanel.Height = richTextBox.Height; // 循环添加行号标签到行号面板 for (int i = 1; i <= lineCount; i++) { Label lineLabel = new Label(); lineLabel.Text = i.ToString(); lineLabel.AutoSize = false; lineLabel.TextAlign = ContentAlignment.MiddleRight; lineLabel.Dock = DockStyle.Top; lineLabel.Height = richTextBox.Font.Height; linePanel.Controls.Add(lineLabel); } } ``` 在窗体或用户控件的加载事件,设置行号面板的背景颜色和边框样式,并将 RichTextBox 控件与行号面板对齐。 ```csharp private void Form_Load(object sender, EventArgs e) { // 设置行号面板的背景颜色和边框样式 linePanel.BackColor = Color.LightGray; linePanel.BorderStyle = BorderStyle.FixedSingle; // 将 RichTextBox 控件与行号面板对齐 linePanel.Top = richTextBox.Top; linePanel.Left = richTextBox.Left - linePanel.Width - 1; linePanel.Height = richTextBox.Height; } ``` 这样,当 RichTextBox 的文本发生变化时,行号面板会自动更新并显示行号

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

JackieZhengChina

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值