NEWS

[DEVEXPRESS] Hướng dẫn tạo WigetView sử dụng Document Manager dùng để làm Dashboard trong C#

[DEVEXPRESS] Hướng dẫn tạo WigetView sử dụng Document Manager dùng để làm Dashboard trong C#
Đăng bởi: Thảo Meo - Lượt xem: 6643 15:56:18, 23/12/2019DEVEXPRESS   In bài viết

Xin chào các bạn, bài viết hôm nay mình sẽ hướng dẫn các bạn cách sử dụng WigetView trong Devexpress, dùng để thiết kế DashBoard cho ứng dụng C# Winform.

Trong bài viết này, mình sử dụng WigetView với layout là FreeLayout.

Free Layout là layout hoàn toàn tự do, cho phép chúng ta di chuyển và kéo thả dễ dàng.

Các bạn có thể sử dụng Wiget View này để hiển thị nhiều dữ liệu dạng Master-Details của Grid control chẳng hạn.

Dưới đây, là giao diện demo ứng dụng Dashboard C# Winform Devexpress:

wigetview_devexpress_csharp

Đầu tiên, các bạn kéo công cụ documentManager ra và chuyển nó về dạng view Wiget như hình bên dưới:

wiget_view_devepxress

Sau khi chuyển sang chế độ Widget View xong. Ở phía dưới số 3, các bạn click vào "Run Desginer".

Để bắt đầu thiết kế từng document (là mỗi cửa sổ) như hình demo của mình ở trên là bao gồm 4 cửa sổ: chart, employee, calendarclock.

Giao diện Run Design của DocumentManager.

wiget_view_devepxress2

Tiếp đến các bạn cấu hình layout chuyển từ Stack => Free layout.

wiget_view_devepxress3

Và bước cuối cùng là các bạn vào tab "Layout" và kéo thả theo mong muốn hiển thị của mình.

wiget_view_devepxress4

Sau khi thiết kế xong các bạn bấm apply và quay về Form1 Desginer sẽ có hiển thị như hình bên dưới:

wiget_view_devepxress5

Và các bạn viết sự kiện widgetView_QueryControl như bên dưới:

using DevExpress.XtraBars.Docking2010.Views;
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 Document_Management
{
    public partial class Form1 : DevExpress.XtraEditors.XtraForm
    {
        //BaseDocument document1;
        //public Control AccountTemplatePanel { get { return document1.Control; } }
        public Form1()
        {
            InitializeComponent();

            
        }

        private void widgetView_QueryControl(object sender, DevExpress.XtraBars.Docking2010.Views.QueryControlEventArgs e)
        {
            if (!string.IsNullOrEmpty(e.Document.ControlTypeName))
                e.Control = Activator.CreateInstance(Type.GetType(e.Document.ControlTypeName)) as Control;
            else
                e.Control = new Control();

          
        }
    }
}

Còn từng chức năng của mỗi document, các bạn viết ở từng user control nhé.

Chúc các bạn thành công!

 

DOWNLOAD SOURCE

 

THÔNG TIN TÁC GIẢ

BÀI VIẾT LIÊN QUAN

[DEVEXPRESS] Hướng dẫn tạo WigetView sử dụng Document Manager dùng để làm Dashboard trong C#
Đăng bởi: Thảo Meo - Lượt xem: 6643 15:56:18, 23/12/2019DEVEXPRESS   In bài viết

CÁC BÀI CÙNG CHỦ ĐỀ

Đọc tiếp
.