Xin chào các bạn, bài viết hôm nay mình tiếp tục chia sẻ các bạn cách sử dụng HTMLCodeViewer và CSSCodeViewer trên Devexpress Winform.

[DEVEXPRESS] How to using HTML and CSS code viewer

Hai control này trên Devexpress mặc định không có hiển thị ở thanh ToolBox của Visual Studio.

Nên các bạn cần viết một vào dòng code để hiện thị nó lên và gắn vào Panel control.

Giao diện demo ứng dụng:

Các bạn có thể xem video hướng dẫn từng bước thực hiện:

Source code c#:

using DevExpress.XtraEditors.Internal;
using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Linq;
using System.Text;
using System.Windows.Forms;

namespace HTMLCSSCodeEditor
{
    public partial class Form1 : DevExpress.XtraEditors.XtraForm
    {
        public Form1()
        {
            InitializeComponent();
        }

        private void Form1_Load(object sender, EventArgs e)
        {
            var htmlCodeEditor = new HtmlCodeViewer();
            htmlCodeEditor.ReadOnly = false;
            htmlCodeEditor.Dock = DockStyle.Fill;
            htmlCodeEditor.AllowCodeFolding = DevExpress.Utils.DefaultBoolean.True;
            htmlCodeEditor.ShowIndentGuides = DevExpress.Utils.DefaultBoolean.True;
            htmlCodeEditor.ShowLineNumbers = DevExpress.Utils.DefaultBoolean.True;
            htmlCodeEditor.ScrollBars = ScrollBars.Both;

            // add control to panel
            panelHTMLEditor.Controls.Add(htmlCodeEditor);

            var cssCodeEditor = new CssCodeViewer();
            cssCodeEditor.ReadOnly = false;
            cssCodeEditor.Dock = DockStyle.Fill;
            cssCodeEditor.AllowCodeFolding = DevExpress.Utils.DefaultBoolean.True;
            cssCodeEditor.ShowIndentGuides = DevExpress.Utils.DefaultBoolean.True;
            cssCodeEditor.ShowLineNumbers = DevExpress.Utils.DefaultBoolean.True;
            cssCodeEditor.ScrollBars = ScrollBars.Both;
            // press Ctrol + Alt + . => multi select in visual studio
            // add control to panel
            panelCSSEditor.Controls.Add(cssCodeEditor);
        }
    }
}

Thanks for watching!

DOWNLOAD SOURCE