在開發(fā)Winform程序界面的時候我們往往會使用一些較好看的圖表以便能夠為程序界面增色良好的圖標設置可以讓界面看起來更加美觀舒服而且也比較容易理解。圖標我們可以通過一些網(wǎng)站獲取各種場景的資源不過本文主要介紹如何利用DevExpress的內置圖標資源來實現(xiàn)界面圖標的設置。PS給大家推薦一個C#開發(fā)可以用到的界面組件——DevExpress WinForms它能完美構建流暢、美觀且易于使用的應用程序無論是Office風格的界面還是分析處理大批量的業(yè)務數(shù)據(jù)它都能輕松勝任DevExpress新舊版本幫助文檔下載可進QQ qun獲取169725316一、設計時的圖標處理豐富的圖標處理在菜單、工具欄、樹列表等地方以及按鈕等地方都可以使用而這些我們可以利用DevExpress的內置圖標選擇來減輕我們尋找合適圖標的煩惱。一些按鈕、工具欄等的圖標設置一般是固定的往往可以在設計時刻就指定它這樣我們可以使用本地的圖標也可以使用DevExpresss的內置圖標。而使用DevExpress內置圖標資源的時候可以調出DevExpress的內置圖標選擇框的。如下是按鈕添加圖標方式操作非常簡單在按鈕的右上角小圖標上單擊一下進入編輯界面如下所示。然后選擇Image按鈕進入圖標選擇界面選擇內置的DevExpress圖標庫即可基本上只要是DevExpress的原生控件那么就可以通過這種內置圖標的對話框進行圖標選擇非常方便。二、運行時的圖標處理上面的操作是在設計時DevExpress設計器給我們提供很多便利選擇內置圖標而在界面運行時想動態(tài)處理界面按鈕圖標或者樹形菜單的圖標的時候就沒有這個直接的接口來設置圖標了而我們框架的菜單往往都是需用動態(tài)增加的因此圖標的設置也是在運行時的。如下面的樹列表中圖標就是動態(tài)指定的。這些動態(tài)的樹形菜單是在權限系統(tǒng)里面動態(tài)配置的菜單的配置界面如下所示。上面的選擇圖圖標就是我們需要動態(tài)設置的圖標由于圖標資源是以圖片形式存儲在對應的記錄里面的因此使用起來也是比較方便的。我們在配置的時候獲取到對應的圖標資源并存儲起來即可。除了上面可以參考從DevExpress內置圖標資源獲取圖標的方式外。我們還可以選擇自己喜歡的圖標資源也就是從系統(tǒng)圖標文件中選擇自己喜歡的如下界面所示。因此考慮在運行時整合兩種不同選擇圖標的方式。我們先來看看整合后的圖表選擇界面如下所示包含了運行時刻提取DevExpress內置圖標的功能和從系統(tǒng)文件中選擇圖標的功能。三、運行時提取DevExpress內置圖標的功能實現(xiàn)首先我們參考設計時的界面展示來設計一個界面來展示圖標信息參考原版的界面設計盡可能貼近即可另外我們自己加入一個從系統(tǒng)選擇圖標資源的操作。至于圖標選中后我們返回對應的Image對象給調用者則通過事件進行處理以便選中后即使更新顯示效果。如下所示我們定義一個委托和事件。/// summary /// DevExpress圖標和系統(tǒng)圖標選擇窗體 /// /summary public partial class FrmImageGallery : BaseForm { /// summary /// 自定義一個委托處理圖標選擇 /// /summary public delegate void IconSelectHandlerDelegate(Image image, string name); /// summary /// 圖標選擇的事件 /// /summary public event IconSelectHandlerDelegate OnIconSelected; private DXImageGalleryLoader loader null; public FrmImageGallery() { InitializeComponent(); InitDictItem();//初始化 } /// summary /// 處理圖標選擇的事件觸發(fā) /// /summary public virtual void ProcessIconSelected(Image image, string name) { if (OnIconSelected ! null) { OnIconSelected(image, name); } }然后在內置圖標顯示中如果觸發(fā)圖標的單擊我們就觸發(fā)事件以便讓調用者更新界面顯示如下代碼所示。foreach (GalleryItem item in items[key]) { item.ItemClick (s, e) { //選擇處理 ProcessIconSelected(item.ImageOptions.Image, item.Description); }; }而對于從系統(tǒng)文件加載文件進行顯示圖標的類似的觸發(fā)方式。/// summary /// 從系統(tǒng)資源中加載圖標文件然后觸發(fā)事件進行顯示 /// /summary private void txtFilePath_Properties_ButtonClick(object sender, ButtonPressedEventArgs e) { string file GetIconPath(); if (!string.IsNullOrEmpty(file)) { this.txtFilePath.Text file;//記錄文件名 this.txtEmbedIcon.Image LoadIcon(file);//顯示圖片 this.txtEmbedIcon.Size new System.Drawing.Size(64, 64); //返回處理 ProcessIconSelected(this.txtEmbedIcon.Image, file); } }這樣我們在菜單的選擇圖標的時候就可以觸發(fā)事件進行獲取圖表并更新自身了。private void btnSelectIcon_Click(object sender, EventArgs e) { FrmImageGallery dlg new FrmImageGallery(); dlg.OnIconSelected (image, name) { this.txtEmbedIcon.Image image; }; dlg.ShowDialog(); }完成了這些處理我們再次將焦點放在如何提取并展示DevExpress內置圖標的身上。為了獲取圖表資源里面的分類及大小等信息我們需要把圖標資源進行一個加載出來然后讀取里面的類別和大小、集合等信息。先定義幾個變量來承載這些信息。/// summary /// 圖標分類 /// /summary public Liststring Categories { get; set; } /// summary /// 圖標集合 /// /summary public Liststring Collection { get; set; } /// summary /// 圖標尺寸 /// /summary public Liststring Size { get; set; }DevExpress的圖標資源在程序集DevExpress.Utils.DxImageAssemblyUtil.ImageAssembly里面因此我們需要對它進行讀取并依次對各個資源進行處理。來看看具體的處理代碼如下所示。using (System.Resources.ResourceReader reader GetResourceReader(DevExpress.Utils.DxImageAssemblyUtil.ImageAssembly)) { System.Collections.IDictionaryEnumerator dict reader.GetEnumerator(); while (dict.MoveNext()) { string key (string)dict.Key as string; if (!DevExpress.Utils.DxImageAssemblyUtil.ImageProvider.IsBrowsable(key)) continue; if (key.EndsWith(.png, StringComparison.Ordinal)) { string reg (?collection\S*?)/(?category\S*?)/(?name\S*); var collectionItem CRegex.GetText(key, reg, collection); var categoryItem CRegex.GetText(key, reg, category); string sizeReg _(?size\S*)\.; var sizeItem CRegex.GetText(key, sizeReg, size); if (!this.Collection.Contains(collectionItem)) { this.Collection.Add(collectionItem); } if (!this.Categories.Contains(categoryItem)) { this.Categories.Add(categoryItem); } if (!this.Size.Contains(sizeItem)) { this.Size.Add(sizeItem); } Image image GetImageFromStream((System.IO.Stream)dict.Value); if (image ! null) { var item new DevExpress.XtraBars.Ribbon.GalleryItem(image, key, key); if (!ImageCollection.ContainsKey(key)) { ImageCollection.Add(key, item); } } } } }其中讀取資源的操作代碼是GetResourceReader(DevExpress.Utils.DxImageAssemblyUtil.ImageAssembly)這個代碼它就是從資源里面進行獲取對應的圖表資源。private System.Resources.ResourceReader GetResourceReader(System.Reflection.Assembly imagesAssembly) { var resources imagesAssembly.GetManifestResourceNames(); var imageResources Array.FindAll(resources, resourceName resourceName.EndsWith(.resources)); if (imageResources.Length ! 1) { throw new Exception(讀取異常); } return new System.Resources.ResourceReader(imagesAssembly.GetManifestResourceStream(imageResources[0])); }另外根據(jù)圖表的文件名結構我們通過正則表達式來讀取它的對應信息然后把它的大小、類別、集合信息存儲起來。string reg (?collection\S*?)/(?category\S*?)/(?name\S*); var collectionItem CRegex.GetText(key, reg, collection); var categoryItem CRegex.GetText(key, reg, category); string sizeReg _(?size\S*)\.; var sizeItem CRegex.GetText(key, sizeReg, size);圖表信息讀取了我們需要解析它然后存儲起來把圖標的Image對象放在一個字典類別里面方便按照組別進行展示。Image image GetImageFromStream((System.IO.Stream)dict.Value); if (image ! null) { var item new DevExpress.XtraBars.Ribbon.GalleryItem(image, key, key); if (!ImageCollection.ContainsKey(key)) { ImageCollection.Add(key, item); } }有了這些資源我們對它們進行搜索就顯得很方便了如果需要根據(jù)文件名或者其他條件進行查詢集合的數(shù)據(jù)提供一個通用的方法即可如下代碼所示。/// summary /// 根據(jù)條件獲取集合 /// /summary /// returns/returns public Dictionarystring, GalleryItemCollection Search(Liststring collection, Liststring categories, Liststring size, string fileName ) { Dictionarystring, GalleryItemCollection dict new Dictionarystring, GalleryItemCollection(); GalleryItemCollection list new GalleryItemCollection(); foreach (var key in ImageCollection.Keys) { //使用正則表達式獲取圖標文件名中的集合、類別、大小等信息 string reg (?collection\S*?)/(?category\S*?)/(?name\S*); var collectionItem CRegex.GetText(key, reg, collection); var categoryItem CRegex.GetText(key, reg, category); string sizeReg _(?size\S*)\.; var sizeItem CRegex.GetText(key, sizeReg, size); //如果是查詢處理把記錄放到查詢結果里面 if (!string.IsNullOrEmpty(fileName)) { if(key.Contains(fileName)) { list.Add(ImageCollection[key]); } dict[查詢結果] list; } else { //如果是集合和列表中包含的把它們按類別添加到字典里面 if (collection.Contains(collectionItem) categories.Contains(categoryItem) size.Contains(sizeItem)) { if (!dict.ContainsKey(categoryItem)) { GalleryItemCollection cateList new GalleryItemCollection(); cateList.Add(ImageCollection[key]); dict[categoryItem] cateList; } else { GalleryItemCollection cateList dict[categoryItem]; cateList.Add(ImageCollection[key]); } } } } return dict; }這次搜索就直接基于已有的集合ImageCollection 進行搜索的了不用再次讀取程序集并依次分析它速度提供不少的。由于圖表資源的處理是比較耗時的我們把整個圖標加載的類作為一個靜態(tài)的對象緩存起來這樣下次使用直接從緩存里面拿對應的資源也不用重新加載更好的提高重用的效果了體驗更好了。/// summary /// 圖標庫加載處理 /// /summary public class DXImageGalleryLoader { /// summary /// 圖標字典類別集合 /// /summary public Dictionarystring, GalleryItem ImageCollection { get; set; } /// summary /// 圖標分類 /// /summary public Liststring Categories { get; set; } /// summary /// 圖標集合 /// /summary public Liststring Collection { get; set; } /// summary /// 圖標尺寸 /// /summary public Liststring Size { get; set; } /// summary /// 使用緩存處理獲得對象實例 /// /summary public static DXImageGalleryLoader Default { get { System.Reflection.MethodBase method System.Reflection.MethodBase.GetCurrentMethod(); string keyName string.Format({0}-{1}, method.DeclaringType.FullName, method.Name); var result MemoryCacheHelper.GetCacheItemDXImageGalleryLoader(keyName, delegate () { return new DXImageGalleryLoader().LoadData(); }, new TimeSpan(0, 30, 0));//30分鐘過期 return result; } }以上代碼通過public static DXImageGalleryLoader Default定義了一個靜態(tài)的實例屬性這樣這個 DXImageGalleryLoader 實例只會在程序第一次使用的時候構建并加載圖片資源后續(xù)都是從緩存里面讀取提高響應速度的同時也會記住上次的選擇界面內容。以上就是整個功能的處理思路以及一步步的優(yōu)化處理以便實現(xiàn)功能展示的同時也提高響應速度最終界面就是我們開始的時候介紹的那樣。單擊或者選中系統(tǒng)圖標后 需要設置的按鈕或者界面就會及時更新圖標展示體驗效果還是非常不錯的。由于這個界面功能的通用性我把它作為系統(tǒng)界面基礎模塊放到了我的框架BaseUIDx里面各個系統(tǒng)模塊都可以調用了。本文轉載自博客園 - 伍華聰