WinForm界面开发：DevExpress GridControl控件上绑定图片的几种方式全解

DevExpress Winforms Controls 内置140多个UI控件和库，完美构建流畅、美观且易于使用的应用程序。DevExpress WinForm v20.1全新发布，想要体验击下载>>

我们知道，基于DevExpress的开发Winform的项目界面的时候，GridControl控件是经常用来绑定数据的，一般以常规的字符内容为主，有时候也会有图片的显示需要，那么如果显示图片，我们应该如何实现呢文将为大家介绍基于原生GridControl控件的图片绑定显示操作和基于我封装的分页控件（封装GridControl的分页控件）两种图片绑定显示的操作。

一、基于原生的GridControl控件图片绑定

绑定图片，一般我们可以在单元格里面绑定byte[]类型或者Image类型，那么控件就会自动显示图片出来，当然我们也可以自定义对图片路径转换为图片然后显示的，不过就是额外需要增加一些处理而已。

本例子针对这三种方式分别进行介绍，图片的绑定操作。

为了方便演示，我们创建一个菜单对象类，然后构建一些数据用于列表的绑定操作，如下代码所示。

上面代码是创建GridView所需要显示的列信息，那么我们准备好数据源绑定到列表控件上就可以了，如下代码所示。

/// <summary>/// 绑定列表数据/// </summary>private void BindData(){//构造只有一个记录的集合List<MenuInfo> menuList = new List<MenuInfo>(){new MenuInfo()};//绑定数据源到列表控件上this.gridControl1.DataSource = menuList;}

二、基于分页控件的图片绑定

很多时候，我们需要对数据库的数据进行分页显示，以提高显示的速度和效率，那么利用分页控件就可以获得很多这样统一的界面和高效率显示数据的好处，基于分页控件的处理本质上和上面的过程差不多，不过处理的代码需要变化一下，从而可以正常的实现图片绑定显示操作。

/// <summary>/// 基于分页控件的图片显示案例/// </summary>public partial class FrmRepositoryItemImageEdit2 : BaseForm{public FrmRepositoryItemImageEdit2(){InitializeComponent();CreateGridView();}/// <summary>/// 创建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;//是否设置为自动调整宽度，false为不设置this.winGridViewPager1.gridView1.DataSourceChanged += new EventHandler(gridView1_DataSourceChanged);}/// <summary>/// 绑定数据后，分配各列的宽度/// </summary>private void gridView1_DataSourceChanged(object sender, EventArgs e){//对图片路径的列，重新使用RepositoryItemPictureEdit类型//然后对该列的控件的ParseEditValue和FormatEditValue函数进行实现，从而实现路径到图片的显示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){//统一设置100宽度foreach (DevExpress.XtraGrid.Columns.GridColumn column in this.winGridViewPager1.gridView1.Columns){column.Width = 120;}//可特殊设置特别的宽度GridView gridView = this.winGridViewPager1.gridView1;if (gridView != null){//gridView.SetGridColumWidth("Note", 200);}}}

而在分页控件的数据绑定的时候，我们指定列名的中文名即可，如下代码所示

/// <summary>/// 绑定列表数据/// </summary>private void BindData(){#region 添加别名解析this.winGridViewPager1.DisplayColumns = "Name,ImageFilePath,EmbedIcon,ImageIcon";this.winGridViewPager1.AddColumnAlias("ID", "编 ");this.winGridViewPager1.AddColumnAlias("Name", "名称");this.winGridViewPager1.AddColumnAlias("ImageFilePath", "图片路径绑定");this.winGridViewPager1.AddColumnAlias("EmbedIcon", "图片字节绑定");this.winGridViewPager1.AddColumnAlias("ImageIcon", "图片对象绑定");this.winGridViewPager1.gridView1.OptionsBehavior.Editable = true;this.winGridViewPager1.gridView1.OptionsBehavior.ReadOnly = false;#endregion//构造只有一个记录的集合List<MenuInfo> menuList = new List<MenuInfo>(){new MenuInfo()};this.winGridViewPager1.DataSource = menuList;}

以上就是基于GridControl控件上绑定图片的几种操作方式，方便我们在项目中参考使用。

DevExpress技术交流群2：775869749      欢迎一起进群讨论

富文本控件难上手堂公开课你一定不能错过，不同视图不同应用场景全解！