DevExpress中TileView的使用

 1、前期准备

VS2019、DevExpress19.2、MySql5.7、FreeSql3.2.808、.Net Farmework 4.8
2、创建本次示例中所需数据库及表

我这里建立的数据库为loldb，其下会使用到hero和country两个表


3、在VS2019进行代码实现

1、首先在vs2019中建立一个WinForm窗体，并取名TileViewDemo



 
2、窗体创建完成后引入我们本次会使用到的dll文件

Dev类目dll文件引用时需要我们在系统中确保已经安装了DevExpress19.2
FreeSql类目dll文件可以通过NuGet手动下载对应版本

 
3、为了美观，可设置为DevExpress窗体


4、回到设计界面，在工具箱中找到对应控件

找到GridControl控件拖拽至主界面中，并将该控件Dock设置为Fill。

转换view为TileView


5、点击Run Designer进行内容设计

 添加column列表,并对一些特殊column进行设置


Views设置

Layout设置

 Tile Template设置

 
 
6、创建数据库连接类


 
7、创建Domain

 

 hero表

1. using System;
2. using System.Collections.Generic;
3. using Newtonsoft.Json;
4. using FreeSql.DataAnnotations;
6. namespace Domain {
8.         [JsonObject(MemberSerialization.OptIn)]
9.         public partial class hero {
11.                 [JsonProperty, Column(IsPrimary = true, IsIdentity = true)]
12.                 public int N_Id { get; set; }
14.                 [JsonProperty]
15.                 public int CountryId { get => _CountryId; set {
16.                         if (_CountryId == value) return;
17.                         _CountryId = value;
18.                         country = null;
19.                 } }
20.                 private int _CountryId;
22.                 [JsonProperty]
23.                 public string ImgSrc { get; set; }
25.                 [JsonProperty]
26.                 public string Name { get; set; }
28.                 [JsonProperty]
29.                 public string NickName { get; set; }
31.                 [JsonProperty]
32.                 public Sex Sex { get; set; }
35.                 #region 外键 => 导航属性，ManyToOne/OneToOne
37.                 [Navigate("CountryId")]
38.                 public virtual country country { get; set; }
40.                 #endregion
42.                 #region 外键 => 导航属性，ManyToMany
44.                 #endregion
45.         }
47.         public enum Sex {
48.                 女,
49.                 男
50.         }
51. }

复制代码

　
8、关键代码

　

1. using Domain;
2. using System;
3. using System.Collections.Generic;
4. using System.ComponentModel;
5. using System.Data;
6. using System.Drawing;
7. using System.Linq;
8. using System.Text;
9. using System.Threading.Tasks;
10. using System.Windows.Forms;
12. namespace TileViewDemo
13. {
14.     public partial class MainForm : DevExpress.XtraEditors.XtraForm
15.     {
16.         public MainForm()
17.         {
18.             InitializeComponent();
19.         }
21.         private void MainForm_Load(object sender, EventArgs e)
22.         {
23.             Global.Instance.ConnnectionServer(out string exMsg);
24.             if (!string.IsNullOrEmpty(exMsg))
25.             {
26.                 MessageBox.Show("数据库连接失败:" + exMsg);
27.                 return;
28.             }
29.             List<hero> heroes = Global.Instance.freeSql.Select<hero>().Include(a => a.country).ToList();
30.             List<herodDto> heroDtos = new List<herodDto>();
31.             foreach (var item in heroes)
32.             {
33.                 herodDto herodDto = new herodDto()
34.                 {
35.                     Id = item.N_Id,
36.                     Photo = Image.FromFile(item.ImgSrc),
37.                     Name = item.Name,
38.                     NickName = item.NickName,
39.                     Sex = item.Sex,
40.                     CountryName = item.country.CountryName
41.                 };
42.                 heroDtos.Add(herodDto);
43.             }
44.             gc_DataList.DataSource = heroDtos;
45.         }
47.         /// <summary>
48.         /// 定制每个卡片
49.         /// </summary>
50.         /// <param name="sender"></param>
51.         /// <param name="e"></param>
52.         private void tv_DataList_ItemCustomize(object sender, DevExpress.XtraGrid.Views.Tile.TileViewItemCustomizeEventArgs e)
53.         {
54.             if (e.Item == null || e.Item.Elements.Count == 0)
55.                 return;
56.             int sex = (int)tv_DataList.GetRowCellValue(e.RowHandle, tv_DataList.Columns["Sex"]);
58.             Color female = Color.LightBlue;
59.             Color male = Color.DarkRed;
61.             e.Item.Elements[5].Text = String.Empty;
62.             if (sex == 1)
63.                 e.Item.Elements[5].Appearance.Normal.BackColor = female;
64.             else
65.                 e.Item.Elements[5].Appearance.Normal.BackColor = male;
66.         }
68.         /// <summary>
69.         /// 每个卡片的点击事件
70.         /// </summary>
71.         /// <param name="sender"></param>
72.         /// <param name="e"></param>
73.         private void tv_DataList_ItemClick(object sender, DevExpress.XtraGrid.Views.Tile.TileViewItemClickEventArgs e)
74.         {
75.             herodDto herodDto = tv_DataList.GetRow(e.Item.RowHandle) as herodDto;
76.             herodDto.IsSelect = !herodDto.IsSelect;
77.             tv_DataList.RefreshRow(e.Item.RowHandle);
78.         }
79.     }
81.     public class herodDto
82.     {
83.         public int Id { get; set; }
84.         public Image Photo { get; set; }
85.         public string Name { get; set; }
86.         public string NickName { get; set; }
87.         public Sex Sex { get; set; }
88.         public string CountryName { get; set; }
89.         public bool IsSelect { get; set; } = true;
90.     }
91. }

复制代码

　
9、实际显示


 

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！