Znaczek informacyjny

Badging to nieinwazyjny i intuicyjny sposób wyświetlania powiadomień lub skupienia się na obszarze w aplikacji — niezależnie od tego, czy dotyczy to powiadomień, wskazywania nowej zawartości, czy wyświetlania alertu. info badge to mały fragment interfejsu użytkownika, który można dodać do aplikacji i dostosować do wyświetlania liczby, ikony lub prostej kropki.

info badge jest wbudowany w navigation viewXAML, ale może być także umieszczony jako autonomiczny element w drzewie XAML, co pozwala umieścić info badge w dowolnej kontrolce lub w dowolnym wybranym elemencie interfejsu użytkownika. W przypadku korzystania z info badge gdziekolwiek indziej niż navigation view, należy do użytkownika odpowiedzialność za programowe określenie, kiedy pokazać i ukryć info badgeoraz gdzie umieścić info badge.

Czy jest to właściwa kontrola?

info badge należy używać, gdy chcesz skupić użytkownika na określonym obszarze aplikacji w sposób niezamierzony. Gdy pojawi się info badge, należy skupić się na obszarze, a następnie pozwolić użytkownikowi wrócić do przepływu, dając im wybór, czy należy przyjrzeć się szczegółom, dlaczego pojawił się info badge. Znaczki informacyjne powinny reprezentować tylko komunikaty, które są możliwe do odrzucenia i niepermanentne — info badge powinno mieć określone zasady dotyczące tego, kiedy mogą się pojawiać, znikać i zmieniać.

Przykłady odpowiedniego użycia info badge:

• Aby wskazać, że przybyły nowe wiadomości.
• Aby wskazać, że nowe artykuły są dostępne do przeczytania.
• Aby wskazać, że na stronie są dostępne nowe opcje.
• Aby wskazać, że na określonej stronie może wystąpić problem z elementem, który nie blokuje działania aplikacji.

Kiedy należy użyć innej kontrolki?

Nie należy używać info badge do wyświetlania błędów krytycznych ani przekazywania bardzo ważnych komunikatów wymagających natychmiastowego działania. Znaczki informacji nie powinny być używane, gdy wymagają natychmiastowego działania, aby kontynuować korzystanie z aplikacji.

Przykłady niewłaściwego użycia info badge:

• Aby wskazać pilną sprawę na stronie w aplikacji, która musi zostać rozwiązana przed kontynuowaniem korzystania z aplikacji. W tym scenariuszu użyj content dialog.
• Element info badgepojawia się w aplikacji bez możliwości jego odrzucenia przez użytkownika. W przypadku takiego trwałego alertu użyj info bar.
• Użycie info badge jako trwałego sposobu na skoncentrowanie użytkownika na obszarze bez możliwości odrzucenia info badge.
• Używanie info badge jako zwykłej ikony lub obrazu w aplikacji. Zamiast tego użyj odpowiedniego obrazu lub ikony (zobacz IconElement i IconSource).

Typy info badges

Istnieją trzy style info badge, które można wybrać — kropka, ikona i liczbowy, jak pokazano poniżej.

Kropka info badge

Kropka info badge jest prostą elipsą o średnicy 4 piksele. Nie ma obramowania i nie jest przeznaczony do przechowywania tekstu ani niczego innego w nim.

Należy użyć kropki info badge dla ogólnych scenariuszy, w których chcesz kierować fokusem użytkownika w kierunku info badge — na przykład, aby wskazać, że dostępna jest nowa zawartość lub aktualizacje.

Ikona info badge

Ikona info badge to wielokropek o średnicy 16 pikseli, który posiada ikonę wewnątrz. Obiekt info badge ma właściwość IconSource, która zapewnia elastyczność dla typów obsługiwanych ikon.

Użyj ikony info badge, aby wysłać szybką wiadomość wraz z zwróceniem uwagi użytkownika — na przykład, aby powiadomić użytkownika, że coś nieblokującego poszło źle, dostępna jest dodatkowa ważna aktualizacja lub że aktualnie włączono coś specyficznego dla aplikacji (np. czasomierz odliczania).

