在GridControl控件上綁定圖片的幾種操作方式

我們知道，基於DevExpress的開發Winform的項目界面的時候，GridControl控件是經常用來綁定數據的，一般以常規的字符內容為主，有時候也會有圖片的顯示需要，那么如果顯示圖片，我們應該如何實現呢？本篇隨筆介紹基於原生GridControl控件的圖片綁定顯示操作和基於我封裝的分頁控件（封裝GridControl的分頁控件）兩種圖片綁定顯示的操作。

1、基於原生的GridControl控件圖片綁定

 綁定圖片，一般我們可以在單元格里面綁定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;
        } 

 

2、基於分頁控件的圖片綁定

 

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

    /// <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控件上綁定圖片的幾種操作方式，方便我們在項目中參考使用。