- [C#] Hướng dẫn bảo mật ứng dụng 2FA (Multi-factor Authentication) trên Winform
- [C#] Hướng dẫn convert HTML code sang PDF File trên NetCore 7 Winform
- [C#] Hướng dẫn viết ứng dụng chat với Gemini AI Google Winform
- Hướng dẫn khóa file bằng nhiều process id, không cho xóa tập tin
- Hướng dẫn cách tạo Product Id cho ứng dụng phần mềm XXXXX-XXXXX-XXXXX-XXXXX
- [SQLSERVER] Hướng dẫn tạo script sql từ ứng dụng Sqlserver management Studio
- [C#] Hướng dẫn sử dụng thư viện AutoITx lấy id và password Ultraviewer trên winform
- [VB.NET] Hướng dẫn lấy thông tin tài khoản đăng nhập windows và khởi động lại ứng dụng ở chế độ Administrator
- [C#] Sử dụng thư viện Polly gửi lại request api khi request bị lỗi hay rớt mạng
- [DEVEXPRESS] Chia sẻ source code tạo báo cáo report in tem nhãn label trên C# winform
- [DEVEXPRESS] Hướng dẫn vẽ biểu đồ Bar Chart trên Winform
- [C#] Tạo form đăng nhập và đăng ký với hiệu ứng Sliding Animation Effect
- [C#] Hướng dẫn tạo thanh toán đơn hàng qua mã vạch VietQR sử dụng API PayOS hoàn toàn miễn phí
- [C#] Hướng dẫn ghi log ra RichTextBox giống Console trên Winform sử dụng thư viện Serilog
- [C#] Hướng dẫn cách tạo mã QR Code trên file Excel
- [VB.NET] Gởi tin nhắn và file đính kèm qua ứng dụng gởi tin nhắn Whats App
- [C#] Viết ứng dụng Auto Fill list Textbox from clipboard Winform
- [TOOL] Chia sẻ phần mềm thay đổi thông tin cấu hình máy tính
- [C#] Hướng dẫn Export dữ liệu ra file Microsoft Word Template
- [C#] Chia sẻ source code tool kiểm tra domain website
[DEVEXPRESS] Hướng dẫn tạo WigetView sử dụng Document Manager dùng để làm Dashboard trong C#
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:
Đầ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:
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
, calendar
và clock
.
Giao diện Run Design của DocumentManager.
Tiếp đến các bạn cấu hình layout chuyển từ Stack => Free layout.
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.
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:
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!