DevExpress v20.1完整版下載

富文字控制元件難上手？這堂公開課你一定不能錯過，不同檢視不同應用場景全解！

DevExpress Winforms Controls內建140多個UI控制元件和庫，完美構建流暢、美觀且易於使用的應用程式。DevExpress WinForm v20.1全新發布，

我們知道，基於DevExpress的開發Winform的專案介面的時候，GridControl控制元件是經常用來繫結資料的，一般以常規的字元內容為主，有時候也會有圖片的顯示需要，那麼如果顯示圖片，我們應該如何實現呢？本文將為大家介紹基於原生GridControl控制元件的圖片繫結顯示操作和基於我封裝的分頁控制元件（封裝GridControl的分頁控制元件）兩種圖片繫結顯示的操作。

一、基於原生的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;
}

二、基於分頁控制元件的圖片繫結

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

/// <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歡迎一起進群討論