Windows アプリのアイコン
アイコンによって、アクション、概念、または製品を簡略化したビジュアルが提供されます。 意味をシンボリックイメージに圧縮することで、アイコンは言語の壁を越え、貴重なリソースである画面領域を節約するのに役立ちます。 優れたアイコンは、文字体裁やその他のデザイン言語と調和するものです。 メタファーは混在せず、必要なものだけを迅速かつ可能な限り簡単に伝えます。
アイコンは、アプリ内およびアプリ外に表示できます。 アプリ内では、アイコンを使用して、テキストのコピーや設定ページへの移動などのアクションを表します。
この記事では、アプリ UI 内のアイコンについて説明します。 Windows でアプリを表すアイコン (アプリ アイコン) については、「 App アイコン」を参照してください。
アイコンを使用するタイミングを把握する
アイコンを使用すると、領域を節約できますが、どのような場合に使用しますか?
アイコンは、切り取り、コピー、貼り付け、保存などの操作や、ナビゲーション メニューの項目に使用します。 アイコンが意味する内容をユーザーが理解しやすく、小さいサイズでもはっきりとわかるほどシンプルな場合は、アイコンを使用します。
アイコンの意味が明確でない場合、または明確にするには複雑な図形が必要な場合は、アイコンを使用しないでください。
適切な種類のアイコンを使用する
アイコンを作成する方法は数多くあります。 Segoe Fluent Icons フォントなどのシンボル フォントを使用できます。 独自のベクターベースの画像を作成できます。 ビットマップ画像も使用できますが、お勧めしません。 アプリにアイコンを追加する方法の概要を次に示します。
XAML アプリにアイコンを追加するには、 IconElement または IconSource を使用します。
次の表は、IconElement と IconSource から派生したさまざまな種類のアイコンを示しています。
| IconElement | IconSource | 説明 |
|---|---|---|
| AnimatedIcon | AnimatedIconSource | ユーザーの操作や表示状態の変化に応じてアニメーション化できるビジュアルを表示および制御するアイコンを表します。 |
| BitmapIcon | BitmapIconSource | ビットマップをコンテンツとして使用するアイコンを表します。 |
| FontIcon | FontIconSource | 指定したフォントのグリフを使用するアイコンを表します。 |
| IconSourceElement | 該当なし | IconSource をコンテンツとして使用するアイコンを表します。 |
| ImageIcon | ImageIconSource | 画像をコンテンツとして使用するアイコンを表します。 |
| PathIcon | PathIconSource | ベクター パスをコンテンツとして使用するアイコンを表します。 |
| SymbolIcon | SymbolIconSource | SymbolThemeFontFamily リソースのグリフをコンテンツとして使用するアイコンを表します。 |
IconElement と IconSource
IconElement は FrameworkElement であるため、アプリの UI の他の要素と同様に XAML オブジェクト ツリーに追加できます。 ただし、 ResourceDictionary に追加して共有リソースとして再利用することはできません。
IconSource は IconElement に似ていますが、 FrameworkElementではないため、UI でスタンドアロン要素として使用することはできませんが、リソースとして共有できます。 IconSourceElement は、IconSource をラップする特殊なアイコン要素であり、IconElement が必要な場所であればどこでも使用できます。 これらの機能の例を次のセクションに示します。
IconElement の例
IconElement 派生クラスをスタンドアロン UI コンポーネントとして使用できます。
この例では、アイコン グリフを Button の内容として設定する方法を示します。 ボタンの FontFamily を SymbolThemeFontFamily に設定し、そのコンテンツ プロパティを使用するグリフの Unicode 値に設定します。
<Button FontFamily="{ThemeResource SymbolThemeFontFamily}"
Content=""/>
SymbolIcon のように、前述のアイコン要素オブジェクトの 1 つを明示的に追加することもできます。 これにより、選択できるアイコンの種類が増えます。 また、必要に合わせて、アイコンやその他の種類のコンテンツ (テキストなど) を組み合わせることもできます。
<Button>
<StackPanel>
<SymbolIcon Symbol="Play"/>
<TextBlock Text="Play" HorizontalAlignment="Center"/>
</StackPanel>
</Button>
この例では、ResourceDictionary で FontIconSource を定義し、IconSourceElement を使用してアプリのさまざまな場所でリソースを再利用する方法を示します。
<!--App.xaml-->
<Application
...>
<Application.Resources>
<ResourceDictionary>
...
<!-- Other app resources here -->
<FontIconSource x:Key="CertIconSource" Glyph=""/>
</ResourceDictionary>
</Application.Resources>
</Application>
<StackPanel Orientation="Horizontal">
<IconSourceElement IconSource="{StaticResource CertIconSource}"/>
<TextBlock Text="Certificate is expired" Margin="4,0,0,0"/>
</StackPanel>
<Button>
<StackPanel>
<IconSourceElement IconSource="{StaticResource CertIconSource}"/>
<TextBlock Text="View certificate" HorizontalAlignment="Center"/>
</StackPanel>
</Button>
WinUI 3 ギャラリー アプリには、ほとんどの WinUI 3 コントロールと機能の対話型の例が含まれています。 Microsoft Store からアプリを入手するか、GitHub でソース コードを取得します。
アイコンのプロパティ
多くの場合、アイコンを UI に配置するには、別の XAML 要素の icon プロパティにアイコンを割り当てます。 Icon 名前に Source を含むプロパティは IconSource を受け取ります。それ以外の場合、プロパティは IconElement を受け取ります。
この一覧には、 icon プロパティを持つ一般的な要素がいくつか示されています。
ヒント
WinUI 3 ギャラリー アプリでこれらのコントロールを表示して、アイコンの使用方法の例を確認できます。
このページの残りの例では、コントロールの icon プロパティにアイコンを割り当てる方法を示します。
FontIcon と SymbolIcon
アプリにアイコンを追加する最も一般的な方法は、Windows のアイコン フォントによって提供されるシステム アイコンを使用することです。 Windows 11 では、Fluent Design 言語用に設計された 1,000 個を超えるアイコンを提供する新しいシステム アイコン フォント Segoe Fluent Icons が導入されました。 フォントからアイコンを取得するのは直感的ではないかもしれませんが、Windows フォント表示テクノロジは、これらのアイコンが任意のディスプレイ、任意の解像度、および任意のサイズで鮮明で鮮明に表示されることを意味します。
重要
既定のフォント ファミリ
FontIcon と SymbolIcon は、 FontFamily を直接指定するのではなく、 SymbolThemeFontFamily XAML テーマ リソースによって定義されたフォント ファミリを使用します。 既定では、このリソースでは Segoe Fluent Icon フォント ファミリが使用されます。 アプリが Windows 10 バージョン 20H2 以前で実行されている場合、Segoe Fluent Icon フォント ファミリは使用できません。 SymbolThemeFontFamily リソースは代わりに Segoe MDL2 Assets フォント ファミリにフォールバックします。
Symbol 列挙型
SymbolThemeFontFamilyの一般的なグリフの多くは、Symbol列挙型に含まれています。 必要なグリフをシンボルとして使用できる場合は、既定のフォント ファミリで FontIcon を使用する任意の場所で SymbolIcon を使用できます。
また、シンボル名を使用して、次のように、xaml で icon プロパティattribute 構文を使用して設定します
<AppBarButton Icon="Send" Label="Send"/>
ヒント
シンボル名は、短縮attribute 構文を使用してiconプロパティを設定する場合にのみ使用できます。 他のすべてのアイコンの種類は、このページの他の例に示すように、長い プロパティ要素構文を使用して設定する必要があります。
フォント アイコン
Symbol 列挙では、Segoe Fluent Icon グリフの小さなサブセットのみを使用できます。 他の使用可能なグリフを使用するには、 FontIcon を使用します。 この例では、SendFill アイコンを使用して AppBarButton を作成する方法を示します。
<AppBarButton Label="Send">
<AppBarButton.Icon>
<FontIcon Glyph=""/>
</AppBarButton.Icon>
</AppBarButton>
FontFamily を指定しない場合、または実行時にシステムで使用できない FontFamily を指定した場合、FontIcon は、SymbolThemeFontFamily テーマ リソースによって定義された既定のフォント ファミリにフォールバックします。
使用可能な任意のフォントの Glyph 値を使用してアイコンを指定することもできます。 この例では、Segoe UI 絵文字フォントからグリフを使用する方法を示します。
<AppBarToggleButton Label="FontIcon">
<AppBarToggleButton.Icon>
<FontIcon FontFamily="Segoe UI Emoji" Glyph="▶"/>
</AppBarToggleButton.Icon>
</AppBarToggleButton>
詳細と例については、 FontIcon および SymbolIcon クラスのドキュメントを参照してください。
ヒント
Segoe Fluent Icons で使用できるすべてのアイコンのコードを表示、検索、コピーするには、WinUI 3 ギャラリー アプリのアイコンページを使用します。
AnimatedIcon
モーションは Fluent Design 言語の重要な部分です。 アニメーション化されたアイコンは、特定のエントリ ポイントに注意を引き、状態から状態へのフィードバックを提供し、操作に魅力を加えます。
アニメーション化されたアイコンを使用すると、 Lottie アニメーションを使用して、動きのある軽量のベクターベースのアイコンを実装できます。
詳細と例については、 Animated アイコン および AnimatedIcon クラスのドキュメントを参照してください。
PathIcon
PathIcon を使用して、ベクターベースの図形を使用するカスタム アイコンを作成して、常に鮮明に見えるようにすることができます。 ただし、XAML Geometry を使用して図形を作成するのは複雑です。各点と曲線を個別に指定する必要があるためです。
この例では、PathIcon で使用される Geometry を定義する 2 つの異なる方法を示します。
<AppBarButton Label="PathIcon">
<AppBarButton.Icon>
<PathIcon Data="F1 M 16,12 20,2L 20,16 1,16"/>
</AppBarButton.Icon>
</AppBarButton>
<AppBarButton Label="Circles">
<AppBarButton.Icon>
<PathIcon>
<PathIcon.Data>
<GeometryGroup>
<EllipseGeometry RadiusX="15" RadiusY="15" Center="90,90" />
<EllipseGeometry RadiusX="50" RadiusY="50" Center="90,90" />
<EllipseGeometry RadiusX="70" RadiusY="70" Center="90,90" />
<EllipseGeometry RadiusX="100" RadiusY="100" Center="90,90" />
<EllipseGeometry RadiusX="120" RadiusY="120" Center="90,90" />
</GeometryGroup>
</PathIcon.Data>
</PathIcon>
</AppBarButton.Icon>
</AppBarButton>
Geometryクラスを使用してカスタム図形を作成する方法の詳細については、クラスのドキュメントを参照し、ジオメトリのmove コマンドと描画コマンド参照してください。 WPF Geometry のドキュメントも参照してください。 WinUI Geometry クラスには WPF クラスと同じ機能はありませんが、図形の作成は両方で同じです。
詳細と例については、 PathIcon クラスのドキュメントを参照してください。
BitmapIcon と ImageIcon
BitmapIcon または ImageIcon を使用して画像ファイル (PNG、GIF、JPEG など) からアイコンを作成できますが、別のオプションが使用可能な場合はお勧めしません。 ビットマップ画像は特定のサイズで作成されるため、希望するアイコンの大きさと画面の解像度に応じて拡大縮小する必要があります。 イメージを縮小 (縮小) すると、ぼやけて表示されることがあります。 スケールアップすると、ブロックされてピクセル化されて表示される可能性があります。
BitmapIcon
既定では、 BitmapIcon はイメージからすべての色情報を取り除き、 Foreground カラー内のすべての透明でないピクセルをレンダリングします。 モノクロ アイコンを作成するには、PNG 形式の透明な背景に単色の画像を使用します。 他の画像形式は、明らかにエラーなしで読み込まれますが、前景色のソリッド ブロックになります。
<AppBarButton Label="ImageIcon">
<AppBarButton.Icon>
<ImageIcon Source="ms-appx:///Assets/slices3.png"/>
</AppBarButton.Icon>
</AppBarButton>
既定の動作をオーバーライドするには、 ShowAsMonochrome プロパティを falseに設定します。 この場合、BitmapIcon は、サポートされているビットマップ ファイルの種類の ImageIcon と同じように動作します (SVG ファイルはサポートされていません)。
<BitmapIcon UriSource="ms-appx:///Assets/slices3.jpg"
ShowAsMonochrome="False"/>
詳細と例については、 BitmapIcon クラスのドキュメントを参照してください。
ヒント
BitmapIcon の使用方法は、BitmapImage の使用方法と似ています。コードでの UriSource プロパティの設定など、BitmapIcon に適用できる詳細については、 BitmapImage クラスを参照してください。
ImageIcon
ImageIcon は、ImageSource 派生クラスの 1 つによって提供されるイメージを示します。 最も一般的なのは BitmapSource ですが、前述のように、スケーリングの問題が発生する可能性があるため、アイコンのビットマップ イメージはお勧めしません。
スケーラブル ベクター グラフィックス (SVG) リソースは、常に任意のサイズや解像度で鮮明に見えるため、アイコンに最適です。 SVGImageSourceを ImageIcon と共に使用できます。この ImageIcon は、SVG 仕様からのセキュリティで保護された静的モードをサポートしますが、アニメーションや相互作用はサポートしていません。 詳細については、 SVGImageSource および SVG のサポートを参照してください。
ImageIcon は Foreground プロパティを無視するため、イメージは常に元の色で表示されます。 前景色は無視されるため、ボタンやその他の同様のコントロールで使用した場合、アイコンは表示状態の変化に応答しません。
<AppBarButton Label="ImageIcon">
<AppBarButton.Icon>
<ImageIcon Source="ms-appx:///Assets/slices3.svg"/>
</AppBarButton.Icon>
</AppBarButton>
詳細と例については、 ImageIcon クラスのドキュメントを参照してください。
ヒント
ImageIcon の使用方法は、Image コントロールに似ています。ImageIcon に適用できる詳細については、 Image クラスを参照してください。 注目すべき違いの 1 つは、ImageIcon では、マルチフレーム 画像の最初のフレーム (アニメーション GIF など) のみが使用されていることです。 アニメーション化されたアイコンを使用するには、「 AnimatedIconを参照してください。
関連記事
Windows developer