Jeśli chcesz użyć BitmapIconSource dla IconSource swojego info badge, musisz upewnić się, że mapa bitowa mieści się wewnątrz info badge (poprzez zmianę rozmiaru ikony lub rozmiaru info badge).

info badge numeryczny

Numer info badge ma ten sam kształt i rozmiar co ikona info badge, ale zawiera liczbę w środku, określaną wg właściwości Value. Liczby muszą być liczbami całkowitymi i muszą być większe lub równe zero. Szerokość info badge automatycznie rozszerzy się, gdy wyświetlana liczba wzrośnie do kilku cyfr, z płynną animacją.

Należy użyć info badge, aby pokazać, że istnieje określona liczba elementów wymagających uwagi — na przykład nowych e-maili lub wiadomości.

Ustawienia wstępne stylów info badge

Aby wspierać najbardziej typowe scenariusze użycia info badges, kontrolka zawiera wstępnie zdefiniowane style info badge. Możesz dostosować info badge tak, aby korzystała z dowolnej kombinacji kolorów/ikon/numerów, ale te wbudowane ustawienia wstępne są szybką opcją, aby upewnić się, że info badge jest zgodna z wytycznymi dotyczącymi ułatwień dostępu i jest proporcjonalna pod względem rozmiaru ikony i liczby.

Następujące ustawienia wstępne stylu są dostępne dla info badges:

Uwaga

• AttentionDotInfoBadgeStyle
• AttentionIconInfoBadgeStyle
• AttentionValueInfoBadgeStyle

Informational

• InformationalDotInfoBadgeStyle
• InformationalIconInfoBadgeStyle
• InformationalValueInfoBadgeStyle

Powodzenie

• SuccessDotInfoBadgeStyle
• SuccessIconInfoBadgeStyle
• SuccessValueInfoBadgeStyle

style

Ostrzeżenie

• CautionDotInfoBadgeStyle
• CautionIconInfoBadgeStyle
• CautionValueInfoBadgeStyle

Critical

• CriticalDotInfoBadgeStyle
• CriticalIconInfoBadgeStyle
• CriticalValueInfoBadgeStyle

style

Jeśli styl jest ustawiony na info badge, a właściwość powodująca konflikt zostanie również ustawiona, właściwość zastąpi konfliktową część stylu, ale elementy stylu niezwiązane z konfliktem pozostaną stosowane.

Jeśli na przykład zastosujesz CriticalIconInfoBadgeStyle do info badge, ale również ustawisz InfoBadge.Value = "1", zostanie wyświetlona info badge, która ma kolor tła "Krytyczny", ale wyświetla liczbę 1 w środku, zamiast wyświetlać ikonę domyślną.

W tym przykładzie zostanie utworzona info badge, która przyjmuje kolor i ikonę Ikona uwagi stylu predefiniowanego.

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

Accessibility

Kontrolka info badge nie posiada żadnych funkcji czytnika ekranu ani zautomatyzowanego interfejsu użytkownika (UIA), ponieważ nie jest fokusowalna i nie można wchodzić z nią w interakcje.

Jeśli korzystasz z info badge wewnątrz navigation view, navigation view zapewnia wbudowany czytnik ekranu i obsługę technologii pomocniczych. Gdy przechodzisz przez navigation view i lądujesz na elemencie navigation view z info badge, czytnik ekranu oznajmi, że na tym elemencie jest info badge. Jeśli pytanie info badge jest liczbowe, czytnik zawartości ekranu ogłosi również wartość info badge.

Jeśli używasz info badge poza navigation view, zalecamy następujące kroki, aby upewnić się, że aplikacja jest w pełni dostępna:

• Element nadrzędny info badge powinien być możliwy do fokusowania i dostępny za pomocą tabulatora.
• Element nadrzędny ogłasza info badge czytnikom zawartości ekranu.
• Aplikacja wysyła powiadomienie UIA, gdy info badge pojawi się po raz pierwszy.
• Aplikacja wysyła powiadomienie UIA, gdy info badge zniknie z interfejsu.
• Aplikacja wysyła powiadomienie UIA, gdy nastąpi istotna zmiana w istniejącym info badge.
  • Definicja "znaczącej zmiany" zależy od Ciebie jako indywidualnego dewelopera. Przykłady mogą to obejmować: przełączanie się info badge między różnymi typami, zmiana koloru przez info badge w celu reprezentacji jego stanu, lub wartość info badgeprzekraczającą pewną znaczną liczbę.

