Informační odznak

Badging je nerušivý a intuitivní způsob zobrazení oznámení nebo přenesení fokusu do oblasti v aplikaci – ať už se jedná o oznámení, indikující nový obsah nebo zobrazení výstrahy. info badge je malá část uživatelského rozhraní, která se dá přidat do aplikace a přizpůsobit tak, aby zobrazovala číslo, ikonu nebo jednoduchou tečku.

info badge je integrovaný do navigation viewXAML , ale může být také umístěn jako samostatný prvek ve stromu XAML, který umožňuje umístit info badge do libovolného ovládacího prvku nebo části uživatelského rozhraní podle vašeho výběru. Pokud používáte info badge někde jinde než navigation view, zodpovídáte za programové určení, kdy zobrazit a zavřít info badgea kam umístit info badge.

Je to správná kontrola?

info badge byste měli použít, když chcete uživatele zaměřit na určitou oblast aplikace neintruktivním způsobem. Když se objeví info badge, má upozornit na určitou oblast a umožnit uživateli znovu se soustředit na svou práci, přičemž mu dává možnost rozhodnout se, zda prozkoumá podrobnosti o tom, proč se info badge objevil. Informační odznáčky by měly představovat pouze zprávy, které lze zavřít a jsou nepermanentní – info badge by mělo mít konkrétní pravidla o tom, kdy se může objevit, zmizet a změnit.

Příklady vhodného info badge využití:

• Chcete-li označit, že byly doručeny nové zprávy.
• Aby bylo jasné, že jsou k dispozici nové články ke čtení.
• Chcete-li označit, že na stránce jsou k dispozici nové možnosti.
• Chcete-li označit, že může dojít k problému s položkou na určité stránce, která neblokuje fungování aplikace.

Kdy se má použít jiný ovládací prvek?

info badge by se nemělo používat k zobrazení kritických chyb nebo k vyjádření vysoce důležitých zpráv, které vyžadují okamžitou akci. Informační odznáčky by se neměly používat v případech, kdy je nutné s nimi okamžitě interagovat pro pokračování v používání aplikace.

Příklady nevhodného info badge použití:

• Pokud chcete na stránce v aplikaci naznačit naléhavé záležitosti, kterou je potřeba vyřešit, než ji budete dál používat. Pro tento scénář použijte content dialog.
• Zobrazuje se v aplikaci bez možnosti, aby uživatel zavřel info badge. Pro trvalou výstrahu, jako je tato, použijte info bar.
• Použití info badge jako trvalého způsobu, jak zaměřit pozornost uživatele na oblast, bez možnosti, aby uživatel zavřel info badge.
• Použití info badge jako běžné ikony nebo obrázku v aplikaci. Místo toho použijte odpovídající obrázek nebo ikonu (viz IconElement a IconSource).

Typy info badgesystémů

Existují tři styly info badge, ze kterého si můžete vybrat – tečky, ikonaa číselná, jak je znázorněno níže.

Tečka info badge

Tečka info badge je jednoduchá elipsa s průměrem 4px. Nemá žádné ohraničení a nemá v úmyslu uchovávat text ani nic jiného uvnitř.

Pro obecné scénáře, ve kterých chcete uživatele zaměřit na info badge, byste měli použít tečku info badge – například indikovat, že je k dispozici nový obsah nebo aktualizace.

Ikona info badge

Ikona info badge je elipsa o průměru 16 pixelů, která obsahuje ikonu uvnitř. info badge má vlastnost IconSource, která poskytuje flexibilitu pro typy podporovaných ikon.

Pomocí ikony info badge byste měli poslat rychlou notifikaci a získat tím pozornost uživatele – například k upozornění, že se vyskytla nějaká menší chyba, je k dispozici další důležitá aktualizace, nebo že je aktuálně povoleno něco konkrétního v aplikaci (například probíhá odpočítávání časovače).

Pokud chcete použít BitmapIconSource pro IconSourceinfo badge, zodpovídáte za to, že rastrový obrázek zapadá do info badge (změnou velikosti ikony nebo změnou velikosti info badge).

Číselné info badge

Číselná hodnota info badge má stejný tvar a velikost jako ikona info badge, ale má uvnitř číslici určenou vlastností Hodnota . Čísla musí být celá celá čísla a musí být větší nebo rovna nule. Šířka info badge se automaticky zvětší, protože zobrazené číslo roste na více číslic, s plynulou animací.

