Információs sáv

Az InfoBar vezérlő alkalmazásszintű állapotüzeneteket jelenít meg felhasználóknak, amelyek jól láthatóak, de nem tolakodóak. Vannak beépített súlyossági szintek, amelyek könnyen jelzik a megjelenő üzenet típusát, valamint azt a lehetőséget, hogy a saját hívási művelet vagy hivatkozás gomb is szerepeljen. Mivel az InfoBar más felhasználói felületi tartalommal is beágyazott, a beállítás lehetővé válik, hogy a vezérlő mindig látható legyen, vagy a felhasználó elutasítsa azt.

Ez a megfelelő vezérlő?

InfoBar-vezérlőt használjon, amikor a felhasználónak tájékoztatnia kell, nyugtázza vagy meg kell tennie a műveletet egy módosított alkalmazásállapoton. Alapértelmezés szerint az értesítés a tartalomterületen marad, amíg a felhasználó be nem zárja, de nem feltétlenül szakítja meg a felhasználói folyamatot.

Az infobarok helyet foglalnak az elrendezésben, és ugyanúgy viselkednek, mint bármely más gyermekelem. Nem fedi le a többi tartalmat, és nem lebeg a tetején.

Ne használjon InfoBar-vezérlőt olyan felhasználói művelet megerősítéséhez vagy közvetlen megválaszolásához, amely nem módosítja az alkalmazás állapotát, az időérzékeny riasztások vagy a nem alapvető üzenetek esetében.

Megjegyzések

Használjon olyan InfoBart, amelyet a felhasználó bezár, vagy amikor az állapot meg van oldva olyan forgatókönyvek esetében, amelyek közvetlenül hatással vannak az alkalmazás észlelésére vagy élményére.

Íme néhány példa:

• Megszakadt az internetkapcsolat
• Hiba a dokumentum automatikus aktiváláskor történő mentésekor, nem adott felhasználói művelethez kapcsolódóan
• Nincs mikrofon csatlakoztatva a rögzítési kísérlethez
• Az alkalmazás előfizetése lejárt

Használjon olyan infobart, amelyet a felhasználó bezárt olyan forgatókönyvek esetén, amelyek közvetetten hatással vannak az alkalmazások észlelésére vagy élményére

Íme néhány példa:

• A hívás rögzítése megkezdődött.
• A "Kibocsátási megjegyzések" hivatkozással alkalmazott frissítés
• A szolgáltatási feltételek frissültek, és nyugtázást igényelnek
• Az alkalmazásszintű biztonsági mentés sikeresen befejeződött, aszinkron módon befejezve
• Az alkalmazás előfizetése közel jár le

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

Vannak olyan helyzetek, amikor a ContentDialog, Felugró panelvagy Súgótipp használata célszerűbb lehet.

• Az olyan helyzetekben, ahol nincs szükség állandó értesítésre, például információk megjelenítése egy adott felhasználói felületi elem kontextusában, jobb megoldás egy felugró panel.
• Azokban az esetekben, amikor az alkalmazás megerősíti a felhasználói műveletet, és megjeleníti azokat az információkat, amelyekből a felhasználónak olvasnia kell , használjon egy ContentDialogot.
  • Továbbá, ha az alkalmazás állapotváltozása olyan súlyos, hogy a felhasználónak minden további képességet le kell tiltania az alkalmazással való interakcióra, használjon contentDialogot.
• Azokban az esetekben, amikor az értesítés átmeneti tanítási pillanat, a Tanítási tipp jobb megoldás.

A megfelelő értesítési vezérlő kiválasztásáról további információt a Párbeszédpanelek és a Szórólapok című cikkben talál.

Recommendations

A használhatóság megadása és kilépés

Villogó tartalom

Az információs sáv nem jelenhet meg, és nem tűnik el gyorsan a nézetből, hogy ne villogjon a képernyőn. Kerülje a villogó vizualizációkat a fényérzékenységgel rendelkező felhasználók számára, és javítsa az alkalmazás használhatóságát.