Aby kontrolować, co element nadrzędny ogłasza czytnikom zawartości ekranu, możesz użyć dołączonych właściwości klasy AutomationProperties. W przypadku info badgezalecane jest ustawienie właściwości AutomationProperties.FullDescription lub AutomationProperties.ItemStatus dołączonych do elementu nadrzędnego.

Aby wysyłać powiadomienia UIA po pojawieniu się lub zniknięciu info badge, możesz użyć metody AutomationPeer.RaiseAutomationEvent.

info badge ma domyślny rozmiar spełniający wymagania dotyczące ułatwień dostępu. Można dostosować wiele aspektów info badge, w tym jego wysokość/szerokość/kolor itp., ale ważne jest, aby domyślna info badge była zgodna z naszymi wytycznymi dotyczącymi ułatwień dostępu dla rozmiaru i koloru.

Utwórz InfoBadge

Ważne

Niektóre informacje odnoszą się do produktu w wersji wstępnej, który może zostać znacząco zmodyfikowany przed jego wydaniem. Firma Microsoft nie udziela żadnych gwarancji, wyraźnych ani domniemanych, w odniesieniu do podanych tutaj informacji.

• ważne interfejsy API:klasy InfoBadge, właściwość IconSource, właściwość Value

Otwórz aplikację Galerii WinUI 3 i zobacz aplikację InfoBadge w akcji

Aplikacja Galeria WinUI 3 zawiera interaktywne przykłady większości kontrolek, funkcji i funkcji interfejsu WinUI 3. Pobierz aplikację ze Sklepu Microsoft lub pobierz kod źródłowy w witrynie GitHub

Możesz utworzyć InfoBadge w XAML lub w kodzie. Rodzaj tworzonego obiektu InfoBadge zależy od ustawionych właściwości.

Kropka

Aby utworzyć kropkę InfoBadge, użyj domyślnej kontrolki InfoBadge bez ustawionej właściwości.

<InfoBadge />

Dot InfoBadge

Icon

Aby utworzyć ikonę InfoBadge, ustaw właściwość IconSource.

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

Numeric

Aby utworzyć liczbowy InfoBadge, ustaw właściwość Value.

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

W większości scenariuszy powiążesz właściwość Value Elementu InfoBadge ze zmieniającą się wartością całkowitą w zapleczu aplikacji, aby można było łatwo zwiększać/dekrementować i ukrywać obiekt InfoBadge na podstawie tej konkretnej wartości.

Uwaga / Notatka

Jeśli ustawiono zarówno właściwości Icon, jak i Value właściwość Value ma pierwszeństwo, a obiekt InfoBadge jest wyświetlany jako liczbowy obiekt InfoBadge.

Używanie InfoBadge w NavigationView

Jeśli używasz elementu NavigationView w aplikacji, zalecamy użycie kontrolki InfoBadge w widoku Nawigacji w celu wyświetlania powiadomień i alertów dotyczących całej aplikacji. Aby umieścić obiekt InfoBadge w obiekcie NavigationViewItem, przypisz obiekt InfoBadge do właściwości NavigationViewItem.InfoBadge.

W trybie Left-Expanded obiekt InfoBadge jest wyrównany do prawej krawędzi elementu NavigationViewItem.

W trybie Left-Compact zostanie wyświetlona nakładka InfoBadge w prawym górnym rogu ikony.

InfoBadge

W trybie Top InfoBadge jest wyrównany do prawego górnego rogu całego elementu.

Zalecamy, aby w jednym elemencie NavigationView nie używać różnych typów InfoBadge, takich jak dołączanie liczbowej ikonki InfoBadge do jednego elementu NavigationViewItem i InfoBadge z kropką do innego elementu NavigationViewItem w tym samym NavigationView.

