快捷導(dǎo)航

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

更新時間：2018年07月10日 13:45:01 作者：wuhuacong(伍華聰)

GridControl控件是經(jīng)常用來綁定數(shù)據(jù)的，一般以常規(guī)的字符內(nèi)容為主，有時候也會有圖片的顯示需要，這篇文章主要介紹了在GridControl控件上綁定圖片的幾種操作方式詳解，具有一定的參考價值，感興趣的小伙伴們可以參考一下

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

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

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

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

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

/// <summary>
  /// 模擬一個菜單的對象，包括各種類型的圖片信息
  /// </summary>
  public class MenuInfo
  {
    /// <summary>
    /// 編號
    /// </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)圖片對象
    /// </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的時候，我們可以利用GridVIew的擴展函數(shù)CreateColumn進行創(chuàng)建幾個不同的列，如下代碼所示。

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

      CreateGridView();
    }

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

      //創(chuàng)建一個圖片路徑的列，并指定它的編輯控件類型為RepositoryItemImageEdit
      //并為這個列實現(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)建圖片對象的列，用于顯示圖片
      this.gridView1.CreateColumn("ImageIcon", "圖片對象綁定", 100);
    }

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

/// <summary>
/// 綁定列表數(shù)據(jù)
/// </summary>
private void BindData()

{
  //構(gòu)造只有一個記錄的集合
  List<MenuInfo> menuList = new List<MenuInfo>()
  {
    new MenuInfo()
  };
  //綁定數(shù)據(jù)源到列表控件上
  this.gridControl1.DataSource = menuList;
}

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

很多時候，我們需要對數(shù)據(jù)庫的數(shù)據(jù)進行分頁顯示，以提高顯示的速度和效率，那么利用分頁控件就可以獲得很多這樣統(tǒng)一的界面和高效率顯示數(shù)據(jù)的好處，基于分頁控件的處理本質(zhì)上和上面的過程差不多，不過處理的代碼需要變化一下，從而可以正常的實現(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è)置為自動調(diào)整寬度，false為不設(shè)置
      this.winGridViewPager1.gridView1.DataSourceChanged += new EventHandler(gridView1_DataSourceChanged);
    }

    /// <summary>
    /// 綁定數(shù)據(jù)后，分配各列的寬度
    /// </summary>
    private void gridView1_DataSourceChanged(object sender, EventArgs e)
    {
      //對圖片路徑的列，重新使用RepositoryItemPictureEdit類型
      //然后對該列的控件的ParseEditValue和FormatEditValue函數(shù)進行實現(xiàn)，從而實現(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ù)綁定的時候，我們指定列名的中文名即可，如下代碼所示

/// <summary>
    /// 綁定列表數(shù)據(jù)
    /// </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", "圖片字節(jié)綁定");
      this.winGridViewPager1.AddColumnAlias("ImageIcon", "圖片對象綁定");

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

      #endregion

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

      this.winGridViewPager1.DataSource = menuList;
    }

以上就是基于GridControl控件上綁定圖片的幾種操作方式，方便我們在項目中參考使用。希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: