Információs jelvény

A jelvények használata nem tolakodó és intuitív módja az értesítések megjelenítésének vagy az alkalmazás egy területére való összpontosításnak – legyen szó értesítésekről, új tartalmakról vagy riasztások jelzéséről. A info badge egy kis felhasználói felület, amely hozzáadható egy alkalmazáshoz, és testre szabható egy szám, ikon vagy egyszerű pont megjelenítéséhez.

A info badge az XAML-navigation view-be van beépítve, de önálló elemként is elhelyezhető az XAML-fában, lehetővé téve, hogy egy info badge-t tetszőleges vezérlőbe vagy felhasználói felület részébe helyezze. Ha valahol máshol használ egy info badge-t, mint navigation view, Ön felelős azért, hogy programozott módon meghatározza, mikor jelenjen meg és zárja be a info badge-t, és hol helyezze el a info badge-at.

Ez a megfelelő vezérlő?

A info badge akkor lehet használni, ha a felhasználó fókuszát az alkalmazás bizonyos területére szeretné nem tolakodó módon helyezni. Amikor megjelenik egy info badge, az a célja, hogy a figyelmet egy területre irányítsa, majd hagyja, hogy a felhasználó visszatérjen a megszokott ritmusába, így eldöntheti, hogy megvizsgálja-e a info badge megjelenésének részleteit. Az információs jelvényeknek csak azokat az üzeneteket kell jelölniük, amelyek elutasíthatók és nem állandóak – az info badge meghatározott szabályokkal kell rendelkezniük arra vonatkozóan, hogy mikor jelennek meg, tűnnek el és változnak.

Példák a megfelelő info badge használatára:

• Új üzenetek érkezésének jelzése.
• Új cikkek érhetők el olvasásra.
• Annak jelzése, hogy új lehetőségek érhetők el egy lapon.
• Annak jelzése, hogy egy adott lapon található elem nem blokkolja az alkalmazás működését.

Mikor érdemes másik vezérlőt használni?

A info badge nem használhatók kritikus hibák megjelenítésére, illetve az azonnali beavatkozást igénylő, rendkívül fontos üzenetek továbbítására. Az információs jelvények nem használhatók olyan esetekben, amikor azonnal kapcsolatba kell lépni velük az alkalmazás használatának folytatásához.

Példák a nem megfelelő info badge használatára:

• Ha sürgős problémát szeretne jelezni az alkalmazás egy oldalán, amelyet meg kell oldani az alkalmazás használatának folytatása előtt. Ebben a forgatókönyvben használjon egy content dialog.
• Olyan alkalmazásban jelenik meg, amelyben a felhasználó nem utasíthatja el a info badge. Az ilyen folyamatos riasztásokhoz használjon info bar.
• A info badge egy állandó módja annak, hogy a felhasználó fókuszát egy területre irányítsuk, anélkül, hogy a felhasználó elháríthatná a info badgefigyelmét.
• Egy info badge használata normál ikonként vagy képként az alkalmazásban. Ehelyett használjon egy megfelelő kép vagy ikont (lásd IconElement és IconSource).

A info badgetípusai

A info badge háromféle stílus közül választhat : pont, ikonés numerikus, ahogyan az alább látható sorrendben látható.

Pont info badge

A pont info badge egy egyszerű ellipszis, amelynek átmérője 4px. Nincs szegélye, és nem célja, hogy szöveget vagy bármi mást tartson benne.

A pont info badge-t kell használni olyan általános forgatókönyvekben, ahol a felhasználó figyelmét a info badge-re szeretné irányítani – például új tartalom vagy frissítések elérhetővé válásának jelzésére.

Ikon info badge

Az ikon info badge egy ellipszis, amelynek átmérője 16 pixel, és benne egy ikon található. A info badge rendelkezik egy IconSource tulajdonságtal, amely rugalmasságot biztosít a támogatott ikonok típusaihoz.

Az ikont info badge kell használnia, hogy gyors üzenetet küldjön a felhasználó figyelmének felkeltése mellett– például figyelmeztetheti a felhasználót, hogy valami nem blokkoló hiba történt, egy további fontos frissítés érhető el, vagy hogy az alkalmazásban jelenleg engedélyezve van valami (például egy visszaszámlálási időzítő).

Ha szeretne egy BitmapIconSource a(z) IconSourceinfo badge-jéhez használni, akkor ön felelős azért, hogy a bitmap beilleszkedjen a info badge belsejébe (akár az ikon méretének, akár a info badgeméretének módosításával).

Numerikus info badge