Az alkalmazásállapot-feltételen keresztül automatikusan be- és kilépő InfoBarok esetében azt javasoljuk, hogy az alkalmazásban használjon logikát annak érdekében, hogy a tartalom ne jelenjen meg vagy tűnjön el gyorsan vagy többször egymás után. Általában azonban ezt a vezérlőt kell használni a hosszú élettartamú állapotüzenetekhez.

Az információs sáv frissítése

Ha a vezérlő meg van nyitva, a különböző tulajdonságok, például az üzenet frissítése vagy a súlyosság módosítása nem okoz értesítési eseményt. Ha tájékoztatni szeretné a képernyőolvasót használó felhasználókat az InfoBar frissített tartalmáról, javasoljuk, hogy zárja be és nyissa meg újra a vezérlőt az esemény aktiválásához.

Beágyazott üzenetek tartalomeltolása

Az egyéb felhasználói felületi tartalommal beágyazott InfoBarok esetében ne feledje, hogy a lap többi része hogyan reagál az elem hozzáadására.

A jelentős magasságú infobarok jelentősen megváltoztathatják az oldal többi elemének elrendezését. Ha az InfoBar gyorsan megjelenik vagy eltűnik, különösen egymás után, előfordulhat, hogy a felhasználó összekeveredik a változó vizualizációs állapottal.

Szín és ikon

Ha az előre beállított súlyossági szinteken kívülre szabja a színt és az ikont, tartsa szem előtt a felhasználói elvárásokat a szabványos ikonok és színek készletéből származó konnotációkkal kapcsolatban.

Emellett az előre beállított súlyossági színek már a témamódosításokhoz, a kontrasztos módhoz, a színösszeállítás akadálymentességéhez és az előtérszínekkel való kontraszthoz lettek kialakítva. Javasoljuk, hogy ha lehetséges, használja ezeket a színeket, és az egyéni logikát is vegye fel az alkalmazásba, hogy alkalmazkodjon a különböző színállapotokhoz és kisegítő lehetőségekhez.

Tekintse meg a standard ikonok és színek UX-útmutatóját, hogy az üzenet egyértelműen és hozzáférhető legyen a felhasználók számára.

Súlyosság

Ne állítsa be a Súlyosság tulajdonságot olyan értesítéshez, amely nem felel meg a Cím, üzenet vagy egyéni tartalomban közölt információknak.

A kísérő információknak a következők közlésére kell irányulnia a súlyosság használatához.

• Hiba: Hiba vagy probléma történt.
• Figyelmeztetés: Olyan feltétel, amely a jövőben problémát okozhat.
• Sikeres: Egy hosszú ideig futó és/vagy háttérfeladat befejeződött.
• Alapértelmezett: Általános információk, amelyek a felhasználó figyelmét igénylik.

Az ikonok és a színek nem lehetnek az egyetlen felhasználói felületi összetevő, amely az értesítés jelentését jelzi. Az információk megjelenítéséhez szerepelnie kell az értesítés címében és/vagy üzenetében szereplő szövegnek.

Message

Az értesítésben szereplő szöveg nem lesz állandó hosszúságú minden nyelven. A Cím és üzenet tulajdonság esetében ez hatással lehet arra, hogy az értesítés egy második sorra bővül-e. Javasoljuk, hogy kerülje az üzenethossz vagy az adott nyelvre beállított egyéb felhasználói felületi elemek alapján történő elhelyezést.

Az értesítés a szabványos tükrözési viselkedést követi, amikor jobbról balra (RTL) vagy balról jobbra (LTR) íródó nyelvekre lokalizálják vagy fordítják. Az ikon csak akkor fog tükröződni, ha van irányítottság.

A szöveg honosításával kapcsolatos további információkért tekintse meg az Elrendezés és betűtípusok módosítása, valamint az RTL- támogatásával kapcsolatos útmutatást.

InfoBar létrehozása

• Fontos API-k:InfoBar osztály

Nyissa meg a WinUI 3 Katalógus alkalmazást, és tekintse meg működés közben az Információs sávot

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.

