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

转帖|使用教程|编辑:龚雪|2020-10-16 10:21:58.990|阅读 31 次

概述:基于DevExpress的开发Winform的项目界面的时候,GridControl控件是经常用来绑定数据的,本文将为大家介绍基于原生GridControl控件的图片绑定显示操作和基于我封装的分页控件(封装GridControl的分页控件)两种图片绑定显示的操作。

# 正版采购狂欢节,企业采购正当时 # # 31款JAVA开发必备控件和工具 #

相关链接:

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

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

一、基于原生的GridControl控件图片绑定
WinForm界面开发教程

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

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

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

/// <summary>
/// 模拟一个菜单的对象,包括各种类型的图片信息
/// </summary>
public class MenuInfo
{
/// <summary>
/// 编号
/// </summary>
public string ID { get; set; }

/// <summary>
/// 图标名称
/// </summary>
public string Name { get; set; }

/// <summary>
/// 图片路径
/// </summary>
public string ImageFilePath {get;set;}

/// <summary>
/// 图标字节
/// </summary>
public virtual byte[] EmbedIcon { get; set; }

/// <summary>
/// 图标图片对象
/// </summary>
public Image ImageIcon { get; set; }

/// <summary>
/// 构造函数
/// 为了展示的方便,在构造函数里面构造相应的数据
/// </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);
}
}

创建GridColumn的时候,我们可以利用GridVIew的扩展函数CreateColumn进行创建几个不同的列,如下代码所示。

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

CreateGridView();
}

/// <summary>
/// 创建gridView1列表所需显示的列
/// </summary>
private void CreateGridView()
{
//创建一个隐藏的ID列
this.gridView1.CreateColumn("ID", "ID").Visible = false;
//串一个名称的列,并指定宽度
this.gridView1.CreateColumn("Name", "名称", 150);

//创建一个图片路径的列,并指定它的编辑控件类型为RepositoryItemImageEdit
//并为这个列实现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;
}
};

//创建图片字节的列,用于显示图片
this.gridView1.CreateColumn("EmbedIcon", "图片字节绑定", 100);
//创建图片对象的列,用于显示图片
this.gridView1.CreateColumn("ImageIcon", "图片对象绑定", 100);
}

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

/// <summary>
/// 绑定列表数据
/// </summary>
private void BindData()
{
//构造只有一个记录的集合
List<MenuInfo> menuList = new List<MenuInfo>()
{
new MenuInfo()
};

//绑定数据源到列表控件上
this.gridControl1.DataSource = menuList;
}

二、基于分页控件的图片绑定
WinForm界面开发教程

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

/// <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      欢迎一起进群讨论

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

慧都高端UI界面开发


标签:

本站文章除注明转载外,均为本站原创或翻译。欢迎任何形式的转载,但请务必注明出处、不得修改原文相关链接,尊重他人劳动成果

文章转载自:博客园

登录 慧都网发表评论


暂无评论...

为你推荐

  • 推荐视频
  • 推荐活动
  • 推荐产品
  • 推荐文章
  • 慧都慧问
title
相关厂商
相关产品
DevExpress Universal Subscription

行业领先的界面控件开发包,帮助企业构建卓越应用!

DevExpress DXperience Subscription

高性价比的企业级.NET用户界面套包,助力企业创建卓越应用!

DevExpress WinForms Subscription

为Windows Forms平台创建具有影响力的业务解决方案,高性价比WinForms界面控件套包。

在线
客服
咨询
电话
400-700-1020
在线
QQ
购物车 反馈 返回
顶部
在线客服系统
live chat