Windows 應用程式中的圖示

發行項
07/30/2024

圖示提供了視覺化的簡略表達方式，適用於動作、概念或產品。圖示會將其代表的意義濃縮為一個符號性的圖像，而能跨越語言障礙，有助於節省螢幕空間這個珍貴的資源。理想的圖示達到印刷格式與其餘設計語言的平衡。它們不會混合使用隱喻，而且只會盡可能快速並簡單地溝通所需的內容。

命令行飛出視窗，具有用於新增的圖示 - 加號、編輯 - 鉛筆、共用 - 頁面和箭號，以及設定 - 齒輪

圖示可以出現在應用程式內外。在您的應用程式中，您可以使用圖示來代表動作，例如複製文字或移至設定頁面。

本文說明應用程式UI內的圖示。若要瞭解在 Windows 中代表應用程式的圖示（應用程式圖示），請參閱應用程式圖示。

知道何時要使用圖示

圖示可以節省空間，但該在什麼情況下使用？

像是剪下、複製、貼上和儲存之類的動作，或是導覽功能表的項目，都可以使用圖示。如果有個圖示的意義很容易就能讓使用者了解，而且小尺寸也清晰易讀，就可使用該圖示。

如果圖示的意義不明確，或是需要複雜的圖形才能清晰顯示圖示，則請勿使用。

使用正確的圖示類型

有許多方式可建立圖示。您可以使用符號字型，例如 Segoe Fluent Icons 字型。您可以建立自己的向量影像。甚至可以使用點陣圖影像，雖然我們並不推薦。以下是您可以將圖示新增到應用程式的方式摘要。

若要在 XAML 應用程式中新增圖示，您可以使用 IconElement 或 IconSource。

下表顯示衍生自 IconElement 和 IconSource 的不同圖示類型。

IconElement	IconSource	描述
AnimatedIcon	AnimatedIconSource	代表圖示，此圖示會顯示及控制視覺效果，以回應用戶互動和視覺狀態變更時產生動畫效果。
BitmapIcon	BitmapIconSource	表示使用位圖做為其內容的圖示。
FontIcon	FontIconSource	表示使用指定字型字元的圖示。
IconSourceElement	N/A	表示使用IconSource做為其內容的圖示。
ImageIcon	ImageIconSource	表示使用影像做為其內容的圖示。
PathIcon	PathIconSource	表示使用向量路徑做為其內容的圖示。
SymbolIcon	SymbolIconSource	表示圖示，該圖示會使用資源 `SymbolThemeFontFamily` 中的圖像做為其內容。

IconElement 與 IconSource

IconElement 是 FrameworkElement，因此它可以新增至 XAML 物件樹狀結構，就像應用程式 UI 的任何其他元素一樣。不過，它無法新增至 ResourceDictionary 並重複使用為共用資源。

IconSource 類似於 IconElement;不過，因為它不是 FrameworkElement，所以不能做為 UI 中的獨立專案使用，但可以共用為資源。 IconSourceElement 是包裝 IconSource 的特殊圖示元素，因此您可以在任何需要 IconElement 的地方使用它。下一節會顯示這些功能的範例。

IconElement 範例

您可以使用 IconElement 衍生類別作為獨立 UI 元件。

此範例示範如何將圖示圖像設定為 Button 的內容。將按鈕的 FontFamily 設定為 SymbolThemeFontFamily ，並將其 content 屬性設定為您想要使用之圖像的 Unicode 值。

<Button FontFamily="{ThemeResource SymbolThemeFontFamily}"
        Content="&#xE768;"/>

您也可以明確新增先前所列的其中一個圖示項目物件，例如SymbolIcon。這可讓您選擇更多類型的圖示。它也可讓您視需要結合圖示和其他類型的內容，例如文字。

<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="&#xEB95;"/>

        </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 資源庫應用程式以查看 IconElement 運作情形

WinUI 3 資源庫應用程式包含大多數 WinUI 3 控制項和功能的互動式範例。從 Microsoft Store 取得應用程式，或在 GitHub 上取得原始程式碼

圖示屬性

您通常會將圖示指派給另一個 icon XAML 元素的屬性，以將圖示放在 UI 中。 Icon 名稱中包含的 Source 屬性會採用 IconSource;否則，屬性會採用 IconElement。

此清單顯示一些具有屬性的 icon 常見元素。

命令/動作	導覽	狀態/其他
AppBarButton.Icon AppBarToggleButton.Icon AutoSuggestBox.QueryIcon MenuFlyoutItem.Icon MenuFlyoutSubItem.Icon SwipeItem.IconSource XamlUICommand.IconSource	NavigationViewItem.Icon SelectorBarItem.Icon TabViewItem.IconSource	AnimatedIcon.FallbackIconSource AnimatedIconSource.FallbackIconSource IconSourceElement.IconSource InfoBadge.IconSource InfoBar.IconSource TeachingTip.IconSource

提示

您可以在 WinUI 3 資源庫應用程式中檢視這些控件，以查看圖示如何與其搭配使用的範例。

此頁面的其餘範例示範如何將圖示指派給 icon 控件的屬性。

FontIcon 和 SymbolIcon

將圖示新增至應用程式最常見的方法是使用 Windows 中圖示字型所提供的系統圖示。 Windows 11 引進了新的系統圖示字型 Segoe Fluent Icon，其提供 1,000 多個專為 Fluent Design 語言設計的圖示。用字型取得圖示，可能並不是很直覺的方式。但透過 Windows 的字型顯示技術，這些圖示在任何解析度、任何尺寸的顯示器上，都相當清晰銳利。

重要

默認字型系列