Číselnou info badge byste měli použít k zobrazení určitého počtu položek, které vyžadují pozornost – například nové e-maily nebo zprávy.

Přednastavené styly info badge

Pro podporu nejběžnějších scénářů, ve kterých se používají info badge, obsahuje ovládací prvek předdefinované info badge styly. I když si můžete info badge přizpůsobit tak, aby používala libovolnou požadovanou kombinaci barev/ikon/čísel, jsou tyto předdefinované předvolby rychlou možností, abyste měli jistotu, že info badge vyhovuje pokynům přístupnosti a je úměrná velikosti ikon a čísel.

Pro info badges jsou k dispozici následující předvolby stylu:

Pozornost

• AttentionDotInfoBadgeStyle
• AttentionIconInfoBadgeStyle
• AttentionValueInfoBadgeStyle

Informational

• InformationalDotInfoBadgeStyle
• InformationalIconInfoBadgeStyle
• InformationalValueInfoBadgeStyle

Success

• SuccessDotInfoBadgeStyle
• SuccessIconInfoBadgeStyle
• SuccessValueInfoBadgeStyle

Upozornění

• CautionDotInfoBadgeStyle
• CautionIconInfoBadgeStyle
• CautionValueInfoBadgeStyle

Kritické

• CriticalDotInfoBadgeStyle
• CriticalIconInfoBadgeStyle
• CriticalValueInfoBadgeStyle

Pokud je styl nastaven na info badge a konfliktní vlastnost je také nastavena, vlastnost přepíše konfliktní část stylu, ale nekonfliktní prvky stylu zůstanou zachovány.

Pokud například použijete CriticalIconInfoBadgeStyle na info badge, ale také nastavíte InfoBadge.Value = "1", skončíte s info badge, který má barvu pozadí Kritické, ale zobrazí číslo 1 uvnitř, místo zobrazení přednastavené ikony.

Tento příklad vytvoří info badge, který převezme barvu a ikonu Ikona pozornosti přednastaveného stylu.

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

Accessibility

Ovládací prvek info badge nemá k dispozici žádné funkce čtečky obrazovky ani automatizaci uživatelského rozhraní (UIA), protože ovládací prvek není fokusovatelný a nelze s ním pracovat.

Pokud používáte info badge uvnitř navigation view, navigation view poskytuje integrovanou podporu pro čtečky obrazovky a technologie podporující usnadnění. Když procházíte navigation view a přejdete na položku navigation view s info badge, čtečka obrazovky oznámí, že tato položka obsahuje info badge. Pokud je příslušný info badge číselný, čtečka obrazovky oznámí také hodnotu info badge.

Pokud používáte info badge mimo navigation view, doporučujeme, aby vaše aplikace byla plně přístupná:

• Nadřazený prvek info badge by měl být fokusovatelný a přístupný pomocí tabulátoru.
• Nadřazený prvek oznamuje info badge čtečkám obrazovky.
• Aplikace odešle oznámení UIA, když se poprvé zobrazí info badge.
• Aplikace odešle oznámení UIA, když z uživatelského rozhraní zmizí info badge.
• Aplikace odešle oznámení UIA, když dojde k významné změně u existujícího info badge.
  • Definice "významné změny" je na vás jako jednotlivý vývojář. Mezi příklady může patřit: info badge přepínání mezi různými typy, info badge změna barvy tak, aby představovala její stav, nebo hodnota info badgepřekračující určitý významný počet.

Chcete-li určit, co nadřazený prvek oznamuje čtečkám obrazovky, můžete použít připojené vlastnosti AutomationProperties třídy. Pro info badgese doporučuje nastavit připojenou vlastnost buď AutomationProperties.FullDescription, nebo AutomationProperties.ItemStatus na nadřazeném prvku.

Pokud chcete poslat UIA oznámení při zobrazení nebo zavření info badge, můžete použít metodu AutomationPeer.RaiseAutomationEvent.

info badge má výchozí velikost, která splňuje požadavky na přístupnost. Můžete přizpůsobit mnoho aspektů info badge včetně výšky/šířky/barvy atd., ale je důležité, aby výchozí info badge dodržovaly naše pokyny pro přístupnost pro velikost a barvu.

