資訊徽章

  • 發行項

頒發徽章是以非侵入的直觀方式來顯示通知，或將焦點集中到應用程式內的某個區域 - 無論是用於通知、指示新內容還是顯示警示。 info badge 是一小塊的使用者介面，可新增至應用程式並進行自訂以顯示數字、圖示或一個簡單的點。

info badge 內建於 XAML navigation view，但也可作為 XAML 樹狀結構中的獨立元素，讓您將 info badge 放入您選擇的任何控制項或 UI 片段中。 當您在 navigation view 以外的地方使用 info badge 時，您負責以程式設計方式確定何時顯示和關閉 info badge，以及放置 info badge 的位置。

NavigationView 中 InfoBadge 的範例

這是正確的控制項嗎？

當您希望以非侵入性方式將使用者的注意力集中到應用程式的某個區域時，則應使用 info badge。 當 info badge 出現時，它的目的是將注意力集中到某個區域，然後讓使用者回到他們的流程中，讓他們選擇是否查看 info badge 出現的細節。 資訊徽章應該只代表可忽略的和非永久性的訊息 - info badge 應該有關於它何時出現、消失和變更的特定規則。

適當的 info badge 使用範例：

  • 表示有新訊息送達。
  • 表示有新文章可讀。
  • 表示頁面上有新選項可用。
  • 表示某個頁面上的某個項目可能有問題，但不會阻止應用程式運作。

何時應該使用不同的控制項？

info badge 不應用於顯示嚴重錯誤或傳達需要立即採取行動的高度重要訊息。 如果需要立即與其互動以繼續使用應用程式，則不應使用資訊徽章。

不適當的 info badge 使用範例：

  • 在應用程式內的頁面上指示在繼續使用該應用程式之前需要解決的緊急事項。 對於這種情況，請使用 content dialog。
  • 出現在應用程式中，且使用者無法關閉 info badge 對於像這樣的持續性警示，請使用info bar。
  • 使用 info badge 作為將使用者的注意力集中到某個區域的永久方式，而使用者無法關閉 info badge。
  • 使用 info badge 作為應用程式中的一般圖示或影像。 請改用適當的影像或圖示 (請參閱 IconElement 和 IconSource)。

info badge 的類型

info badge 有三種樣式可以選擇 - 點、圖示和數值，如下案順序所示。

點、圖示和數值 InfoBadge

點 info badge

點 info badge 是一個直徑 4px 的簡單橢圓。 它沒有框線，並且不能在其中包含文字或任何其他內容。

您應該在一般情況下使用點 info badge，在這種情況下您希望將使用者的注意力引導到 info badge，例如表示有新內容或更新可用。

圖示 info badge

圖示 info badge 是一個直徑為 16px 的橢圓形，其內部包含一個圖示。 info badge 具有 IconSource 屬性，可為支援的圖示類型提供靈活性。

您應該使用圖示 info badge 傳送快速訊息並吸引使用者的注意 - 例如，提醒使用者非封鎖錯誤、有額外的重要更新可用，或目前應用程式中已啟用的特定功能 (例如倒數計時)。

如果您想將 BitmapIconSource 用於 info badge 的 IconSource，則您有責任確保點陣圖適合 info badge 內部 (透過變更圖示的大小或變更 info badge 的大小)。

數值 info badge

數值 info badge 的形狀和大小與圖示 info badge 相同，但它內部包含一個數字，其由 Value 屬性決定。 數字必須是整數且必須大於或等於零。 隨著顯示的數字增長到多位數，info badge 的寬度會自動擴展，並具有流暢的動畫效果。

您應該使用數值 info badge 來表明有特定數量的項目需要注意 - 例如，新電子郵件或訊息。

預設 info badge 樣式

為了幫助支援使用 info badge 的最常見場景，此控制項包含內建預設 info badge 樣式。 雖然您可以自訂 info badge 以使用所需的任何色彩/圖示/數字組合，但這些內建預設是快速選項，可確保您的 info badge 符合協助工具指南，並且在圖示和數字大小方面成比例。

以下樣式預設可用於 info badge：

注意

  • AttentionDotInfoBadgeStyle
  • AttentionIconInfoBadgeStyle
  • AttentionValueInfoBadgeStyle

注意 InfoBadge 樣式

資訊

  • InformationalDotInfoBadgeStyle
  • InformationalIconInfoBadgeStyle
  • InformationalValueInfoBadgeStyle

資訊 InfoBadge 樣式

成功

  • SuccessDotInfoBadgeStyle
  • SuccessIconInfoBadgeStyle
  • SuccessValueInfoBadgeStyle

成功 InfoBadge 樣式

警告

  • CautionDotInfoBadgeStyle
  • CautionIconInfoBadgeStyle
  • CautionValueInfoBadgeStyle