A numerikus info badge ugyanaz az alakzat és méret, mint az ikon info badge, de a Érték tulajdonság által meghatározott számot tartalmaz. A számoknak egész egész számoknak kell lenniük, és nullánál nagyobbnak vagy egyenlőnek kell lenniük. A info badge szélessége automatikusan kinyílik, ahogy a megjelenített szám több számjegyre nő, sima animációval.

A numerikus info badge kell használnia annak megjelenítéséhez, hogy adott számú elemre van szükség– például új e-mailekre vagy üzenetekre.

Előre beállított info badge stílusok

A info badgeleggyakrabban használt forgatókönyvek támogatásához a vezérlő beépített előre megadott info badge stílusokat tartalmaz. Bár testre szabhatja a info badge, hogy bármilyen szín-/ikon-szám kombinációt használjon, ezek a beépített beállítások gyors megoldást jelentenek annak ellenőrzésére, hogy a info badge megfelelnek-e az akadálymentességi irányelveknek, és arányos-e az ikon- és számméretezés szempontjából.

A következő stílusbeállítások érhetők el info badgeesetén:

Figyelem

• AttentionDotInfoBadgeStyle
• AttentionIconInfoBadgeStyle
• AttentionValueInfoBadgeStyle

Informational

• InformationalDotInfoBadgeStyle
• InformationalIconInfoBadgeStyle
• InformationalValueInfoBadgeStyle

Success

• SuccessDotInfoBadgeStyle
• SuccessIconInfoBadgeStyle
• SuccessValueInfoBadgeStyle

Caution

• CautionDotInfoBadgeStyle
• CautionIconInfoBadgeStyle
• CautionValueInfoBadgeStyle

Vigyázat: InfoBadge stílusok

Critical

• CriticalDotInfoBadgeStyle
• CriticalIconInfoBadgeStyle
• CriticalValueInfoBadgeStyle

Ha egy stílus egy info badge van beállítva, és egy ütköző tulajdonság is be van állítva, a tulajdonság felülírja a stílus ütköző részét, de a nem ütköző stíluselemek továbbra is érvényesek maradnak.

** Ha például a CriticalIconInfoBadgeStyle-t egy info badge-re alkalmazza, de be van állítva a InfoBadge.Value = "1"is, akkor a "Kritikus" háttérszínnel rendelkező info badge-ban az előre beállított ikon helyett az 1-es szám jelenik meg.

Ez a példa létrehoz egy info badge-t, amely a Figyelem ikon előre beállított stílusának színét és ikonját veszi fel.

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

Accessibility

A info badge vezérlő nem rendelkezik beépített képernyőolvasó funkcióval vagy felhasználói felületi automatizálással (UIA), mivel a vezérlő nem összpontosítható, és nem kezelhető.

Ha egy info badge-ben navigation view-t használ, a navigation view beépített képernyőolvasó és kisegítő technológia támogatását nyújtja. Amikor egy navigation view-n halad végig, és egy navigation view elemre lép, amelyen egy info badge található, a képernyőolvasó bejelenti, hogy ezen az elemen van egy info badge. Ha a szóban forgó info badge numerikus, a képernyőolvasó felolvassa a info badgeértékét is.

Ha egy info badge-t használ egy navigation view-en kívül, az alábbiakat javasoljuk annak biztosítására, hogy az alkalmazás teljes mértékben elérhető legyen:

• A info badge szülőelemének fókuszba helyezhetőnek és lapról elérhetőnek kell lennie.
• A szülőelem bejelenti a info badge-t a képernyőolvasóknak.
• Az alkalmazás egy UIA-értesítést küld, amikor a info badge első alkalommal megjelenik.
• Az alkalmazás UIA-értesítést küld, ha egy info badge eltűnik a felhasználói felületről.
• Az alkalmazás egy UIA-értesítést küld, ha jelentős változás történt egy meglévő info badge.
  • A "jelentős változás" definíciója Önön, mint egyéni fejlesztőn múlik. Ilyen lehet például a info badge váltás a különböző típusok között, egy info badge, amely színt változtat az állapota megjelenítésére, vagy egy info badgeértéke, amely meghalad egy bizonyos jelentős számot.

A szülőelem képernyőolvasók számára történő bejelentésének szabályozásához használhatja a AutomationProperties osztály csatolt tulajdonságait. Egy info badgeesetében ajánlott beállítani a szülőelemhez tartozó AutomationProperties.FullDescription vagy AutomationProperties.ItemStatus csatolt tulajdonságokat.

Ha UIA-értesítéseket szeretne küldeni a info badgemegjelenésére vagy elutasítására, használhatja a AutomationPeer.RaiseAutomationEvent metódust.

A info badge az akadálymentességi követelményeknek megfelelő alapértelmezett méretben jelenik meg. A info badge számos aspektusát testre szabhatja, beleértve a magasságát/szélességét/színét stb., de fontos, hogy az alapértelmezett info badge betartsa a méretre és színre vonatkozó akadálymentességi irányelveket.