Vytvoření InfoBadge

Důležité

Některé informace se týkají předběžné verze produktu, který může být podstatně změněn před vydáním. Společnost Microsoft neposkytuje žádné záruky, výslovné ani implicitní, ohledně zde poskytnutých informací.

• důležitá rozhraní API:třídy InfoBadge , vlastnost IconSource, vlastnost Value

Otevřete aplikaci Galerie WinUI 3 a podívejte se na infoBadge v akci

Aplikace Galerie WinUI 3 obsahuje interaktivní příklady ovládacích prvků a funkcí WinUI. Získejte aplikaci z Microsoft Store nebo vyhledejte zdrojový kód na GitHub.

Můžete vytvořit InfoBadge v jazyce XAML nebo v kódu. Typ InfoBadge, který vytvoříte, určuje, které vlastnosti jste nastavili.

Tečka

Chcete-li vytvořit tečku InfoBadge, použijte výchozí ovládací prvek InfoBadge bez nastavených vlastností.

<InfoBadge />

Ikona

Chcete-li vytvořit ikonu InfoBadge, nastavte IconSource vlastnost.

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

Numerický

Chcete-li vytvořit číselné InfoBadge, nastavte vlastnost Value.

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

Ve většině scénářů vytvoříte vazbu vlastnosti Value InfoBadge na měnící se celočíselnou hodnotu v back-endu vaší aplikace, abyste mohli snadno zvýšit nebo snížit a zobrazit/skrytí InfoBadge na základě této konkrétní hodnoty.

Poznámka:

Pokud jsou nastaveny vlastnosti Icon i Value, má přednost vlastnost Value a InfoBadge se zobrazí jako číselná infobadge.

Použití „InfoBadge“ v „NavigationView“

Pokud ve své aplikaci používáte NavigationView, doporučujeme použít InfoBadge v NavigationView k zobrazení oznámení a upozornění pro celou aplikaci. Chcete-li umístit InfoBadge na NavigationViewItem, přiřaďte InfoBadge objektu NavigationViewItem.InfoBadge vlastnost.

V Left-Expanded režimu se InfoBadge zobrazí doprava zarovnaný k okraji NavigationViewItem.

V režimu Left-Compact se InfoBadge zobrazí jako překrytí v pravém horním rohu ikony.

InfoBadge

V horním režimu je InfoBadge zarovnaný do pravého horního rohu celkové položky.

Doporučujeme, abyste v jednom navigačním zobrazení nepoužíli různé typy InfoBadges, jako je připojení číselného infoBadge k jednomu objektu NavigationViewItem a tečka InfoBadge k jinému objektu NavigationViewItem ve stejném navigačním zobrazení.

Příklad: Zvýšení číselného objektu InfoBadge v navigačním zobrazení

Tento příklad simuluje, jak může e-mailová aplikace používat InfoBadge v navigationView k zobrazení počtu nových e-mailů ve složce Doručená pošta a zvýšení čísla zobrazeného v InfoBadge při přijetí nové zprávy.

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

Hierarchie v navigačním zobrazení

Pokud máte hierarchické navigační zobrazení, s NavigationViewItems vnořenými v jiných NavigationViewItems, nadřazené položky budou následovat stejné vzory návrhu a umístění, jak je popsáno výše.

Nadřazené i podřízené NavigationViewItems budou mít své vlastní vlastnosti InfoBadge. Hodnotu InfoBadge rodiče můžete svázat s faktory, které určují hodnoty InfoBadge dětí, jako je například zobrazení součtu čísel InfoBadges dětí v infobadge rodiče.

Tento obrázek znázorňuje hierarchický NavigationView s režimem zobrazení panelu nastaveným na Top, kde položka nejvyšší úrovně (nadřazená) zobrazuje číselný InfoBadge. Aplikace nastavila nadřazenou položku InfoBadge tak, aby reprezentovala to, co se zobrazuje v InfoBadge podřízených položek, jelikož podřízené položky momentálně nejsou rozbalené (a tudíž nejsou viditelné).

Použití InfoBadge v jiném ovládacím prvku

Můžete chtít zobrazit upozornění nebo oznámení u prvků v jiné aplikaci než NavigationView. Možná máte ListViewItem, která vyžaduje zvláštní pozornost, nebo položku nabídky, která zobrazuje oznámení. V těchto případech můžete infoBadge integrovat přímo do uživatelského rozhraní s jinými ovládacími prvky.