FontIcon 和 SymbolIcon 不使用直接指定 FontFamily ，而是使用 XAML 主題資源所 SymbolThemeFontFamily 定義的字型系列。根據預設，此資源會使用 Segoe Fluent Icon 字型系列。如果您的應用程式是在 Windows 10 版本 20H2 或更早版本上執行，則無法使用 Segoe Fluent Icon 字型系列，而 SymbolThemeFontFamily 資源會改回 Segoe MDL2 Assets 字型系列。

Symbol 列舉

許多來自 SymbolThemeFontFamily 的常見字元都包含在符號列舉中。如果您需要的字元可作為符號，您可以在任何位置使用 SymbolIcon 搭配預設字型系列。

您也可以使用符號名稱，使用屬性語法在 XAML 中設定icon屬性，如下所示

<AppBarButton Icon="Send" Label="Send"/>

提示

您只能使用符號名稱，使用縮短的屬性語法來設定icon屬性。所有其他圖示類型都必須使用較長的屬性元素語法來設定，如此頁面的其他範例所示。

字型圖示

符號列舉中只能使用一小部分的 Segoe Fluent 圖示圖像。若要使用任何其他可用的字元，請使用 FontIcon。此範例示範如何使用圖示建立AppBarButtonSendFill。

<AppBarButton Label="Send">
    <AppBarButton.Icon>
        <FontIcon Glyph="&#xE725;"/>
    </AppBarButton.Icon>
</AppBarButton>

如果您未指定 FontFamily，或指定在運行時間系統上無法使用的 FontFamily，FontIcon 會回復為主題資源所定義的 SymbolThemeFontFamily 預設字型系列。

您也可以使用任何可用字型的字元值來指定圖示。此範例示範如何使用 Segoe UI Emoji 字型中的 Glyph。

<AppBarToggleButton Label="FontIcon">
    <AppBarToggleButton.Icon>
        <FontIcon FontFamily="Segoe UI Emoji" Glyph="&#x25B6;"/>
    </AppBarToggleButton.Icon>
</AppBarToggleButton>

如需詳細資訊和範例，請參閱 FontIcon 和 SymbolIcon 類別檔。

提示

使用 WinUI 3 資源庫應用程式中的 [圖示] 頁面，檢視、搜尋和複製 Segoe Fluent 圖示中所有可用圖示的程式碼。

開啟 WinUI 3 資源庫應用程式至 [圖示] 頁面

AnimatedIcon

動作是 Fluent Design 語言的重要部分。動畫圖示可以吸引特定入口的注意力，提供從一個狀態到另一個狀態的回饋，並為互動新增樂趣。

您可以使用動畫圖示，使用 Lottie 動畫來實作輕量型向量型圖示與動作。

如需詳細資訊和範例，請參閱動畫圖示和 AnimatedIcon 類別檔。

開啟 WinUI 3 資源庫應用程式以查看 AnimatedIcon 運作情形

PathIcon

您可以使用 PathIcon 來建立使用向量型圖形的自定義圖示，因此它們一律看起來清晰。不過，使用 XAML Geometry 建立圖形很複雜，因為您必須個別指定每個點和曲線。

此範例示範兩種不同的方法來定義PathIcon中使用的Geometry。

<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 類別來建立自定義圖形，請參閱類別檔和移動和繪製幾何命令。另請參閱 WPF 幾何檔。 WinUI Geometry 類別沒有與 WPF 類別相同的功能，但針對兩者建立圖形都相同。

如需詳細資訊和範例，請參閱 PathIcon 類別檔。

BitmapIcon 和 ImageIcon

您可以使用 BitmapIcon 或 ImageIcon 從圖像檔建立圖示（例如 PNG、GIF 或 JPEG），但如果有其他選項可用，則不建議使用。點陣圖影像是以特定大小建立而成，因此需視圖示需要的大小和螢幕的解析度，來縮放影像的大小。當圖像被縮小時，它可能會顯得模糊。當它放大時，它可能會顯得塊狀和像素化。

BitmapIcon

根據預設，BitmapIcon 會從影像中去除所有色彩資訊，並在前景色彩中轉譯所有非透明圖元。若要建立單色圖示，請使用 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 的使用方式; 如需適用於 BitmapIcon 的詳細資訊，請參閱 BitmapImage 類別，例如在程式代碼中設定 UriSource 屬性。

ImageIcon

ImageIcon 會顯示其中一個 ImageSource 衍生類別所提供的影像。最常見的是 BitmapSource，但如先前所述，我們不建議圖示的點陣圖影像，因為潛在的縮放問題。

可縮放向量圖形 (SVG) 資源適用於圖示，因為任何大小或解析度上看起來都很銳利。您可以使用 SVGImageSource 搭配 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 類別。其中一個顯著差異是，使用 ImageIcon 時，只會使用多框架影像的第一個畫面（例如動畫 GIF）。若要使用動畫圖示，請參閱 AnimatedIcon。

共用方式為

Windows 應用程式中的圖示

知道何時要使用圖示

使用正確的圖示類型

IconElement 與 IconSource

IconElement 範例

圖示屬性

FontIcon 和 SymbolIcon

Symbol 列舉

字型圖示

AnimatedIcon

PathIcon

BitmapIcon 和 ImageIcon

BitmapIcon

ImageIcon

其他資源

共用方式為

Windows 應用程式中的圖示

知道何時要使用圖示

使用正確的圖示類型

IconElement 與 IconSource

IconElement 範例

圖示屬性

FontIcon 和 SymbolIcon

Symbol 列舉

字型圖示

AnimatedIcon

PathIcon

BitmapIcon 和 ImageIcon

BitmapIcon

ImageIcon

相關文章

其他資源