InfoBadge létrehozása

Fontos

Egyes információk az előzetes termékre vonatkoznak, amelyek a kiadás előtt jelentősen módosíthatók. A Microsoft nem vállal kifejezett vagy hallgatólagos szavatosságot az itt megadott információkra vonatkozóan.

• Fontos API-k:InfoBadge osztály, IconSource tulajdonság, Value tulajdonság

Nyissa meg a WinUI 3 Katalógus alkalmazást, és tekintse meg az InfoBadge működését

A WinUI 3 Katalógus alkalmazás interaktív példákat tartalmaz a WinUI vezérlőire és funkcióira. Kérje le az alkalmazást a Microsoft Áruházból vagy keresse meg a forráskódot a GitHub webhelyen.

Létrehozhat egy InfoBadge XAML-ben vagy kódban. A létrehozott InfoBadge típust a beállított tulajdonságok határozzák meg.

Pont

Pont InfoBadge létrehozásához használjon alapértelmezett InfoBadge-vezérlőt, amelyhez nincsenek tulajdonságok beállítva.

<InfoBadge />

Icon

Ikon InfoBadge létrehozásához állítsa be a IconSource tulajdonságot.

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

Numeric

Numerikus InfoBadge létrehozásához állítsa be a Érték tulajdonságot.

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

A legtöbb forgatókönyvben az InfoBadge Value tulajdonságát egy változó egész számhoz fogja kötni az alkalmazás háttérrendszerében, így egyszerűen növekményt/deklarálást végezhet, és megjelenítheti/elrejtheti az InfoBadge-t az adott érték alapján.

Megjegyzés:

Ha a Icon és a Value tulajdonság is be van állítva, a Value tulajdonság elsőbbséget élvez, és az InfoBadge numerikus InfoBadge-ként jelenik meg.

Az InfoBadge használata a NavigationView-ban

Ha navigációs nézetet használ az alkalmazásban, javasoljuk, hogy a NavigationView-ban egy InfoBadge használatával jelenítsen meg alkalmazásszintű értesítéseket és riasztásokat. Az InfoBadge navigationViewItemre való elhelyezéséhez rendelje hozzá az InfoBadge objektumot a NavigationViewItem.InfoBadge tulajdonsághoz.

Left-Expanded módban az InfoBadge a NavigationViewItem széléhez igazítva jelenik meg.

Left-Compact módban az InfoBadge az ikon jobb felső sarkában átfedésben jelenik meg.

Felső módban az InfoBadge a teljes elem jobb felső sarkához van igazítva.

Azt javasoljuk, hogy ne használjon különböző típusú InfoBadges-eket egy NavigationView-ban, például egy numerikus InfoBadge-et csatoljon az egyik NavigationViewItemhez, és egy pont InfoBadge-t egy másik NavigationViewItemhez ugyanabban a NavigationView-ban.

Példa: Numerikus InfoBadge növelése a NavigationView-ban

Ez a példa azt szimulálja, hogy egy levelezőalkalmazás hogyan használhatja az InfoBadge-t a NavigationView-ban az új e-mailek számának megjelenítéséhez a Beérkezett üzenetek mappában, és növeli az InfoBadge-ban megjelenő számot, amikor új üzenet érkezik.

<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 a NavigationView-ban

Ha olyan hierarchikus NavigationView-je van, amelyben a NavigationViewItemek más NavigationViewItemekbe vannak beágyazottak, akkor a szülőelemek ugyanazokat a kialakítási/elhelyezési mintákat követik, mint a fent leírtak.

A szülő NavigationViewItem és a gyermek NavigationViewItemek mindegyikének saját InfoBadge tulajdonsága lesz. A szülő InfoBadge-jának értékét olyan tényezőkhöz kötheti, amelyek meghatározzák a gyermekek InfoBadge értékeit, például megjelenítheti a gyermek numerikus InfoBadges-adatainak összegét a szülő InfoBadge-jén.

A képen egy hierarchikus NavigationView látható, amelynek PaneDisplayMode értéke Top, ahol a legfelső szintű (szülő) elem egy numerikus InfoBadge-et jelenít meg. Az alkalmazás úgy állította be a szülőelem InfoBadge etikettjét, hogy az a gyermekelemek InfoBadge etikettjeiben megjelenített információkat ábrázolja, mivel a gyermekelemek jelenleg nincsenek kibontva (és ezért nem láthatók).

InfoBadge használata egy másik vezérlőben