InfoBadge je UIElement, a proto ho nelze použít jako sdílený prostředek.

Pro toto použijte InfoBadge stejně jako jiný ovládací prvek – jednoduše přidejte kód InfoBadge na místo, kde se má zobrazit. Vzhledem k tomu, že InfoBadge dědí z Ovládací, má všechny integrované vlastnosti umístění, jako jsou okraje, zarovnání, odsazení a další, které můžete použít k umístění InfoBadge přesně tam, kde ho chcete mít.

Pokud umístíte InfoBadge do jiného ovládacího prvku, například Button nebo ListViewItem, a nastavíte jej tak, aby přesahoval ohraničující rámeček nadřazeného ovládacího prvku, je pravděpodobné, že bude oříznut. Pokud je infoBadge uvnitř jiného ovládacího prvku, neměl by být umístěn za rohy celkového ohraničujícího rámečku ovládacího prvku.

Příklad: Umístění InfoBadge do jiného ovládacího prvku

Zde je tlačítko, které má InfoBadge umístěno v pravém horním rohu, přičemž odznáček je vrstven nad obsahem. Tento příklad lze použít u mnoha ovládacích prvků kromě tlačítka – jednoduše ukazuje, jak umístit, umístit a zobrazit InfoBadge uvnitř jiného ovládacího prvku WinUI 3.

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

tlačítko

Správa služby InfoBadge

InfoBadge obvykle zobrazuje přechodné upozornění, takže je běžné ho zobrazovat nebo skrýt a pravidelně měnit jeho styl během běhu aplikace.

Zobrazení a skrytí informačního odznaku

K zobrazení a skrytí InfoBadge můžete použít vlastnost viditelnosti nebo vlastnost neprůhlednosti na základě akcí uživatele, logiky programu, čítačů atd.

Stejně jako u jiných prvků uživatelského rozhraní, nastavení Visibility.Collapsed způsobí, že InfoBadge nezabere v rozložení místo, což může způsobit, že se ostatní prvky budou pohybovat, když se zobrazí a skryje.

Pokud máte obavy z přemísťování prvků, můžete použít vlastnost Opacity k zobrazení a skrytí InfoBadge. Opacity je ve výchozím nastavení nastavena na 1.0, můžete jej nastavit tak, aby 0 skrylo InfoBadge. Když použijete vlastnost Opacity, aplikace InfoBadge bude stále zabírat místo v rozložení, i když je aktuálně skrytá.

Změna stylu InfoBadge

Ikonu nebo číslo zobrazené v aplikaci InfoBadge můžete změnit, když se zobrazuje. Dekrementace nebo zvýšení číselného souboru InfoBadge na základě akce uživatele lze dosáhnout změnou hodnoty InfoBadge.Value. Změnou ikony InfoBadge lze dosáhnout nastavením InfoBadge.IconSource na nový objekt IconSource. Při změně ikon zajistěte, aby nová ikona měla stejnou velikost jako stará ikona, aby se zabránilo rušivému vizuálnímu efektu.

Výchozí chování

Pokud nejsou nastaveny žádné InfoBadge.Value ani InfoBadge.IconSource, infoBadge nastaví tečku (konkrétně pokud je Value nastavena na -1 a IconSource je nastavena na null, což jsou výchozí hodnoty). Pokud jsou nastaveny vlastnosti Value i IconSource, InfoBadge bude respektovat vlastnost Value a zobrazí číselnou hodnotu.

Můžete také změnit typ InfoBadge, když se zobrazuje. Chcete-li změnit typ InfoBadge, ujistěte se, že odpovídající vlastnost aktuálního typu (Value nebo IconSource) je nastavena na výchozí hodnotu (-1 nebo null) a nastavte vlastnost nového typu odpovídající hodnotě. Chcete-li změnit typ InfoBadge z číselné nebo ikony na tečku typu InfoBadge, ujistěte se, že je InfoBadge.Value nastavena na -1 a InfoBadge.IconSource je nastavena na null.

V závislosti na tom, jak jste umístili InfoBadge, mějte na paměti, že to může způsobit posun položek, protože velikost a tvar InfoBadge se můžou změnit.

Související články

• NavigationView