- [C#] Hướng dẫn fix lỗi Visual Studio 2022 not Support Target Net Framework 4.5.2
- [C#] Giới thiệu thư viện Sunny UI thiết kế giao diện trên Winform
- [DATABASE] Hướng dẫn thêm và cập nhật Extended Property Column trong Table Sqlserver
- [DEVEXPRESS] Hướng dẫn sử dụng Vertical Gridview để hiển thị thông tin sản phẩm
- [C#] Hướng dẫn sử dụng Json Schema để Validate chuỗi string có phải json
- [C#] Hướng dẫn sử dụng công cụ Clean Code trên Visual Studio
- [C#] Hướng dẫn Drag and Drop File vào RichTextBox
- [C#] Hướng dẫn tạo hiệu ứng Karaoke Text Effect Winform
- [C#] Sử dụng thư viện ZedGraph vẽ biểu đồ Line, Bar, Pie trên Winform
- [DATABASE] Hướng dẫn sort sắp xếp địa chỉ IP trên sqlserver sử dụng hàm PARSENAME
- [C#] Theo dõi sử kiện process Start hay Stop trên Winform
- [ASP.NET] Chia sẻ source code chụp hình sử dụng camera trên website
- [C#] Chạy ứng dụng trên Virtual Desktop (màn hình ảo) Winform
- [C#] Mã hóa và giải mã Data Protection API trên winform
- [C#] Hướng dẫn tạo Gradient Background trên Winform
- [DATABASE] Hướng dẫn convert Epoch to DateTime trong sqlserver
- [DATABASE] Hướng dẫn sử dụng STRING_AGG và CONCAT_WS trong sqlserver 2017
- [C#] Hướng dẫn Copy With All Property in Class Object
- [DEVEXPRESS] Hướng dẫn load Json DataSource vào GridView
- [C#] Hướng dẫn tạo chữ ký trên winform Signature Pad
[DEVEXPRESS] Hướng dẫn sử dụng layout TileView trong SearchLookupEdit winform
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 sử dụng layout Mode TileView trong SearchLookupEdit của Devexpress bằng ngôn ngữ C#.
[C#] TileView in SearchLookupEdit Devexpress
Trong Gridview, GridLookupEdit hay SearchLookupEdit của Devexpress, có chúng ta sử dụng rất nhiều loại layout để hiển thị với người dùng.
Trong bài hướng dẫn hôm nay, mình sẽ sử dụng SearchLookupEdit để hiển thị thông tin của nhân viên, giúp cho ứng dụng của chúng ta nhìn trực quan và đẹp hơn.
Dưới đây là giao diện SearchLookupEdit sử dụng layout Tileview C#:
Đầu tiên các bạn sử dụng một SeachLookupEdit vào project của mình (Bài viết này bạn có thể áp dụng tương tự cho GridLookupEdit).
Chọn thuộc tính PopupViewtype => TileView cho SearchLookupEdit như hình bên dưới.
Tiếp theo các bạn vào RunDesign để thiết kế layout cho SearchLookupEdit ở dụng Tileview, các bạn xem ở hình ảnh bên dưới.
Giao diện thiết kế layout tileview
Ở chế độ này cho phép chúng ta chọn LayoutMode ở các dạng như: List
, Kanban
và Default
.
Ngoài ra chúng ta cũng có thể chọn chế độ hiện thị là: horizontal hay vertical.
Do trong bài viết, khi mình truy vấn dữ liệu từ Sqlserver lên, nó sẽ trả cho chúng ta một đường dẫn url đến website, chứ không phải là kiểu hình ảnh.
Vì vậy, trong bài viết mình sử dụng một implement INotifyPropertyChanged
để load image.
Source code của chương trình TileView Devexpress C#:
using DevExpress.Utils;
using DevExpress.XtraEditors.Controls;
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 Tileview_GridLookup
{
public partial class Form1 : DevExpress.XtraEditors.XtraForm
{
public Form1()
{
InitializeComponent();
}
BindingList<NhanVien> list;
private void Form1_Load(object sender, EventArgs e)
{
var provider = new DataProvider();
var dt = provider.ExecuteQuery("EXEC pro_get_nhanvien");
list = new BindingList<NhanVien>();
foreach (DataRow dr in dt.Rows)
{
string manv = dr["manv"].ToString();
string tennv = dr["tennv"].ToString();
string ngaysinh = dr["ngaysinh"].ToString();
string diachi1 = dr["diachi1"].ToString();
string image = dr["image"].ToString();
list.Add(new NhanVien(manv, tennv, ngaysinh, diachi1, image));
}
searchLookUpEdit1.Properties.DataSource = list;
searchLookUpEdit1.Properties.ValueMember = "manv";
searchLookUpEdit1.Properties.DisplayMember = "tennv";
comboBox1.DataSource = Enum.GetValues(typeof(DevExpress.XtraGrid.Views.Tile.TileViewLayoutMode));
}
public class NhanVien : INotifyPropertyChanged
{
//tennv, ngaysinh, diachi1, image
public string manv { get; set; }
public string tennv { get; set; }
public string ngaysinh { get; set; }
public string diachi1 { get; set; }
public Image image { get; set; }
public event PropertyChangedEventHandler PropertyChanged;
public NhanVien(string manv, string tennv, string ngaysinh, string diachi1, string url)
{
this.manv = manv;
this.tennv = tennv;
this.ngaysinh = ngaysinh;
this.diachi1 = diachi1;
image = ResourceImageHelper.CreateImageFromResources("DevExpress.XtraEditors.Images.loading.gif", typeof(BackgroundImageLoader).Assembly);
BackgroundImageLoader bg = new BackgroundImageLoader();
bg.Load(url);
bg.Loaded += (s, e) =>
{
image = bg.Result;
if (!(image is Image)) image = ResourceImageHelper.CreateImageFromResources("DevExpress.XtraEditors.Images.Error.png", typeof(BackgroundImageLoader).Assembly);
PropertyChanged(this, new PropertyChangedEventArgs("image"));
bg.Dispose();
};
}
}
private void comboBox1_SelectedIndexChanged(object sender, EventArgs e)
{
string value = comboBox1.Text;
switch (value)
{
case "Default":
searchLookUpEdit1View.OptionsTiles.LayoutMode = DevExpress.XtraGrid.Views.Tile.TileViewLayoutMode.Default;
break;
case "Kanban":
searchLookUpEdit1View.OptionsTiles.LayoutMode = DevExpress.XtraGrid.Views.Tile.TileViewLayoutMode.Kanban;
break;
case "List":
searchLookUpEdit1View.OptionsTiles.LayoutMode = DevExpress.XtraGrid.Views.Tile.TileViewLayoutMode.List;
break;
}
}
}
}
Video demo ứng dụng:
Các bạn download project về chỉ tham khảo và chọn database của các bạn để sử dụng nhé.
Thanks for watching!