Az alábbi XAML egy beágyazott információs sávot ír le, amely egy tájékoztató értesítés alapértelmezett stílusával rendelkezik. Az információs sávok bármely más elemhez hasonlóan elhelyezhetők, és követik az alapelrendezés viselkedését. Egy függőleges StackPanelben például az Információs sáv vízszintesen ki lesz bontva, hogy kitöltse a rendelkezésre álló szélességet.

Alapértelmezés szerint az információs sáv nem lesz látható. Az InfoBar megjelenítéséhez állítsa az IsOpen tulajdonságot igaz értékre az XAML-ben vagy a mögötte lévő kódban.

<InfoBar x:Name="UpdateAvailableNotification"
    Title="Update available."
    Message="Restart the application to apply the latest update.">
</InfoBar>

public MainPage()
{
    this.InitializeComponent();

    if(IsUpdateAvailable())
    {
        UpdateAvailableNotification.IsOpen = true;
    }
}

Előre definiált súlyossági szintek használata

Az információs sáv típusa a Súlyosság tulajdonságon keresztül beállítható úgy, hogy automatikusan konzisztens állapotszínt, ikont és kisegítő technológiai beállításokat állítson be az értesítés kritikusságától függően. Ha nincs beállítva súlyosság, a rendszer az alapértelmezett információs stílust alkalmazza.

<InfoBar x:Name="SubscriptionExpiringNotification"
    Severity="Warning"
    Title="Your subscription is expiring in 3 days."
    Message="Renew your subscription to keep all functionality" />

Programozott bezárás az InfoBarban

Az InfoBart a felhasználó bezárhatja a bezárás gombbal vagy programozott módon. Ha az értesítésnek az állapot feloldásáig láthatónak kell lennie, és el szeretné távolítani az információs sáv bezárásának lehetőségét, akkor az IsClosable tulajdonságot hamis értékre állíthatja.

Ennek a tulajdonságnak az alapértelmezett értéke igaz, ebben az esetben a bezárás gomb jelen van, és "X" alakban jelenik meg.

<InfoBar x:Name="NoInternetNotification"
    Severity="Error"
    Title="No Internet"
    Message="Reconnect to continue working."
    IsClosable="False" />

Testreszabás: Háttérszín és ikon

Az előre definiált súlyossági szinteken kívül a Háttér és az IconSource tulajdonságok beállíthatók az ikon és a háttérszín testreszabásához. Az InfoBar megőrzi a megadott súlyosság kisegítő technológiai beállításait, vagy ha nincs definiálva, akkor az alapértelmezett beállítást.

Az egyéni háttérszínek a standard Háttér tulajdonságon keresztül állíthatók be, és felülbírálják a súlyosság szerint beállított színt. A saját színének beállításakor tartsa szem előtt a tartalom olvashatóságát és akadálymentességét.

Az egyéni ikonok az IconSource tulajdonságon keresztül állíthatók be. Alapértelmezés szerint megjelenik egy ikon (feltéve, hogy a vezérlő nincs összecsukva). Ez az ikon az IsIconVisible tulajdonság hamis értékre állításával távolítható el. Egyéni ikonok esetén az ajánlott ikonméret 20px.

<InfoBar x:Name="CallRecordingNotification"
    Title="Recording started"
    Message="Your call has begun recording."
    Background="{StaticResource LavenderBackgroundBrush}">
    <InfoBar.IconSource>
        <SymbolIconSource Symbol="Phone" />
    </InfoBar.IconSource>
</InfoBar>

Akciógomb hozzáadása

További műveletgombok hozzáadásához meg kell adni a saját gombot, amely örökli ButtonBase, és beállítja azt az ActionButton tulajdonságban. Egyéni stílus lesz alkalmazva a típusú műveletgombokra és a Hiperhivatkozás gombra a és konzisztencia és akadálymentesség érdekében. Az ActionButton tulajdonságon kívül további akciógombok is hozzáadhatók egyéni tartalommal, és az üzenet alatt jelennek meg.

<InfoBar x:Name="NoInternetNotification"
    Severity="Error"
    Title="No Internet"
    Message="Reconnect to continue working.">
    <InfoBar.ActionButton>
        <Button Content="Network Settings" Click="InternetInfoBarButton_Click" />
    </InfoBar.ActionButton>
</InfoBar>