警告 InfoBadge 樣式

重大

  • CriticalDotInfoBadgeStyle
  • CriticalIconInfoBadgeStyle
  • CriticalValueInfoBadgeStyle

關鍵 InfoBadge 樣式

如果在 info badge 上設定了樣式並且還設定了衝突的屬性，則該屬性將覆寫樣式的衝突部分，但不衝突的樣式元素將保持套用狀態。

例如，如果您將 CriticalIconInfoBadgeStyle 套用到 info badge，但也設定了 InfoBadge.Value = "1" ，則最終會得到一個具有「重大」背景色彩，但內部顯示數字 1 的 info badge，而不是顯示預設圖示。

此範例會建立info badge，其採用注意圖示預設樣式的顏色和圖示。

<InfoBadge Style="{ThemeResource AttentionIconInfoBadgeStyle}"/>

標有星號的藍色 InfoBadge

協助工具選項

info badge 控制項本身沒有內建任何螢幕助讀程式功能或使用者介面自動化 (UIA)，因為該控制項不可設定焦點且無法與之互動。

如果您在 navigation view 內使用 info badge，則 navigation view 會提供內建螢幕助讀程式和輔助技術支援。 當您透過 navigation view 使用索引標籤，並到達帶有 info badge 的 navigation view 項目時，螢幕助讀程式將宣告該項目上有 info badge。 如果 info badge 提及的是數字，螢幕助讀程式也會宣告 info badge 值。

如果您在 navigation view 之外使用 info badge，建議採取以下措施以確保您的應用程式可完整存取：

  • info badge 的父元素應該可設為焦點，並且可以透過索引標籤存取。
  • 父元素會向螢幕助讀程式宣告 info badge。
  • 當 info badge 第一次出現時，應用程式會發送 UIA 通知。
  • 當 info badge 從 UI 中消失時，應用程式會發送 UIA 通知。
  • 當現有 info badge 發生重大變更時，應用程式會發送 UIA 通知。
    • 「重大變更」的定義由身為個人開發人員的您決定。 此類範例包括：info badge 在不同類型之間切換、info badge 改變顏色以表示其狀態，或 info badge 的值超過某個有效數字。

若要控制父元素向螢幕助讀程式宣告的內容，您可以使用 AutomationProperties 類別的附加屬性。 對於 info badge，建議您在父元素上設定 AutomationProperties.FullDescription 或 AutomationProperties.ItemStatus 附加屬性。

若要在 info badge 出現或消失時發送 UIA 通知，您可以使用 AutomationPeer.RaiseAutomationEvent 方法。

info badge 具有滿足協助工具需求的預設大小。 您可以自訂 info badge 的許多方面，包括其高度/寬度/色彩等，但重要的是預設 info badge 必須遵守尺寸和色彩協助工具指南。

UWP 和 WinUI 2

重要

本文中的資訊和範例針對使用 Windows App SDK 和 WinUI 3 的應用程式進行了最佳化，但通常適用於使用 WinUI 2 的 UWP 應用程式。 如需平台特定資訊和範例，請參閱 UWP API 參考。

本節包含您在 UWP 或 WinUI 2 應用程式中使用控制項所需的資訊。

UWP 應用程式的 InfoBadge 需要 WinUI 2。 如需詳細資訊 (包括安裝指示)，請參閱 WinUI 2。 此控制項的 API 位在 Microsoft.UI.Xaml.Controls 命名空間中。

若要在 WinUI 2 中使用本文中的程式碼，請在 XAML 中使用別名 (我們使用 muxc) 來表示專案中包含的 Windows UI 程式庫 API。 如需詳細資訊，請參閱開始使用 WinUI 2。

xmlns:muxc="using:Microsoft.UI.Xaml.Controls"

<muxc:InfoBadge/>

建立 InfoBadge

重要

部分資訊涉及發行前產品，在發行之前可能會有大幅修改。 Microsoft 對此處提供的資訊，不做任何明確或隱含的瑕疵擔保。

開啟 WinUI 3 資源庫應用程式，並查看 InfoBadge 運作情形。

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

您可以在 XAML 或程式碼中建立 InfoBadge。 您建立的 InfoBadge 類型取決於您設定的屬性。

點

若要建立點 InfoBadge，請使用未設定屬性的預設 InfoBadge 控制項。

<InfoBadge />

點 InfoBadge

Icon

若要建立圖示 InfoBadge，請設定 IconSource 屬性。

<InfoBadge x:Name="SyncStatusInfoBadge">
    <InfoBadge.IconSource>
        <SymbolIconSource Symbol="Sync"/>
    </InfoBadge.IconSource>
</InfoBadge>

圖示 InfoBadge

數值

若要建立數值 InfoBadge，請設定 Value 屬性。