Przykład: zwiększanie liczbowej kontrolki InfoBadge w widoku nawigacji

W tym przykładzie symuluje, w jaki sposób aplikacja poczty e-mail może używać kontrolki InfoBadge w kodzie NavigationView, aby wyświetlić liczbę nowych wiadomości e-mail w skrzynce odbiorczej i zwiększać liczbę wyświetlaną w infoBadge po odebraniu nowej wiadomości.

<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();
    }
}

Hierarchia w widoku nawigacji

Jeśli masz hierarchiczny element NavigationViewz elementami NavigationViewItems zagnieżdżonymi w innych elementach NavigationViewItems, elementy nadrzędne będą stosować te same wzorce projektowania/umiejscowienia, jak opisano powyżej.

Element nadrzędny NavigationViewItem i podrzędny element NavigationViewItems będą mieć własną właściwość InfoBadge. Wartość InfoBadge elementu nadrzędnego można powiązać z czynnikami określającymi wartości InfoBadge elementów dziecięcych, na przykład poprzez pokazanie sumy liczbowych InfoBadge elementów dziecięcych na InfoBadge elementu nadrzędnego.

Na tym obrazie przedstawiono hierarchiczny widok NavigationView z ustawionym trybem PaneDisplayMode na Top, gdzie element najwyższego poziomu (nadrzędny) wyświetla numeryczną plakietkę InfoBadge. Aplikacja ustawiła główny element InfoBadge, aby reprezentował to, co jest wyświetlane w InfoBadges elementów podrzędnych, ponieważ elementy podrzędne nie są obecnie rozwinięte i dlatego nie są widoczne.

Używanie kontrolki InfoBadge w innej kontrolce

Możesz wyświetlić alerty lub powiadomienia dotyczące elementów w aplikacji innych niż NavigationView. Może istnieć ListViewItem, który wymaga szczególnej uwagi, albo element menu, który wyświetla powiadomienie. W takich przypadkach można zintegrować InfoBadge bezpośrednio z interfejsem użytkownika oraz innymi kontrolkami.

InfoBadge jest elementem interfejsu użytkownika i dlatego nie może być używany jako zasób udostępniony.

Aby to zrobić, użyj InfoBadge tak jak każdej innej kontrolki — po prostu dodaj znacznik InfoBadge w miejscu, w którym chcesz, aby się pojawił. Ponieważ element InfoBadge dziedziczy z Control, ma wszystkie wbudowane właściwości pozycjonowania, takie jak margines, wyrównanie, odstępy wewnętrzne i inne, których można użyć do pozycjonowania InfoBadge dokładnie tam, gdzie chcesz.

Jeśli umieścisz element InfoBadge wewnątrz innej kontrolki, na przykład Button lub ListViewItem, prawdopodobnie zostanie przycięty, jeśli ustawisz go, aby wykraczać poza pole ograniczenia kontrolki nadrzędnej. Jeśli element InfoBadge znajduje się wewnątrz innej kontrolki, nie powinien być umieszczony obok narożników ogólnego pola ograniczenia kontrolki.

Przykład: umieszczanie kontrolki InfoBadge wewnątrz innej kontrolki

Oto przycisk z umieszczonym w prawym górnym rogu InfoBadge, z odznaką nałożoną na zawartość. Ten przykład można również zastosować do wielu kontrolek innych niż Button — po prostu pokazuje, jak umieścić, umieścić i pokazać InfoBadge wewnątrz innej kontrolki WinUI.

<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>

przycisk InfoBadge

Zarządzanie usługą InfoBadge

InfoBadge zwykle wyświetla alert przejściowy, dlatego często jest on wyświetlany lub ukrywany, a jego styl jest okresowo zmieniany podczas działania aplikacji.

Pokazywanie i ukrywanie InfoBadge

Możesz użyć właściwości Widoczność lub Nieprzezroczystość, aby pokazać i ukryć InfoBadge na podstawie akcji użytkownika, logiki programu, liczników itp.

