DevExpress Winforms Controls 內(nèi)置140多個(gè)UI控件和庫，完美構(gòu)建流暢、美觀且易于使用的應(yīng)用程序。DevExpress WinForm v20.1全新發(fā)布，想要體驗(yàn)？點(diǎn)擊下載>>

我們知道，基于DevExpress的開發(fā)Winform的項(xiàng)目界面的時(shí)候，GridControl控件是經(jīng)常用來綁定數(shù)據(jù)的，一般以常規(guī)的字符內(nèi)容為主，有時(shí)候也會(huì)有圖片的顯示需要，那么如果顯示圖片，我們應(yīng)該如何實(shí)現(xiàn)呢？本文將為大家介紹基于原生GridControl控件的圖片綁定顯示操作和基于我封裝的分頁控件（封裝GridControl的分頁控件）兩種圖片綁定顯示的操作。

一、基于原生的GridControl控件圖片綁定

綁定圖片，一般我們可以在單元格里面綁定byte[]類型或者Image類型，那么控件就會(huì)自動(dòng)顯示圖片出來，當(dāng)然我們也可以自定義對(duì)圖片路徑轉(zhuǎn)換為圖片然后顯示的，不過就是額外需要增加一些處理而已。

本例子針對(duì)這三種方式分別進(jìn)行介紹，圖片的綁定操作。

為了方便演示，我們創(chuàng)建一個(gè)菜單對(duì)象類，然后構(gòu)建一些數(shù)據(jù)用于列表的綁定操作，如下代碼所示。

