Winform開(kāi)發(fā)框架中如何使用DevExpress的內(nèi)置圖標(biāo)資源
前言
在開(kāi)發(fā)Winform程序界面的時(shí)候，我們往往會(huì)使用一些較好看的圖表，以便能夠?yàn)槲覀兊某绦蚪缑嬖錾?，良好的圖標(biāo)設(shè)置可以讓界面看起來(lái)更加美觀舒服，而且也比較容易理解，圖標(biāo)我們可以通過(guò)一些網(wǎng)站獲取各種場(chǎng)景的圖標(biāo)資源，不過(guò)本篇隨筆主要介紹如何利用DevExpress的內(nèi)置圖標(biāo)資源來(lái)實(shí)現(xiàn)界面圖標(biāo)的設(shè)置。
下面話不多說(shuō)了，來(lái)一起看看詳細(xì)的介紹吧
1、設(shè)計(jì)時(shí)刻的圖標(biāo)處理
豐富的圖標(biāo)處理，在菜單、工具欄、樹(shù)列表等地方，以及按鈕等地方，都可以使用，而這些我們可以利用DevExpress的內(nèi)置圖標(biāo)選擇來(lái)減輕我們尋找合適圖標(biāo)的煩惱。
一些按鈕、工具欄等的圖標(biāo)設(shè)置，一般是固定的，我們往往可以在設(shè)計(jì)時(shí)刻就指定它，這樣我們可以使用本地的圖標(biāo)，也可以使用DevExpress的內(nèi)置圖標(biāo)。而使用DevExpress內(nèi)置圖標(biāo)資源的時(shí)候，我們可以調(diào)出DevExpress的內(nèi)置圖標(biāo)選擇框的。
如下是按鈕添加圖標(biāo)方式，操作非常簡(jiǎn)單，在按鈕的右上角小圖標(biāo)上單擊一下進(jìn)入編輯界面，如下所示。
然后選擇Image按鈕，進(jìn)入圖標(biāo)選擇界面，選擇內(nèi)置的DevExpress圖標(biāo)庫(kù)即可，基本上，只要是DevExpress的原生控件，那么就可以通過(guò)這種內(nèi)置圖標(biāo)的對(duì)話框進(jìn)行圖標(biāo)選擇，非常方便。
2、運(yùn)行時(shí)刻的圖標(biāo)處理
上面的操作是在設(shè)計(jì)時(shí)候，DevExpress設(shè)計(jì)器給我們提供很多便利選擇內(nèi)置圖標(biāo)，而在界面運(yùn)行時(shí)刻，想動(dòng)態(tài)處理界面按鈕圖標(biāo)，或者樹(shù)形菜單的圖標(biāo)的時(shí)候，就沒(méi)有這個(gè)直接的接口來(lái)設(shè)置圖標(biāo)了，而我們框架的菜單往往都是需用動(dòng)態(tài)增加的，因此圖標(biāo)的設(shè)置也是在運(yùn)行時(shí)刻的。如下面的樹(shù)列表中，圖標(biāo)就是動(dòng)態(tài)指定的。
這些動(dòng)態(tài)的樹(shù)形菜單，是在權(quán)限系統(tǒng)里面動(dòng)態(tài)配置的，菜單的配置界面如下所示。
上面的選擇圖圖標(biāo)就是我們需要?jiǎng)討B(tài)設(shè)置的圖標(biāo)，由于圖標(biāo)資源我們是以圖片形式存儲(chǔ)在對(duì)應(yīng)的記錄里面的，因此使用起來(lái)也是比較方便的，我們?cè)谂渲玫臅r(shí)候，獲取到對(duì)應(yīng)的圖標(biāo)資源并存儲(chǔ)起來(lái)即可。
除了上面可以參考從DevExpress內(nèi)置圖標(biāo)資源獲取圖標(biāo)的方式外
我們還可以選擇我們自己喜歡的圖標(biāo)資源，也就是從系統(tǒng)圖標(biāo)文件中選擇自己喜歡的，如下界面所示。
因此我考慮在運(yùn)行時(shí)刻整合兩種不同選擇圖標(biāo)的方式。
我們先來(lái)看看我整合后的圖表選擇界面，如下所示，包含了運(yùn)行時(shí)刻提取DevExpress內(nèi)置圖標(biāo)的功能和從系統(tǒng)文件中選擇圖標(biāo)的功能。
3、運(yùn)行時(shí)刻提取DevExpress內(nèi)置圖標(biāo)的功能實(shí)現(xiàn)
首先我們參考設(shè)計(jì)時(shí)刻的界面展示
來(lái)設(shè)計(jì)一個(gè)界面來(lái)展示圖標(biāo)信息
參考原版的界面，設(shè)計(jì)盡可能貼近即可，另外我們自己加入一個(gè)從系統(tǒng)選擇圖標(biāo)資源的操作。
至于圖標(biāo)選中后我們返回對(duì)應(yīng)的Image對(duì)象給調(diào)用者，則通過(guò)事件進(jìn)行處理，以便選中后，即使更新顯示效果。
如下所示，我們定義一個(gè)委托和事件。
/// <summary>
/// DevExpress圖標(biāo)和系統(tǒng)圖標(biāo)選擇窗體
/// </summary>
public partial class FrmImageGallery : BaseForm
{
/// <summary>
/// 自定義一個(gè)委托處理圖標(biāo)選擇
/// </summary>
public delegate void IconSelectHandlerDelegate(Image image, string name);
/// <summary>
/// 圖標(biāo)選擇的事件
/// </summary>
public event IconSelectHandlerDelegate OnIconSelected;
private DXImageGalleryLoader loader = null;
public FrmImageGallery()
{
InitializeComponent();
InitDictItem();//初始化
}
/// <summary>
/// 處理圖標(biāo)選擇的事件觸發(fā)
/// </summary>
public virtual void ProcessIconSelected(Image image, string name)
{
if (OnIconSelected != null)
{
OnIconSelected(image, name);
}
}
然后在內(nèi)置圖標(biāo)顯示中，如果觸發(fā)圖標(biāo)的單擊，我們就觸發(fā)事件，以便讓調(diào)用者更新界面顯示，如下代碼所示。
foreach (GalleryItem item in items[key])
{
item.ItemClick += (s, e) =>
{
//選擇處理
ProcessIconSelected(item.ImageOptions.Image, item.Description);
};
}
而對(duì)于從系統(tǒng)文件加載文件進(jìn)行顯示圖標(biāo)的，類似的觸發(fā)方式。
/// <summary>
/// 從系統(tǒng)資源中加載圖標(biāo)文件，然后觸發(fā)事件進(jìn)行顯示
/// </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);
}
}
這樣我們?cè)诓藛蔚倪x擇圖標(biāo)的時(shí)候，就可以觸發(fā)事件進(jìn)行獲取圖表并更新自身了。
private void btnSelectIcon_Click(object sender, EventArgs e)
{
FrmImageGallery dlg = new FrmImageGallery();
dlg.OnIconSelected += (image, name) =>
{
this.txtEmbedIcon.Image = image;
};
dlg.ShowDialog();
}
完成了這些處理，我們?cè)俅螌⒔裹c(diǎn)放在如何提取并展示DevExpress內(nèi)置圖標(biāo)的身上。
為了獲取圖表資源里面的分類及大小等信息，我們需要把圖標(biāo)資源進(jìn)行一個(gè)加載出來(lái)，然后讀取里面的類別和大小、集合等信息。先定義幾個(gè)變量來(lái)承載這些信息。
/// <summary>
/// 圖標(biāo)分類
/// </summary>
public List<string> Categories { get; set; }
/// <summary>
/// 圖標(biāo)集合
/// </summary>
public List<string> Collection { get; set; }
/// <summary>
/// 圖標(biāo)尺寸
/// </summary>
public List<string> Size { get; set; }
我們知道，DevExpress的圖標(biāo)資源在程序集DevExpress.Utils.DxImageAssemblyUtil.ImageAssembly里面，因此我們需要對(duì)它進(jìn)行讀取，并依次對(duì)各個(gè)資源進(jìn)行處理。
我們來(lái)看看具體的處理代碼，如下所示。
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)
這個(gè)代碼它就是從資源里面進(jìn)行獲取對(duì)應(yīng)的圖表資源。
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ù)圖表的文件名結(jié)構(gòu)，我們通過(guò)正則表達(dá)式來(lái)讀取它的對(duì)應(yīng)信息，然后把它的大小、類別、集合信息存儲(chǔ)起來(lái)。
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");
圖表信息讀取了，我們需要解析它然后存儲(chǔ)起來(lái)，把圖標(biāo)的Image對(duì)象放在一個(gè)字典類別里面，方便按照組別進(jìn)行展示。
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);
}
}
有了這些資源，我們對(duì)它們進(jìn)行搜索就顯得很方便了，我們?nèi)绻枰鶕?jù)文件名或者其他條件進(jìn)行查詢集合的數(shù)據(jù)，提供一個(gè)通用的方法即可，如下代碼所示。
/// <summary>
/// 根據(jù)條件獲取集合
/// </summary>
/// <returns></returns>
public Dictionary<string, GalleryItemCollection> Search(List<string> collection, List<string> categories,
List<string> size, string fileName = "")
{
Dictionary<string, GalleryItemCollection> dict = new Dictionary<string, GalleryItemCollection>();
GalleryItemCollection list = new GalleryItemCollection();
foreach (var key in ImageCollection.Keys)
{
//使用正則表達(dá)式獲取圖標(biāo)文件名中的集合、類別、大小等信息
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");
//如果是查詢處理，把記錄放到查詢結(jié)果里面
if (!string.IsNullOrEmpty(fileName))
{
if(key.Contains(fileName))
{
list.Add(ImageCollection[key]);
}
dict["查詢結(jié)果"] = 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進(jìn)行搜索的了，不用再次讀取程序集并依次分析它，速度提供不少的。
由于圖表資源的處理是比較耗時(shí)的，我們把整個(gè)圖標(biāo)加載的類作為一個(gè)靜態(tài)的對(duì)象緩存起來(lái)，這樣下次使用直接從緩存里面拿，對(duì)應(yīng)的資源也不用重新加載，更好的提高我們重用的效果了，體驗(yàn)更好了。
/// <summary>
/// 圖標(biāo)庫(kù)加載處理
/// </summary>
public class DXImageGalleryLoader
{
/// <summary>
/// 圖標(biāo)字典類別集合
/// </summary>
public Dictionary<string, GalleryItem> ImageCollection { get; set; }
/// <summary>
/// 圖標(biāo)分類
/// </summary>
public List<string> Categories { get; set; }
/// <summary>
/// 圖標(biāo)集合
/// </summary>
public List<string> Collection { get; set; }
/// <summary>
/// 圖標(biāo)尺寸
/// </summary>
public List<string> Size { get; set; }
/// <summary>
/// 使用緩存處理，獲得對(duì)象實(shí)例
/// </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.GetCacheItem<DXImageGalleryLoader>(keyName,
delegate () { return new DXImageGalleryLoader().LoadData(); },
new TimeSpan(0, 30, 0));//30分鐘過(guò)期
return result;
}
}
以上代碼通過(guò)
public static DXImageGalleryLoader Default
定義了一個(gè)靜態(tài)的實(shí)例屬性，這樣這個(gè)DXImageGalleryLoader 實(shí)例只會(huì)在程序第一次使用的時(shí)候構(gòu)建并加載圖片資源，后續(xù)都是從緩存里面讀取，提高響應(yīng)速度的同時(shí)，也會(huì)記住上次的選擇界面內(nèi)容。
以上就是整個(gè)功能的處理思路，以及一步步的優(yōu)化處理，以便實(shí)現(xiàn)功能展示的同時(shí)，也提高響應(yīng)速度，最終界面就是我們開(kāi)始的時(shí)候介紹的那樣。
單擊或者選中系統(tǒng)圖標(biāo)后， 需要設(shè)置的按鈕或者界面，就會(huì)及時(shí)更新圖標(biāo)展示，體驗(yàn)效果還是非常不錯(cuò)的。
由于這個(gè)界面功能的通用性，我把它作為系統(tǒng)界面基礎(chǔ)模塊，放到了我的框架BaseUIDx里面，各個(gè)系統(tǒng)模塊都可以調(diào)用了。
總結(jié)
以上就是這篇文章的全部?jī)?nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，如果有疑問(wèn)大家可以留言交流，謝謝大家對(duì)腳本之家的支持。
- DevExpress之ChartControl用法實(shí)例總結(jié)
- DevExpress之TreeList用法實(shí)例總結(jié)
- DevExpress SplitContainerControl用法總結(jié)
- DevExpress之ChartControl實(shí)現(xiàn)時(shí)間軸實(shí)例
- DevExpress之ChartControl實(shí)現(xiàn)餅狀圖百分比演示實(shí)例
- C#實(shí)現(xiàn)DevExpress本地化實(shí)例詳解
- DevExpress實(shí)現(xiàn)GridControl單元格編輯驗(yàn)證的方法
- C#實(shí)現(xiàn)WinForm禁止最大化、最小化、雙擊標(biāo)題欄、雙擊圖標(biāo)等操作的方法
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了Unity實(shí)現(xiàn)圖片生成灰白圖，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-04-04
關(guān)于C#連接SQL Server時(shí)提示用戶登錄失敗的解決方法
在用C#開(kāi)發(fā)windows端程序并連接SQL Server時(shí)有可能會(huì)遇到數(shù)據(jù)庫(kù)登錄失敗的問(wèn)題，下面小編給大家?guī)?lái)了C#連接SQL Server時(shí)提示用戶登錄失敗的解決方法，感興趣的朋友一起看看吧2021-11-11
C#要實(shí)現(xiàn)簡(jiǎn)單的畫圖功能可以利用Graphics這個(gè)類,下面這篇文章主要給大家介紹了關(guān)于C#繪圖基本方法的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-12-12
這篇文章主要介紹了c# await，async執(zhí)行流的相關(guān)知識(shí)，文章講解的非常細(xì)致，代碼幫助理解和學(xué)習(xí)，感興趣的朋友可以了解下2020-06-06
這篇文章主要為大家詳細(xì)介紹了C#抽象類與抽象方法的相關(guān)資料，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-10-10
C#使用百度Ueditor富文本框?qū)崿F(xiàn)上傳文件
這篇文章主要為大家詳細(xì)介紹了C#如何使用百度Ueditor富文本框?qū)崿F(xiàn)上傳文件（圖片，視頻等），文中的示例代碼講解詳細(xì)，感興趣的可以了解一下2022-07-07
C# RGB圖像和灰度圖像互轉(zhuǎn)的實(shí)現(xiàn)
在我們的圖像類型教程中定義了RGB顏色模型和灰度格式,本文主要介紹了C# RGB圖像和灰度圖像互轉(zhuǎn)的實(shí)現(xiàn),文中通過(guò)代碼介紹的非常清楚,具有一定的參考價(jià)值,感興趣的可以了解一下2023-08-08
C#異步迭代IAsyncEnumerable應(yīng)用實(shí)現(xiàn)
IAsyncEnumerable可以來(lái)實(shí)現(xiàn)異步迭代，本文就主要介紹了C#異步迭代IAsyncEnumerable應(yīng)用實(shí)現(xiàn)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-06-06
這篇文章主要介紹了c# 提取文檔信息的示例，幫助大家更好的理解和學(xué)習(xí)c#，感興趣的朋友可以了解下2021-02-02
c#?理解csredis庫(kù)實(shí)現(xiàn)分布式鎖的詳細(xì)流程
這篇文章主要介紹了c#?理解csredis實(shí)現(xiàn)分布式鎖,該庫(kù)本身已經(jīng)足夠完善，這里我畫蛇添足一下，為了方便自己的使用，本文通過(guò)實(shí)例代碼給大家詳細(xì)介紹，需要的朋友可以參考下2022-02-02