アイコンとは
ベクターグラフィックスをフォントの形式にパッケージ化したもので、フォントと同じように使用でき、アイコンのサイズや色を自由に設定できます。従来の画像と比較して、以下のような明確な利点があります。
- ファイルサイズが小さく、読み込み速度が速く、パフォーマンスが高い
- ベクター（自由に拡大縮小でき、歪まない）
- 柔軟性（コードでアイコンの色を変更可能）
しかし、フォントと同様に、いくつかの欠点もあります。
- 以前のデザインとの互換性が難しく、置き換え作業の負荷が大きい
- デザイナーのデザイン案に合わせることが難しく、調整とコミュニケーションのコストがやや高い
よく使われるアイコンフォント
まずおすすめするのはAlibaba Vector Icon Libraryです。ここには多くのソリューションと完成されたアイコンセットがあり、いろいろ試せます。以前はログインするだけでよかったのですが、今は電話番号認証が必要なようで、少し面倒です。
次にFont Awesome アイコンがあります。こちらは旧版と新版（V5版またはPro版）に分かれており、旧版は無料ですがアイコン数は少なめです。
Microsoftは現在2種類提供しています。1つはWindows10のSegoe MDL2 Assets アイコン、もう1つはWindows11のSegoe Fluent アイコンです。
GoogleにはオープンソースのMaterial Design iconsアイコンフォントがあります。以前はローカルにダウンロードできたのですが、今は見つかりません。Material Design icons by Google
残りは省略します。アイコンフォントはたくさんあるので、自分で検索してみてください！
WPFでアイコンフォントを使用する方法
この例ではMicrosoftのSegoe MDL2 Assets アイコンを使用します。下図はサイト上のアイコンフォントの一部を示しており、Unicodeコードポイントが表示されています。これはこのフォントを識別するもので、後でフォントを表示するためにも使用します。
Windows10での適用方法
このアイコンフォントはWindows10に標準で組み込まれているため、FontFamilyプロパティをSegoe MDL2 Assetsに設定するだけでアイコンのサポートを得られます。
<TextBlock
FontFamily="Segoe MDL2 Assets"
FontSize="50"
Foreground="Red"
Text=""
/>
Textは説明文にあるUnicodeコードポイントで構成されていますが、テキストの前に&#x、後ろにセミコロン;を付ける必要があります。完全なものは""です。
フォントファイルを参照する方法
ただし、この方法はWindows10システムでのみ動作します。他のシステムでは表示されない可能性があるため、Segoe MDL2 Assetsアイコンフォントをダウンロードし、ダウンロードした圧縮ファイルからSegMDL2.ttfをプロジェクトにコピーします。管理を容易にするために、プロジェクト内に新しく作成したFontsフォルダに配置します。
次に、SegMDL2.ttfを選択し、プロパティパネルでビルドアクションをリソースに変更します。これにより、このファイルはリソースとしてWPFプログラムに含まれます。
アイコンフォントの使用方法は上記と同じですが、外部フォントとしてWPFプログラムに追加しているため、FontFamilyに設定するプロパティ値には注意が必要です。一般的にはpack://application:,,,/プロジェクト名前空間;component/フォントパス/フォントファイル名#フォント実際の名前と表現できます。以下で一つずつ説明します（後でカスタムリソースファイルを参照する場合もこのルールに従いますが、#フォント名は不要です。詳細は下記参照）。
プロジェクト名前空間：特に変更していなければ、プロジェクト名前空間はプロジェクト名と同じです。私のプロジェクト名はWPF_Blog_Testなので、名前空間も同様です。プロジェクト名前空間がわからない場合は、XAMLファイル（例：プロジェクトのApp.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=""
/>
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=""
/>
<!-- FontFamilyリソースを定義 -->
<TextBlock
FontFamily="{StaticResource SegIconFont}"
FontSize="50"
Foreground="Red"
Text=""
/>
<!-- TextBlock Styleスタイルを定義 -->
<TextBlock
FontSize="50"
Foreground="Red"
Style="{StaticResource tbSegIconFontKey}"
Text=""
/>
こんなに多くのスクリーンショットを撮ることになるとは思いませんでしたが、論理が明確であることを願っています。ご覧いただきありがとうございます！
本文は博客園からのもので、著者：丑萌气质狗、原文リンク：https://www.cnblogs.com/choumengqizhigou/p/15550133.html
転載の際は出典を明記してください。QQグループ：560611514