<InfoBadge x:Name="EmailInfoBadge" Value="{x:Bind numUnreadMail}"/>

數值 InfoBadge

在大多數情況下，您會將 InfoBadge 的 Value 屬性繫結到應用程式後端中不斷變化的整數值，以便您可以根據該特定值輕鬆遞增/遞減以及顯示/隱藏 InfoBadge。

注意

如果同時設定了 Icon 和 Value 屬性，則 Value 屬性優先，並且 InfoBadge 會顯示為數值 InfoBadge。

在 NavigationView 中使用 InfoBadge

如果您在應用程式中使用 NavigationView，建議您在 NavigationView 中使用 InfoBadge 來顯示應用程式範圍內的通知和警示。 若要將 InfoBadge 放置在 NavigationViewItem 上，請將 InfoBadge 物件指派給 NavigationViewItem.InfoBadge 屬性。

在左展開模式下，InfoBadge 會向右對齊 NavigationViewItem 的邊緣。

具有 InfoBadge 的左展開 NavigationView

在左精簡模式下，InfoBadge 會重疊顯示在圖示的右上角。

具有 InfoBadge 的左精簡 NavigationView

在頂端模式下，InfoBadge 會與整個項目的右上角對齊。

具有 InfoBadge 的頂端模式 NavigationView

建議您不要在一個 NavigationView 中使用不同類型的 InfoBadge，例如將數值 InfoBadge 附加到一個 NavigationViewItem，將點 InfoBadge 附加到同一 NavigationView 中的另一個 NavigationViewItem。

範例：遞增 NavigationView 中的數值 InfoBadge

此範例會模擬電子郵件應用程式如何使用 NavigationView 中的 InfoBadge 來顯示收件匣中的新電子郵件數量，並在收到新訊息時遞增 InfoBadge 中顯示的數字。

<NavigationView SelectionChanged="NavigationView_SelectionChanged">
    <NavigationView.MenuItems>
        <NavigationViewItem Content="Home" Icon="Home"/>
        <NavigationViewItem Content="Account" Icon="Contact"/>
        <NavigationViewItem x:Name="InboxPage" Content="Inbox" Icon="Mail">
            <NavigationViewItem.InfoBadge>
                <InfoBadge x:Name="bg1"
                                Value="{x:Bind mailBox.NewMailCount, Mode=OneWay}"
                                Visibility="{x:Bind mailBox.HasNewMail, Mode=OneWay}"/>
            </NavigationViewItem.InfoBadge>
        </NavigationViewItem>
    </NavigationView.MenuItems>
    <Frame x:Name="contentFrame" />
</NavigationView>

public sealed partial class MainWindow : Window
{
    MailBox mailBox = new MailBox();

    public MainWindow()
    {
        this.InitializeComponent();

    }

    private void NavigationView_SelectionChanged(NavigationView sender,
                               NavigationViewSelectionChangedEventArgs args)
    {
        if (args.SelectedItem == InboxPage)
        {
            mailBox.ResetNewMailCount();
        }
        else
        {
            mailBox.CheckMail();
        }
    }
}

public class MailBox : DependencyObject
{
    DispatcherQueueTimer timer;

    // Dependency Properties for binding.
    public int NewMailCount
    {
        get { return (int)GetValue(NewMailCountProperty); }
        set { SetValue(NewMailCountProperty, value); }
    }
    public static readonly DependencyProperty NewMailCountProperty =
        DependencyProperty.Register("NewMailCount", typeof(int), typeof(MailBox), new PropertyMetadata(0));

    public bool HasNewMail
    {
        get { return (bool)GetValue(HasNewMailProperty); }
        set { SetValue(HasNewMailProperty, value); }
    }
    public static readonly DependencyProperty HasNewMailProperty =
        DependencyProperty.Register("HasNewMail", typeof(bool), typeof(MailBox), new PropertyMetadata(false));

    public MailBox()
    {
        timer = this.DispatcherQueue.CreateTimer();
        timer.Interval = new TimeSpan(15000000);
        timer.Tick += (s, e) =>
        {
            NewMailCount++;
            if (HasNewMail == false) { HasNewMail = true; }
        };
        timer.Start();
    }

    public void ResetNewMailCount()
    {
        NewMailCount = 0;
        HasNewMail = false;
        timer.Stop();
    }

    public void CheckMail()
    {
        timer.Start();
    }
}

顯示數字 17 的收件匣項目上，具有 InfoBadge 的 NavigationView

NavigationView 中的階層

如果您具有階層式 NavigationView，且 NavigationViewItems 嵌套在其他 NavigationViewItems 中，則父項目將遵循與上述相同的設計/放置模式。