Podobnie jak w przypadku innych elementów interfejsu użytkownika, ustawienie Visibility.Collapsed spowoduje, że element InfoBadge nie zajmie miejsca w układzie, co może powodować przesunięcie innych elementów podczas jego wyświetlania i ukrywania.

Jeśli obawiasz się przesunięcia elementów, możesz użyć właściwości Opacity, aby pokazać i ukryć InfoBadge. Opacity jest domyślnie ustawiona na 1.0; można ustawić ją na 0, aby ukryć plik InfoBadge. Jeśli używasz właściwości Opacity, aplikacja InfoBadge nadal zajmuje miejsce w układzie, nawet jeśli jest ona obecnie ukryta.

Zmienianie stylu InfoBadge

Możesz zmienić ikonę lub liczbę wyświetlaną w programie InfoBadge podczas jego wyświetlania. Można zmniejszać lub zwiększać wartość liczbową InfoBadge na podstawie akcji użytkownika, zmieniając wartość InfoBadge.Value. Zmianę ikony obiektu InfoBadge można osiągnąć, ustawiając InfoBadge.IconSource na nowy obiekt IconSource. Podczas zmieniania ikon upewnij się, że nowa ikona ma taki sam rozmiar jak stara, aby uniknąć nieprzyjemnego efektu wizualnego.

Zachowanie domyślne

Jeśli ani InfoBadge.Value, ani InfoBadge.IconSource nie są ustawione, ustawienie domyślne InfoBadge powoduje wyświetlenie kropki (w szczególności jeśli Value jest ustawiona na -1, a IconSource jest ustawiona na null, które są wartościami domyślnymi). Jeśli ustawiono właściwości Value i IconSource, InfoBadge zhonoruje właściwość Value i wyświetli wartość liczbową.

Można również zmienić typ InfoBadge podczas jego wyświetlania. Aby zmienić typ InfoBadge, upewnij się, że odpowiednia właściwość bieżącego typu (Value lub IconSource) jest ustawiona na wartość domyślną (-1 lub null), a właściwość nowego typu jest równa odpowiedniej wartości. Aby zmienić typ obiektu InfoBadge z liczbowego lub ikony na kropkę typu InfoBadge, upewnij się, że InfoBadge.Value jest ustawiona na wartość -1, a InfoBadge.IconSource jest ustawiona na wartość null.

W zależności od tego, jak ustawisz element InfoBadge, pamiętaj, że jego rozmiar i kształt mogą się zmieniać, co może spowodować przesunięcia innych elementów.

UwP i WinUI 2

Ważne

Informacje i przykłady w tym artykule są zoptymalizowane dla aplikacji korzystających z Windows App SDK oraz WinUI 3, ale generalnie mają zastosowanie także w aplikacjach UWP używających WinUI 2. Zobacz dokumentację interfejsu API platformy UWP, aby uzyskać informacje i przykłady dotyczące platformy.

Ta sekcja zawiera informacje potrzebne do używania kontrolki w aplikacji platformy UWP lub WinUI 2.

Aplikacja InfoBadge dla platformy UWP wymaga interfejsu WinUI 2. Aby uzyskać więcej informacji, w tym instrukcje dotyczące instalacji, zobacz WinUI 2. Interfejsy API dla tej kontrolki istnieją w przestrzeni nazw Microsoft.UI.Xaml.Controls .

• API WinUI 2:Klasa InfoBadge, właściwość IconSource , właściwość Value
• Otwórz aplikację Galerii WinUI 2 i zobacz InfoBadge w akcji. Aplikacja z galerii WinUI 2 zawiera interaktywne przykłady większości kontrolek, funkcji i funkcji winUI 2. Pobierz aplikację ze Sklepu Microsoft lub pobierz kod źródłowy w witrynie GitHub.

Aby użyć kodu z tego artykułu w WinUI 2, użyj aliasu w XAML (używamy muxc), aby reprezentować API Biblioteki Interfejsu Użytkownika Windows, które są uwzględnione w Twoim projekcie. Aby uzyskać więcej informacji, zobacz Wprowadzenie do interfejsu WinUI 2 .

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

<muxc:InfoBadge/>

Powiązane artykuły

• Widok nawigacji