[DEVEXPRESS] Hướng dẫn tạo intro giới thiệu phần mềm sử dụng Guide Adorner trong C#

Bài viết hôm nay, mình sẽ hướng dẫn các bạn cách giới thiệu và hướng dẫn sử dụng ứng dụng phần mềm sử dụng Guide Adorner trong bộ công cụ của Devexpress.

Khi các bạn viết ứng dụng của mình xong, thì thường phải viết tài liệu hướng dẫn sử dụng phần mềm.

Nhưng trong Devexpress có cung cấp cho chúng ta component Adorner, chúng ta có thể sử dụng công cụ này để giới thiệu và hướng dẫn người sử dụng phần mềm của mình.

Dưới đây là giao diện demo hướng dẫn ứng dụng đơn giản Login vào hệ thống bằng lập trình C#.

- Để viết được ứng dụng trên.

- Chúng ta phải tao một usercontrol cái tooltip giống trên hình với tên: GuideFlyoutPanel.cs

Source code file GuideFlyoutPanel.cs bằng C#

using System;
using System.Collections.Generic;
using System.Drawing;
using System.Windows.Forms;
using DevExpress.Utils.VisualEffects;

namespace Guide_Adorner
{
       public partial class GuideFlyoutPanel : UserControl
    {
        int curentLessonIdCore;
        Form1 module;
        public GuideFlyoutPanel(Form1 moduleGuide, int lessonCount)
        {
            InitializeComponent();
            module = moduleGuide;
            curentLessonIdCore = 0;
            InitializeNavigator(lessonCount);
        }
       
        void InitializeNavigator(int count)
        {
            for (int i = 0; i < count; i++)
            {
                this.navigator.Buttons.Add(new DevExpress.XtraBars.Docking2010.WindowsUIButton("Button", GetResourceImage(), 0, DevExpress.XtraBars.Docking2010.ImageLocation.Default, DevExpress.XtraBars.Docking2010.ButtonStyle.CheckButton, "", false, -1, true, null, true, i == curentLessonIdCore, true, null, null, 1, false, false));
            }
        }
      
        public string LabelText
        {
            get { return label.Text; }
            set { label.Text = value; }
        }
        
        public int CurrentLessonIndex
        {
            get { return curentLessonIdCore; }
        }
        
        Image GetResourceImage()
        {
            return Guide_Adorner.Properties.Resources.navigationButton as Image;
        }
       
        private void OnNavigatorButtonChecked(object sender, DevExpress.XtraBars.Docking2010.ButtonEventArgs e)
        {
            curentLessonIdCore = navigator.Buttons.IndexOf(e.Button);
            module.SetLesson(curentLessonIdCore);
        }
        
        private void OnSkipButtonClick(object sender, EventArgs e)
        {
            module.EndTutorial();
        }
        
        private void OnBackButtonClick(object sender, EventArgs e)
        {
            curentLessonIdCore--;
            if (curentLessonIdCore < 0)
            {
                curentLessonIdCore = navigator.Buttons.Count - 1;
            }
            navigator.Buttons[curentLessonIdCore].Properties.Checked = true;
        }
       
        private void OnNextButtonClick(object sender, EventArgs e)
        {
            curentLessonIdCore++;
            if (curentLessonIdCore > navigator.Buttons.Count - 1)
            {
                curentLessonIdCore = 0;
            }
            navigator.Buttons[curentLessonIdCore].Properties.Checked = true;
        }
    }
}

- Tiếp theo, chúng ta sẽ viết source code cho form giới thiệu:

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 Guide_Adorner
{
    public partial class Form1 : DevExpress.XtraEditors.XtraForm
    {
        GuideFlyoutPanel panel;
        int countLessons;
        public Form1()
        {
            InitializeComponent();

            countLessons = 5;
            panel = new GuideFlyoutPanel(this, countLessons);
            adornerTutorial.QueryGuideFlyoutControl += OnQueryGuideFlyoutControl;
        }

        void OnQueryGuideFlyoutControl(object sender, DevExpress.Utils.VisualEffects.QueryGuideFlyoutControlEventArgs e)
        {
            e.Control = panel;
        }

        void Lesson1()
        {
            panel.LabelText = "Logo Lập trình vb.net";
            guideTutorial.TargetElement = imgLogo;
            adornerTutorial.SelectElement(guideTutorial);
        }

        void Lesson2()
        {
            panel.LabelText = "Nhập tài khoản username của bạn vào";
            guideTutorial.TargetElement = txtusername;
            adornerTutorial.SelectElement(guideTutorial);
        }

        void Lesson3()
        {
            panel.LabelText = "Nhập mật khẩu vào để đăng nhập";
            guideTutorial.TargetElement = txtpassword;
            adornerTutorial.SelectElement(guideTutorial);
        }

        void Lesson4()
        {
            panel.LabelText = "Bấm nút login để đăng nhập vào hệ thống";
            guideTutorial.TargetElement = btnlogin;
            adornerTutorial.SelectElement(guideTutorial);
        }

        public void EndTutorial()
        {
            adornerTutorial.ShowGuides = DevExpress.Utils.DefaultBoolean.Default;
            adornerTutorial.SelectElement(null);
        }
        public void SetLesson(int index)
        {
            if (index < 0 || index > countLessons - 1) return;

            switch (index)
            {
                case 0:
                    Lesson1(); break;
                case 1:
                    Lesson2(); break;
                case 2:
                    Lesson3(); break;
                case 3:
                    Lesson4(); break;

            }
        }
        public void StartTutorial()
        {
            adornerTutorial.ShowGuides = DevExpress.Utils.DefaultBoolean.True;
            SetLesson(0);
        }
        private void simpleButton1_Click(object sender, EventArgs e)
        {
            StartTutorial();
        }
    }
}

Các bạn có thể download source ở bên dưới để tham khảo.

DOWNLOAD SOURCE

Happy Coding :)