父系 NavigationViewItem 和子系 NavigationViewItem 都將擁有自己的 InfoBadge 屬性。 您可以將父系 InfoBadge 的值繫結到確定子級 InfoBadge 值的因素，例如在父系 InfoBadge 上顯示子系 InfoBadge 的數字總和。

此圖顯示了階層式 NavigationView，其 PaneDisplayMode 設定為 Top，其中最上層 (父系) 項目顯示數值 InfoBadge。 應用程式已將父項目 InfoBadge 設定為表示子項目 InfoBadge 中顯示的內容，因為子項目前未展開 (因此看不到)。

具有 InfoBadge 的階層式 NavigationView

在另一個控制項中使用 InfoBadge

您可能希望在應用程式中除 NavigationView 之外的元素上顯示警示或通知。 您可能有需要特別注意的 ListViewItem，或是顯示通知的功能表項目。 在這些情況下，您可以將 InfoBadge 與其他控制項直接整合到您的 UI 中。

InfoBadge 是 UIElement，因此無法作為共用資源使用。

若要這樣做，請像使用其他控制項一樣使用 InfoBadge - 只需將 InfoBadge 標記新增至您希望其顯示的位置即可。 由於 InfoBadge 繼承自 Control，因此它具有所有內建定位屬性，例如邊緣、對齊方式、邊框間距等，您可以使用這些屬性將 InfoBadge 精確定位到您想要的位置。

如果將 InfoBadge 放置在另一個控制項 (例如 Button 或 ListViewItem) 內，則當您將其放置到超出父控制項的週框方塊時，它可能會被裁剪。 如果您的 InfoBadge 位於另一個控制項內，則它的位置不應超出該控制項的整個週框方塊的角落。

範例：將 InfoBadge 放置在另一個控制項中

以下 Button 的右上角放置了 InfoBadge，徽章位於內容之上。 此範例也可以套用到 Button 以外的許多控制項 - 這只是示範如何在另一個 WinUI 控制項內放置、定位和顯示 InfoBadge。

<Button Width="200" Height="60" Padding="4"
        HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch">
    <Grid>
        <SymbolIcon Symbol="Sync"/>
        <InfoBadge x:Name="buttonInfoBadge"
                        Background="#C42B1C"
                        HorizontalAlignment="Right" 
                        VerticalAlignment="Top"
                        Width="16" Height="16">
            <InfoBadge.IconSource>
                <FontIconSource Glyph="&#xEA6A;"/>
            </InfoBadge.IconSource>
        </InfoBadge>
    </Grid>
</Button>

具有圖示 InfoBadge 的按鈕

管理 InfoBadge

InfoBadge 通常會顯示暫時性警示，因此通常會在應用程式執行時顯示或隱藏它，並定期變更其樣式。

顯示和隱藏 InfoBadge

您可以使用 Visibility 屬性或 Opacity 屬性根據使用者動作、程式邏輯、計數器等來顯示和隱藏 InfoBadge。

與其他 UIElement 一樣，設定 Visibility.Collapsed 將使 InfoBadge 不佔用版面中的空間，因此可能會導致其他元素在顯示和隱藏時移動位置。

如果需要重新放置元素，您可以使用 Opacity 屬性來顯示和隱藏 InfoBadge。 Opacity 預設為 1.0; 您可以將其設定為 0 以隱藏 InfoBadge。 當您使用 Opacity 屬性時，即使 InfoBadge 目前處於隱藏狀態，它仍會佔用版面中的空間。

變更 InfoBadge 樣式

您可以在顯示 InfoBadge 時變更顯示在 InfoBadge 中的圖示或數字。 可以透過變更 InfoBadge.Value 的值來根據使用者動作遞減或遞增數值 InfoBadge。 透過將 InfoBadge.IconSource 設定為新的 IconSource 物件即可變更 InfoBadge 的圖示。 變更圖示時，請確保新圖示與舊圖示大小相同，以避免產生不和諧的視覺效果。

預設行為

如果 InfoBadge.Value 和 InfoBadge.IconSource 都未設定，則 InfoBadge 預設會顯示點 (特別是如果 Value 設定為 -1，且 IconSource 設定為 null，這是預設值)。 如果同時設定了 Value 和 IconSource 屬性，InfoBadge 將遵循 Value 屬性並顯示數字值。

您也可以在顯示 InfoBadge 時變更其類型。 若要變更 InfoBadge 的類型，請確保將目前類型的對應屬性 (Value 或 IconSource) 設為其預設值 (-1 或 null)，並將新類型的屬性設為適當的值。 若要將 InfoBadge 類型從數值或圖示變更為點類型 InfoBadge，請確認 InfoBadge.Value 設定為 -1，InfoBadge.IconSource 設定為 null。

請注意，根據您放置 InfoBadge 的方式，這可能會導致項目發生移動，因為 InfoBadge 的大小和形狀可能會改變。