[DEVEXPRESS] How to using HTML and CSS code viewer

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] Hướng dẫn sử dụng HTML and CSS Code Viewer trên Winform

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);
        }
    }
}

Hoặc bạn có thể tải bộ mã nguồn bên dưới để kiểm tra và test nhé.

  DOWN FULL SOURCE CODE
Mật khẩu giải nén : HUNG.PRO.VN
Và bên dưới là đoạn mã mình chuyển đổi sang VISUAL BASIC.

SOURCE CODE VB.NET

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

Namespace HTMLCSSCodeEditor
    Public Partial Class Form1
        Inherits DevExpress.XtraEditors.XtraForm

        Public Sub New()
            InitializeComponent()
        End Sub

        Private Sub Form1_Load(ByVal sender As Object, ByVal e As EventArgs)
            Dim 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
            panelHTMLEditor.Controls.Add(htmlCodeEditor)
            Dim 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
            panelCSSEditor.Controls.Add(cssCodeEditor)
        End Sub
    End Class
End Namespace

Qua đoạn code trên các bạn có thể tùy biến tạo cho mình một chương trình thất hữu ích cho bản thân và người dùng thời đại công nghệ 4.0 này nhé.

Chúc mọi người thành công.

Theo LapTrinhVB