- [VB.NET] Hướng dẫn giải captcha sử dụng dịch vụ AZCaptcha API trên winform
- [C#] Hướng dẫn chứng thực đăng nhập ứng dụng bằng vân tay (Finger Print) trên máy tính
- [C#] Color Thief cách xuất màu sắc thiết kế từ hình ảnh
- [C#] Cách tạo bản quyền và cho phép dùng thử ứng dụng Winform
- [C#] Hướng dẫn sử dụng trình duyệt web Chrome convert HTML sang tập tin file PDF
- [C#] Kết nôi điện thoại Android, IOS với App Winform via Bluetooth
- [DATABASE] Cách query cộng trừ dồn dần trong Sqlserver
- [C#] Thiết kế ứng dụng Console đẹp với thư viện Spectre.Console
- [C#] Thiết kế ứng dụng Single Instance và đưa ứng dụng lên trước nếu kiểm tra ứng dụng đang chạy
- [C#] Giới thiệu JSON Web Token và cách đọc chuỗi token
- [C#] Cách tăng giảm font chữ tất cả các control trên winform
- [DEVEXPRESS] Tích hợp chức năng Tìm kiếm Search vào CheckedComboboxEdit
- [C#] Gởi email Metting Calendar Reminder kèm nhắc thời gian lịch họp
- [C#] Tìm kiếm xem danh sách từ khóa có tồn tại trong đoạn văn bản hay không
- [C#] Thiết kế giao diện ứng dụng trên Console sử dụng thư viện Terminal.Gui
- [C#] Hướng dẫn tạo mã VietQR Payment API Winform
- [C#] Sử dụng thư viện BenchmarkDotNet đo hiệu năng của hảm Method
- [DEVEXPRESS] Tìm kiếm không dấu tô màu highlight có dấu trên C# Winform
- [C#] Chia sẻ source code tạo hiệu ứng pixel Image trên winform
- [C#] Hướng dẫn kiểm tra số Container hợp lệ hay không
[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!