<InfoBar x:Name="TermsAndConditionsUpdatedNotification"
    Title="Terms and Conditions Updated"
    Message="Dismissal of this message implies agreement to the updated Terms and Conditions. Please view the changes on our website.">
    <InfoBar.ActionButton>
        <HyperlinkButton Content="Terms and Conditions Sep 2020"
            NavigateUri="https://www.example.com"
            Click="UpdateInfoBarHyperlinkButton_Click" />
    </InfoBar.ActionButton>
</InfoBar>

Jobbra igazított művelet gomb

Alapértelmezés szerint a művelet gomb balra van igazítva a rendelkezésre álló területen, közvetlenül az üzenet jobb oldalán. Ha szeretné, beállíthatja a HorizontalAlignment beállítást "jobbra" a gombban, hogy a gomb közvetlenül a bezárás gombtól balra legyen az egysoros, vízszintes elrendezésben.

<InfoBar x:Name="RightAlignedButtonNotification"
    Title="Title"
    Message="Essential app message">
    <InfoBar.ActionButton>
        <Button Content="Hello" HorizontalAlignment="Right"/>
    </InfoBar.ActionButton>
</InfoBar>

Tartalomburkolás

Ha az információs sáv tartalma – az egyéni tartalom kivételével – nem fér el egyetlen vízszintes vonalon, függőlegesen lesznek elhelyezve. A Cím, az Üzenet és az ActionButton – ha van – külön sorokban jelenik meg.

<InfoBar x:Name="BackupCompleteNotification"
    Severity="Success"
    Title="Backup complete: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
    Message="All documents were uploaded successfully. Ultrices sagittis orci a scelerisque. Aliquet risus feugiat in ante metus dictum at tempor commodo. Auctor augue mauris augue neque gravida.">
    <InfoBar.ActionButton>
        <Button Content="Action"
            Click="BackupInfoBarButton_Click" />
    </InfoBar.ActionButton>
</InfoBar>

Egyéni tartalom

Az XAML-tartalom a Content tulajdonság használatával adható hozzá az InfoBarhoz. A vezérlő tartalma alatt külön sorban jelenik meg. Az információs sáv a megadott tartalomhoz igazodva bővül.

<InfoBar x:Name="BackupInProgressNotification"
    Title="Backup in progress"
    Message="Your documents are being saved to the cloud"
    IsClosable="False">
    <InfoBar.Content>
        <ProgressBar IsIndeterminate="True" Margin="0,0,0,6" MaxWidth="200"/>
    </InfoBar.Content>
</InfoBar>

Könnyű stílus

Az alapértelmezett Stílus és ControlTemplate módosításával egyedi megjelenést adhat a vezérlőnek. Az elérhető témaerőforrások listáját az InfoBar API-dokumentumok Vezérlőstílus és sablon szakaszában találja.

További információkért tekintse meg a Stílusvezérlők cikk Könnyű súlyú stílus című szakaszát.

Az alábbiakban például a lap összes információs információs sávjának háttérszíne kék lesz:

<Page.Resources>
    <x:SolidColorBrush x:Key="InfoBarInformationalSeverityBackgroundBrush" Color="LightBlue"></x:SolidColorBrush>
</Page.Resources>

Bezárás megszakítása

A záró esemény az InfoBar bezárásának megszakítására és/vagy elhalasztására használható. Ezzel megnyithatja az InfoBart, vagy időt hagyhat egy egyéni művelet végrehajtására. Ha az InfoBar bezárása megszakad, az IsOpen visszaáll igaz értékre. Programozott bezárás is megszakítható.

<InfoBar x:Name="UpdateAvailable"
    Title="Update Available"
    Message="Please close this tip to apply required security updates to this application"
    Closing="InfoBar_Closing">
</InfoBar>

public void InfoBar_Closing(InfoBar sender, InfoBarClosingEventArgs args)
{
    if (args.Reason == InfoBarCloseReason.CloseButton) 
    {
        if (!ApplyUpdates()) 
        {
            // could not apply updates - do not close
            args.Cancel = true;
        }
    }
}

Kapcsolódó cikkek

• párbeszédpanelek és felugró ablakok