/// <summary>
/// 模擬一個(gè)菜單的對(duì)象，包括各種類型的圖片信息
/// </summary>
public class MenuInfo
{
/// <summary>
/// 編號(hào)
/// </summary>
public string ID { get; set; }

/// <summary>
/// 圖標(biāo)名稱
/// </summary>
public string Name { get; set; }

/// <summary>
/// 圖片路徑
/// </summary>
public string ImageFilePath {get;set;}

/// <summary>
/// 圖標(biāo)字節(jié)
/// </summary>
public virtual byte[] EmbedIcon { get; set; }

/// <summary>
/// 圖標(biāo)圖片對(duì)象
/// </summary>
public Image ImageIcon { get; set; }

/// <summary>
/// 構(gòu)造函數(shù)
/// 為了展示的方便，在構(gòu)造函數(shù)里面構(gòu)造相應(yīng)的數(shù)據(jù)
/// </summary>
public MenuInfo()
{
this.ID = Guid.NewGuid().ToString();
this.Name = "測試圖片菜單";
this.ImageFilePath = Path.Combine(System.Environment.CurrentDirectory, "app.ico");
if (File.Exists(this.ImageFilePath))
{
this.EmbedIcon = FileUtil.FileToBytes(this.ImageFilePath);
this.ImageIcon = ImageHelper.ImageFromUrl(this.ImageFilePath);
}
}

創(chuàng)建GridColumn的時(shí)候，我們可以利用GridVIew的擴(kuò)展函數(shù)CreateColumn進(jìn)行創(chuàng)建幾個(gè)不同的列，如下代碼所示。

public partial class FrmRepositoryItemImageEdit : BaseForm
{
public FrmRepositoryItemImageEdit()
{
InitializeComponent();

CreateGridView();
}

/// <summary>
/// 創(chuàng)建gridView1列表所需顯示的列
/// </summary>
private void CreateGridView()
{
//創(chuàng)建一個(gè)隱藏的ID列
this.gridView1.CreateColumn("ID", "ID").Visible = false;
//串一個(gè)名稱的列，并指定寬度
this.gridView1.CreateColumn("Name", "名稱", 150);

//創(chuàng)建一個(gè)圖片路徑的列，并指定它的編輯控件類型為RepositoryItemImageEdit
//并為這個(gè)列實(shí)現(xiàn)ParseEditValue的方法，用于解析路徑為具體的圖片顯示
this.gridView1.CreateColumn("ImageFilePath", "圖片路徑綁定", 100).CreateImageEdit().ParseEditValue += (s, e) =>
{
if (e.Value != null && e.Value is string && e.Value.ToString() != string.Empty)
{
e.Value = Image.FromFile(string.Concat(e.Value));
e.Handled = true;
}
};

//創(chuàng)建圖片字節(jié)的列，用于顯示圖片
this.gridView1.CreateColumn("EmbedIcon", "圖片字節(jié)綁定", 100);
//創(chuàng)建圖片對(duì)象的列，用于顯示圖片
this.gridView1.CreateColumn("ImageIcon", "圖片對(duì)象綁定", 100);
}

上面代碼是創(chuàng)建GridView所需要顯示的列信息，那么我們準(zhǔn)備好數(shù)據(jù)源綁定到列表控件上就可以了，如下代碼所示。

/// <summary>
/// 綁定列表數(shù)據(jù)
/// </summary>
private void BindData()
{
//構(gòu)造只有一個(gè)記錄的集合
List<MenuInfo> menuList = new List<MenuInfo>()
{
new MenuInfo()
};

//綁定數(shù)據(jù)源到列表控件上
this.gridControl1.DataSource = menuList;
}

二、基于分頁控件的圖片綁定

很多時(shí)候，我們需要對(duì)數(shù)據(jù)庫的數(shù)據(jù)進(jìn)行分頁顯示，以提高顯示的速度和效率，那么利用分頁控件就可以獲得很多這樣統(tǒng)一的界面和高效率顯示數(shù)據(jù)的好處，基于分頁控件的處理本質(zhì)上和上面的過程差不多，不過處理的代碼需要變化一下，從而可以正常的實(shí)現(xiàn)圖片綁定顯示操作。

/// <summary>
/// 基于分頁控件的圖片顯示案例
/// </summary>
public partial class FrmRepositoryItemImageEdit2 : BaseForm
{
public FrmRepositoryItemImageEdit2()
{
InitializeComponent();

CreateGridView();
}

/// <summary>
/// 創(chuàng)建gridView1列表所需顯示的列
/// </summary>
private void CreateGridView()
{
this.winGridViewPager1.OnPageChanged += new EventHandler(winGridViewPager1_OnPageChanged);
this.winGridViewPager1.OnRefresh += new EventHandler(winGridViewPager1_OnRefresh);
this.winGridViewPager1.AppendedMenu = this.contextMenuStrip1;
this.winGridViewPager1.ShowLineNumber = true;
this.winGridViewPager1.BestFitColumnWith = false;//是否設(shè)置為自動(dòng)調(diào)整寬度，false為不設(shè)置
this.winGridViewPager1.gridView1.DataSourceChanged += new EventHandler(gridView1_DataSourceChanged);
}

/// <summary>
/// 綁定數(shù)據(jù)后，分配各列的寬度
/// </summary>
private void gridView1_DataSourceChanged(object sender, EventArgs e)
{
//對(duì)圖片路徑的列，重新使用RepositoryItemPictureEdit類型
//然后對(duì)該列的控件的ParseEditValue和FormatEditValue函數(shù)進(jìn)行實(shí)現(xiàn)，從而實(shí)現(xiàn)路徑到圖片的顯示
var edit = this.winGridViewPager1.gridView1.Columns.ColumnByFieldName("ImageFilePath").CreatePictureEdit(); 
edit.ParseEditValue += (s, se) =>
{
if (se.Value != null && se.Value.GetType() == typeof(string) && se.Value.ToString() != string.Empty)
{
if (File.Exists(string.Concat(se.Value)))
{
var picture = ImageHelper.ImageFromUrl(string.Concat(se.Value));
se.Value = picture;
se.Handled = true;

}
}
};
edit.FormatEditValue += (s, se) =>
{
if (File.Exists(string.Concat(se.Value)))
{
var picture = ImageHelper.ImageFromUrl(string.Concat(se.Value));
se.Value = picture;
se.Handled = true;
}
};

if (this.winGridViewPager1.gridView1.Columns.Count > 0 && this.winGridViewPager1.gridView1.RowCount > 0)
{
//統(tǒng)一設(shè)置100寬度
foreach (DevExpress.XtraGrid.Columns.GridColumn column in this.winGridViewPager1.gridView1.Columns)
{
column.Width = 120;
}

//可特殊設(shè)置特別的寬度
GridView gridView = this.winGridViewPager1.gridView1;
if (gridView != null)
{
//gridView.SetGridColumWidth("Note", 200);
}
}
}

而在分頁控件的數(shù)據(jù)綁定的時(shí)候，我們指定列名的中文名即可，如下代碼所示

/// <summary>
/// 綁定列表數(shù)據(jù)
/// </summary>
private void BindData()
{
#region 添加別名解析

this.winGridViewPager1.DisplayColumns = "Name,ImageFilePath,EmbedIcon,ImageIcon";
this.winGridViewPager1.AddColumnAlias("ID", "編號(hào)");
this.winGridViewPager1.AddColumnAlias("Name", "名稱");
this.winGridViewPager1.AddColumnAlias("ImageFilePath", "圖片路徑綁定");
this.winGridViewPager1.AddColumnAlias("EmbedIcon", "圖片字節(jié)綁定");
this.winGridViewPager1.AddColumnAlias("ImageIcon", "圖片對(duì)象綁定");

this.winGridViewPager1.gridView1.OptionsBehavior.Editable = true;
this.winGridViewPager1.gridView1.OptionsBehavior.ReadOnly = false;

#endregion

//構(gòu)造只有一個(gè)記錄的集合
List<MenuInfo> menuList = new List<MenuInfo>()
{
new MenuInfo()
};

this.winGridViewPager1.DataSource = menuList;
}

以上就是基于GridControl控件上綁定圖片的幾種操作方式，方便我們在項(xiàng)目中參考使用。

本文轉(zhuǎn)載自

DevExpress技術(shù)交流群2：775869749      歡迎一起進(jìn)群討論

富文本控件難上手？這堂公開課你一定不能錯(cuò)過，不同視圖不同應(yīng)用場景全解！