1、介紹
字型圖示在Web應用中最為常見，字型圖示是向量的，向量圖意味著每個圖示都能在所有大小的螢幕上完美呈現，可以隨時更改大小和顏色，而且不失真。字型圖示常見的有Font Awesome和Elegant Icon Font，她們不僅圖示數量多，還可以免費使用。這些圖示如果能用在WinForm專案中，不僅可以帶來更加直觀的介面效果，也能讓圖示不再侷限於類似png型別，本文將介紹在WinForm專案中如何使用字型圖示。
2、字型圖示的選擇
網上IconFont資源很多，同時很多提供SVG下載的網站都會提供對應的IconFont檔案。本文就以：比較流行且開源免費的FontAwesome字型圖示為例，講解.NET開發的WinForm專案如何使用。
FontAwesome，官網：https://fontawesome.com.cn/v4/icons
在上圖中，我們可以看到每個圖示都有對應的Unicode編碼，我們需要使用這個編碼來做圖示的展示。
3、使用方法
下載字型圖示到本地，放到專案相應的位置，如在我們的專案中使用了兩類字型圖示，FontAwesome和ElegantIcon，如下圖所示。
在專案中定義字型編碼對應的列舉部分程式碼如下所示。
/// <summary>
/// 圖示列舉,包含Awesome圖示和Elegant圖示，分別以A和E開頭
/// </summary>
public enum FontIcons
{
#region Awesome English:Awesome
/// <summary>
/// a fa 500PX
/// </summary>
A_fa_500px = 0xf26e,
/// <summary>
/// a fa address book
/// </summary>
A_fa_address_book = 0xf2b9,
/// <summary>
/// a fa address book o
/// </summary>
A_fa_address_book_o = 0xf2ba,
/// <summary>
/// a fa address card
/// </summary>
A_fa_address_card = 0xf2bb,
#endregion
#region Elegant English:Elegant
/// <summary>
/// The e arrow up
/// </summary>
E_arrow_up = 0x21,
/// <summary>
/// The e arrow down
/// </summary>
E_arrow_down = 0x22,
/// <summary>
/// The e arrow left
/// </summary>
E_arrow_left = 0x23,
#endregion
}
定義字型圖示載入公共類：FontImagesHelper.cs，此類不僅支援對待載入圖示指定尺寸大小、還可以設定前景色和背景色。
FontImagesHelper.cs原始碼如下：
/// <summary>
/// 字型圖示圖片,awesome字型預設載入，elegant字型在使用時延遲載入
/// </summary>
public static class FontImagesHelper
{
/// <summary>
/// The m font collection
/// </summary>
private static readonly PrivateFontCollection fontCollection = new PrivateFontCollection();
/// <summary>
/// The m fonts awesome
/// </summary>
private static readonly Dictionary<string, Font> fontsAwesome = new Dictionary<string, Font>();
/// <summary>
/// The m fonts elegant
/// </summary>
private static readonly Dictionary<string, Font> fontsElegant = new Dictionary<string, Font>();
/// <summary>
/// The m cache maximum size
/// </summary>
private static Dictionary<int, float> cacheMaxSize = new Dictionary<int, float>();
/// <summary>
/// The minimum font size
/// </summary>
private const int MinFontSize = 8;
/// <summary>
/// The maximum font size
/// </summary>
private const int MaxFontSize = 43;
/// <summary>
/// 建構函式
/// </summary>
/// <exception cref="FileNotFoundException">Font file not found</exception>
static FontImagesHelper()
{
string strFile = Path.Combine(SystemInfo.StartupPath, "Resource", "IconFont\\FontAwesome.ttf");
fontCollection.AddFontFile(strFile);
float size = MinFontSize;
for (int i = 0; i <= (MaxFontSize - MinFontSize) * 2; i++)
{
fontsAwesome.Add(size.ToString("F2"), new Font(fontCollection.Families[0], size, FontStyle.Regular, GraphicsUnit.Point));
size += 0.5f;
}
}
/// <summary>
/// 獲取圖示
/// </summary>
/// <param name="iconName">圖示名稱</param>
/// <param name="imageSize">圖示大小</param>
/// <param name="foreColor">前景色</param>
/// <param name="backColor">背景色</param>
/// <returns>圖示</returns>
public static Icon GetIcon(string iconName, int imageSize = 32, Color? foreColor = null, Color? backColor = null)
{
FontIcons icon = (FontIcons)Enum.Parse(typeof(FontIcons), iconName);
return GetIcon(icon, imageSize, foreColor, backColor);
}
/// <summary>
/// 獲取圖示
/// </summary>
/// <param name="iconName">圖示名稱</param>
/// <param name="imageSize">圖示大小</param>
/// <param name="foreColor">前景色</param>
/// <param name="backColor">背景色</param>
/// <returns>圖示</returns>
public static Icon GetIcon(FontIcons iconName, int imageSize = 32, Color? foreColor = null, Color? backColor = null)
{
try
{
Bitmap image = GetImage(iconName, imageSize, foreColor, backColor);
return image != null ? ToIcon(image, imageSize) : null;
}
catch
{
return null;
}
}
/// <summary>
/// 獲取圖示
/// </summary>
/// <param name="iconName">圖示名稱</param>
/// <param name="imageSize">圖示大小</param>
/// <param name="foreColor">前景色</param>
/// <param name="backColor">背景色</param>
/// <returns>圖示</returns>
public static Bitmap GetImage(string iconName, int imageSize = 32, Color? foreColor = null, Color? backColor = null)
{
try
{
FontIcons icon = (FontIcons)Enum.Parse(typeof(FontIcons), iconName);
return GetImage(icon, imageSize, foreColor, backColor);
}
catch
{
return null;
}
}
/// <summary>
/// Gets the size of the icon.
/// </summary>
/// <param name="iconName">The icon text.</param>
/// <param name="graphics">The graphics.</param>
/// <param name="font">The font.</param>
/// <returns>Size.</returns>
private static Size GetIconSize(FontIcons iconName, Graphics graphics, Font font)
{
string text = char.ConvertFromUtf32((int)iconName);
return graphics.MeasureString(text, font).ToSize();
}
/// <summary>
/// Converts to icon.
/// </summary>
/// <param name="srcBitmap">The source bitmap.</param>
/// <param name="size">The size.</param>
/// <returns>Icon.</returns>
/// <exception cref="ArgumentNullException">srcBitmap</exception>
private static Icon ToIcon(Bitmap srcBitmap, int size)
{
if (srcBitmap == null)
{
throw new ArgumentNullException("srcBitmap");
}
Icon icon;
using (MemoryStream memoryStream = new MemoryStream())
{
new Bitmap(srcBitmap, new Size(size, size)).Save(memoryStream, ImageFormat.Png);
Stream stream = new MemoryStream();
BinaryWriter binaryWriter = new BinaryWriter(stream);
if (stream.Length <= 0L)
{
return null;
}
binaryWriter.Write((byte)0);
binaryWriter.Write((byte)0);
binaryWriter.Write((short)1);
binaryWriter.Write((short)1);
binaryWriter.Write((byte)size);
binaryWriter.Write((byte)size);
binaryWriter.Write((byte)0);
binaryWriter.Write((byte)0);
binaryWriter.Write((short)0);
binaryWriter.Write((short)32);
binaryWriter.Write((int)memoryStream.Length);
binaryWriter.Write(22);
binaryWriter.Write(memoryStream.ToArray());
binaryWriter.Flush();
binaryWriter.Seek(0, SeekOrigin.Begin);
icon = new Icon(stream);
stream.Dispose();
}
return icon;
}
}
在RDIFramework.NET框架產品中整合了字型圖示的使用，框架模組的圖示按字型圖示進行了整合載入，如下圖所示。
呼叫對應圖示的程式碼。
var img = FontImagesHelper.GetImage("A_fa_address_card", 26, "#66B9BF");
除了上面提到的字型圖示，我們還可以使用阿里巴巴向量圖示庫，地址：https://www.iconfont.cn/
4、參考文章
iconfont-阿里巴巴向量圖示庫
FontAwesome 字型圖示中文Icon
RDIFramework.NET CS敏捷開發框架 V6.1釋出(.NET6+、Framework雙引擎、全網唯一)
.NET開發WinForm(C/S)專案整合三種服務訪問模式(直連、WCF、WebAPI)