WPF使用ttf圖示字型

什麼是圖示

將向量圖形封裝成字型的形式，使用方式也和我們使用字型一樣，能夠自由設定圖示的大小、圖示的顏色。相對於傳統圖片來說，優點還是很明顯的：

體積小，加載速度快，效能高
向量（自由縮放，不會失真）
靈活性（可透過程式碼更改圖示顏色）

正因為它和字型一樣，也存在一些弊端：

難以兼容以前的設計，替換工作量大
很難貼合設計師的設計稿，協調溝通成本略高

常用的圖示字型

首先推薦的是阿里巴巴向量圖示庫，這裡面方案比較多，也有很多成套的圖示，可以多嘗試嘗試，之前只需要登入就行了，現在好像還要驗證手機號碼，有點噁心。

其次就是Font Awesome 圖示，這裡分為舊版和新版（V5 版本 or Pro 版本），舊版是免費，圖示較少。

微軟目前提供了兩套，一套是 Windows10 的Segoe MDL2 Assets 圖示，一套是 windows11 的Segoe Fluent 圖示。

Google 有一套開源的 Material Design icons 的圖示字型，之前是提供下載到本地的，沒找到了Material Design icons by Google。

剩下的就不說了，圖示字型比較多，自己去搜一搜吧！

如何在 WPF 中使用圖示字型

本例子中使用的是微軟的 Segoe MDL2 Assets 圖示，下圖是網站中圖示字型的部分展示，其中可以看到一個Unicode 碼位，這個是用來標識當前這個字型的，後面也需要用這個來顯示我們的字型。

字型展示

Windows10 中的應用方式

這套圖示字型在Windows10中是自帶的，所以可以直接設定FontFamily屬性為Segoe MDL2 Assets，來獲得圖示的支援：

<TextBlock
  FontFamily="Segoe MDL2 Assets"
  FontSize="50"
  Foreground="Red"
  Text="&#xE702;"
/>

其中Text就是由描述中的Unicode 碼位來構成的，不過需要在文字前加上&#x，文字後加上分號;，完整的就是""。

引用字型檔案的方式

但是這種方式只支援Windows10系統，如果在其他系統上，就會無法顯示，所以我們下載 Segoe MDL2 Assets圖示字型，將下載的壓縮包中的SegMDL2.ttf拷貝到我們的專案，為了方便管理，放到了專案中新建的Fonts資料夾下：

然後選中SegMDL2.ttf在下方的屬性欄中將建置動作改為資源，這樣這個檔案就會以資源的形式包含在我們的 WPF 程式中：

使用圖示字型的方式跟上面是一樣的，但是因為是透過外置字型的形式來新增到 WPF 程式中的，所以FontFamily設定的屬性值就有點講究了，大概可以表述為pack://application:,,,/專案名稱空間;component/字型路徑/字型檔案名稱#字型實際名稱，下面來一個一個介紹（後面引用自訂資源檔案也可以參考此規則，不過#字型名稱就不需要了，具體看下方）：

專案名稱空間：如果沒有私自改過專案名稱空間，那麼你的專案名稱空間就是專案的名稱，我這裡的專案名稱叫WPF_Blog_Test，所以專案名稱空間也是如此，如果不清楚你的專案名稱空間是什麼，可以打開你的XAML檔案，比如專案中的App.xaml，可以看到xaml檔案中的x:Class屬性，或者後台類別的namespace：

字型路徑/檔案名稱：字型檔案這裡是放在Fonts資料夾下的，所以我的字型路徑和檔案名稱為Fonts/SegMDL2.ttf，檔案名稱這裡有個小插曲，應使用屬性中顯示的檔案名稱：

字型實際名稱：字型的實際名稱需要我們雙擊打開字型，然後才能看到（別在 VS 中打開，不然看到的是位元組碼，在 windows 的資料夾中選中檔案雙擊打開），這裡SegMDL2.ttf的實際名稱是Segoe MDL2 Assets：

所以FontFamily應該設定為"pack://application:,,,/WPF_Blog_Test;component/Fonts/SegMDL2.ttf#Segoe MDL2 Assets"，貼個程式碼，收工！

<TextBlock
  FontFamily="pack://application:,,,/WPF_Blog_Test;component/Fonts/SegMDL2.ttf#Segoe MDL2 Assets"
  FontSize="50"
  Foreground="Red"
  Text="&#xE702;"
/>

PS：為了不讓每次用都寫這麼長的FontFamily，可以考慮在資源中寫好再引用，或者定義一個 TextBlock 圖示字型樣式（再扯點），已經了解資源定義的下面可以略過。

自訂資源

新建資料夾Styles，在該資料夾下新建資源檔案IconFonts（右鍵 Styles，選擇新增資源字典）。兩種方式都寫在IconFonts這個檔案中了，方便示範就少搞點：

寫上我們的定義的樣式（程式碼在圖片下方）：

<FontFamily x:Key="SegIconFont">
  pack://application:,,,/WPF_Blog_Test;component/Fonts/SegMDL2.ttf#Segoe MDL2
  Assets
</FontFamily>

<Style x:Key="tbSegIconFontKey" TargetType="{x:Type TextBlock}">
  <Setter Property="FontFamily" Value="pack://application:,,,/WPF_Blog_Test;component/Fonts/SegMDL2.ttf#Segoe MDL2 Assets" />
  <Setter Property="Foreground" Value="Red" />
  <Setter Property="FontSize" Value="50" />
</Style>

此時只是新增了一個名叫IconFonts資源字典，還需要引入到專案中，才能在介面中使用，所以需要在App.xaml檔案中新增一條引用語句，即告知程式需要將新建的這個資源字典包含進來，語句為<ResourceDictionary Source="pack://application:,,,/WPF_Blog_Test;component/Styles/IconFonts.xaml" />，名稱空間和資源路徑規則上面已表述，新增一個App.xaml的截圖：

剩下的就是在程式中使用了，直接上程式碼

<!--  最原始方式  -->
<TextBlock
  FontFamily="pack://application:,,,/WPF_Blog_Test;component/Fonts/SegMDL2.ttf#Segoe MDL2 Assets"
  FontSize="50"
  Foreground="Red"
  Text="&#xE702;"
/>

<!--  定義FontFamily資源  -->
<TextBlock
  FontFamily="{StaticResource SegIconFont}"
  FontSize="50"
  Foreground="Red"
  Text="&#xE702;"
/>

<!--  定義TextBlock Style樣式  -->
<TextBlock
  FontSize="50"
  Foreground="Red"
  Style="{StaticResource tbSegIconFontKey}"
  Text="&#xE702;"
/>

沒想到截了這麼多圖，希望邏輯是清晰的，感謝你的觀看！

本文來自部落格園，作者：醜萌氣質狗，轉載請註明原文連結：https://www.cnblogs.com/choumengqizhigou/p/15550133.html

轉載請註明出處 QQ 群：560611514

WPF使用ttf圖示字型

什麼是圖示

常用的圖示字型

如何在 WPF 中使用圖示字型

Windows10 中的應用方式

引用字型檔案的方式

自訂資源

延伸閱讀

Avalonia UI的演進邏輯與Qt生態深度對比

從 WPF 到 Avalonia 的遷移系列：為什麼我必須要把 WPF 程式遷移到 Avalonia

WPF 藉助自訂 XML 檔案實現國際化

關於我創作WPF教學影片是因為「收了微軟的錢」