Előfordulhat, hogy riasztásokat vagy értesítéseket szeretne megjeleníteni az alkalmazás azon elemein, amelyek nem a NavigationView. Előfordulhat, hogy van egy ListViewItem, amely különös figyelmet igényel, vagy egy menüelem, amely értesítést jelenít meg. Ezekben az esetekben az InfoBadge közvetlenül integrálható a felhasználói felületbe más vezérlőkkel.

Az InfoBadge egy felhasználói felület, ezért nem használható megosztott erőforrásként.

Ennek érdekében használja az InfoBadge-t, ahogyan bármely más vezérlőt – egyszerűen adja hozzá az InfoBadge jelölőt oda, ahol meg szeretné jeleníteni. Mivel az InfoBadge a Vezérlőbőlszármazik, rendelkezik az összes beépített elhelyezési tulajdonsággal, például margóval, igazítással, kitöltéssel és egyebekkel, amelyekkel az InfoBadge-ját pontosan a kívánt helyre helyezheti.

Ha egy InfoBadge-et elhelyez egy másik vezérlőn belül, például egy Button vagy egy ListViewItem, akkor valószínűleg le lesz vágva, ha a szülő vezérlő határolókeretén túlnyúlik. Ha az InfoBadge egy másik vezérlőn belül van, akkor nem nyúlhat túl a vezérlőelem teljes határolókeretének sarkain.

Példa: InfoBadge elhelyezése egy másik vezérlőben

Itt látható egy gomb, amelyen egy InfoBadge van elhelyezve a jobb felső sarokban, a jelvény pedig a tartalom fölé van állítva. Ez a példa a Gombon kívül számos más vezérlőre is alkalmazható – egyszerűen bemutatja, hogyan helyezhet el, helyezhet el és jeleníthet meg egy InfoBadge-t egy másik WinUI 3 vezérlőn belül.

<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 kezelése

Az InfoBadge általában egy átmeneti riasztást jelenít meg, ezért gyakran előfordul, hogy megjeleníti vagy elrejti, és az alkalmazás futása közben rendszeresen módosítja a stílusát.

InfoBadge megjelenítése és elrejtése

A Láthatóság tulajdonság vagy Átlátszóság tulajdonság használatával megjeleníthet és elrejthet egy InfoBadge-t felhasználói műveletek, programlogika, számlálók stb. alapján.

A többi felhasználói felülethez hasonlóan a Visibility.Collapsed beállításával az InfoBadge nem foglal helyet az elrendezésben, így más elemek is elmozdulhatnak a megjelenített és rejtett elemek között.

Ha az áthelyezett elemek aggodalomra adnak okot, a Opacity tulajdonsággal megjelenítheti és elrejtheti az InfoBadge-t. Opacity alapértelmezés szerint 1.0; beállíthatja 0 az InfoBadge elrejtéséhez. A Opacity tulajdonság használatakor az InfoBadge akkor is helyet foglal az elrendezésben, ha jelenleg rejtett.

Az InfoBadge stílus módosítása

Az InfoBadge-ban megjelenített ikont vagy számot a megjelenítés közben módosíthatja. A numerikus InfoBadge felhasználói műveleten alapuló csökkentése vagy növelése a InfoBadge.Valueértékének módosításával érhető el. Az InfoBadge ikonjának megváltoztatása úgy valósítható meg, hogy a InfoBadge.IconSource új IconSource objektumra van beállítva. Az ikonok módosításakor győződjön meg arról, hogy az új ikon mérete megegyezik a régi ikon méretével, így elkerülheti a zsúfokozó vizuális effektusokat.

Alapértelmezett viselkedés

Ha sem InfoBadge.Value, sem InfoBadge.IconSource nincs beállítva, az InfoBadge alapértelmezés szerint egy pont megjelenítésére van beállítva (különösen akkor, ha Value-1 van beállítva, és IconSourcenullértékre van állítva, amelyek az alapértelmezett értékek). Ha a Value és a IconSource tulajdonság is be van állítva, az InfoBadge tiszteletben tartja a Value tulajdonságot, és számértéket jelenít meg.

Az InfoBadge típusát is módosíthatja, amíg az megjelenik. Az InfoBadge típusának módosításához győződjön meg arról, hogy az aktuális típus megfelelő tulajdonsága (Value vagy IconSource) az alapértelmezett értékre van állítva (-1 vagy null), és állítsa be az új típus tulajdonságát egy megfelelő értékkel. Ha az InfoBadge típusát számról vagy ikonról InfoBadge pont típusúra szeretné módosítani, győződjön meg arról, hogy InfoBadge.Value-1 és InfoBadge.IconSourcenullértékre van állítva.

Az InfoBadge elhelyezésétől függően vegye figyelembe, hogy ez az elemek eltolódását okozhatja, mivel az InfoBadge mérete és alakja megváltozhat.

Kapcsolódó cikkek

• Navigációs nézet