Informační panel

Ovládací prvek panel informací slouží k zobrazení stavových zpráv pro celou aplikaci uživatelům, které jsou velmi viditelné, ale nikoli rušivé. K dispozici jsou předdefinované úrovně závažnosti, které umožňují snadno označit typ zobrazené zprávy a také možnost zahrnout vlastní volání akce nebo tlačítko hypertextového odkazu. Vzhledem k tomu, že informační panel je vložený s jiným obsahem uživatelského rozhraní, je zde možnost, aby ovládací prvek byl vždy viditelný nebo zavřen uživatelem.

Je to správná kontrola?

Ovládací prvek Informační panel použijte, když by měl být uživatel informován, potvrdit nebo provést akci se změněným stavem aplikace. Ve výchozím nastavení oznámení zůstane v oblasti obsahu, dokud jej uživatel nezavře, ale nemusí nutně přerušit činnost uživatele.

Informační panel zabírá místo ve vašem rozložení a funguje stejně jako všechny ostatní podřízené prvky. Nezakryje jiný obsah ani se nad ním nevrchuje.

Ovládací prvek Informační panel nepoužívejte k potvrzení nebo reagování přímo na akci uživatele, která nemění stav aplikace, pro upozornění citlivá na čas nebo na zprávy, které nejsou nezbytné.

Poznámky

Použijte informační panel, který je zavřený uživatelem nebo když se stav vyřeší ve scénářích, které přímo ovlivňují vnímání nebo zkušenosti aplikace.

Tady je několik příkladů:

• Připojení k internetu se ztratilo
• Chyba při ukládání dokumentu při automatické aktivaci, nesouvisí s konkrétní akcí uživatele
• Při pokusu o záznam není připojen žádný mikrofon.
• Platnost předplatného aplikace vypršela.

Použití informačního panelu uzavřeného uživatelem pro scénáře , které nepřímo ovlivňují vnímání nebo prostředí aplikace

Tady je několik příkladů:

• Začalo se nahrávat volání.
• Aktualizace byla použita s odkazem na poznámky k vydání
• Podmínky služby byly aktualizovány a vyžadují potvrzení.
• Zálohování pro celou aplikaci bylo úspěšně asynchronně dokončeno.
• Předplatné aplikace se blíží vypršení platnosti.

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

Existuje několik scénářů, ve kterých může být vhodnější použít ContentDialog, Informační nabídka nebo Výukový tip .

• V situacích, kdy není potřeba trvalé oznámení, například zobrazení informací v kontextu konkrétního prvku uživatelského rozhraní, je lepší volbou informační panel .
• Ve scénářích, ve kterých aplikace potvrzuje akci uživatele, se zobrazenými informacemi, které musí uživatel přečíst, použijte ContentDialog.
  • Pokud je navíc změna stavu aplikace tak závažná, že musí zablokovat veškerou další schopnost uživatele pracovat s aplikací, použijte ContentDialog.
• Pro scénáře, ve kterých je oznámení přechodným výukovým okamžikem, je lepší volbou TeachingTip.

Další informace o výběru správného ovládacího prvku oznámení najdete v článku Dialogy a informační panely .

Recommendations

Vstoupit a opustit použitelnost

Blikající obsah

Informační panel by se neměl zobrazovat a rychle zmizet, aby se zabránilo blikání na obrazovce. Vyhněte se blikajícím vizuálům pro lidi s citlivostí na světlo a pro zlepšení použitelnosti vaší aplikace.

V případě informačních panelů, které automaticky zadávají a ukončují zobrazení pomocí podmínky stavu aplikace, doporučujeme do aplikace zahrnout logiku, která brání tomu, aby se obsah zobrazoval nebo zmizoval rychle nebo několikrát za sebou. Obecně by se ale tento ovládací prvek měl používat pro dlouhodobé stavové zprávy.

Aktualizace informačního panelu

Jakmile je ovládací prvek otevřený, všechny změny provedené v různých vlastnostech, jako je aktualizace zprávy nebo závažnosti, nevyvolají událost oznámení. Pokud chcete informovat uživatele, kteří používají čtečky obrazovky o aktualizovaném obsahu informačního panelu, doporučujeme zavřít a znovu otevřít ovládací prvek pro aktivaci události.

Vložené zprávy vynulující obsah

U informačních panelů, které jsou vložené s jiným obsahem uživatelského rozhraní, mějte na paměti, jak zbytek stránky bude reagovat na přidání prvku.

Informační panely s podstatnou výškou by mohly výrazně změnit rozložení ostatních prvků na stránce. Pokud se informační panel zobrazí nebo rychle zmizí, zejména v rychlém sledu, může být uživatel zmatený měnícím se vizuálním stavem.

Barva a ikona

Při přizpůsobení barvy a ikony mimo přednastavené úrovně závažnosti mějte na paměti očekávání uživatelů pro konotace ze sady standardních ikon a barev.

Kromě toho byly přednastavené barvy závažnosti již navrženy pro změny motivu, režim vysokého kontrastu, zlepšení přístupnosti pro osoby s poruchami barevného vidění a pro kontrast s barvami popředí. Tyto barvy doporučujeme použít, pokud je to možné, a zahrnout do aplikace vlastní logiku, která se přizpůsobí různým stavům barev a funkcím přístupnosti.

Projděte si pokyny pro uživatelské rozhraní pro standardní ikony a barvu , abyste měli jistotu, že vaše zpráva bude jasně a přístupná uživatelům.

Závažnost

Vyhněte se nastavení vlastnosti Závažnost pro oznámení, které neodpovídá informacím v názvu, zprávě nebo vlastním obsahu.

Doprovodné informace by měly být zaměřeny na sdělení následujících informací týkajících se závažnosti používání.

• Chyba: Došlo k chybě nebo problému.
• Upozornění: Podmínka, která může v budoucnu způsobit problém.
• Úspěch: Dlouhotrvající úloha nebo úloha na pozadí byla dokončena.
• Výchozí: Obecné informace, které vyžadují pozornost uživatele.

Ikony a barva by neměly být jedinými komponentami uživatelského rozhraní, které označují význam pro vaše oznámení. Text v názvu oznámení nebo zprávě by měl být zahrnut, aby se zobrazily informace.

Message

Text v oznámení nebude konstantní délkou ve všech jazycích. U vlastnosti Název a Zpráva to může mít vliv na to, jestli se oznámení rozbalí na druhý řádek. Doporučujeme vyhnout se umístění na základě délky zprávy nebo jiných prvků uživatelského rozhraní nastavených na určitý jazyk.

Oznámení bude dodržovat standardní zrcadlové chování při lokalizaci do/z jazyků, které jsou zprava doleva (RTL) nebo zleva doprava (LTR). Ikona bude zrcadlit pouze v případě, že existuje směrovost.

Další informace o lokalizaci textu v oznámení najdete v pokynech pro úpravy rozložení a písem a podporu RTL .

Vytvoření informačního panelu

• Důležitá rozhraní API:InfoBar třída

Otevřete aplikaci Galerie WinUI 3 a podívejte se na informační panel 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.

Následující kód XAML popisuje vložený informační panel s výchozím stylem informačního oznámení. Informační panel lze umístit stejně jako jakýkoli jiný prvek a bude následovat chování základního rozložení. Například ve svislém panelu StackPanel se InfoBar vodorovně rozšíří, aby vyplnil dostupnou šířku.

Informační panel se ve výchozím nastavení nezobrazí. Nastavte vlastnost IsOpen na true v XAML nebo v kódu, abyste zobrazili InfoBar.

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

Použití předdefinovaných úrovní závažnosti

Typ informačního pruhu lze nastavit pomocí vlastnosti Závažnost, která automaticky nastaví konzistentní barvu stavu, ikonu a nastavení technologie usnadnění, které závisí na závažnosti oznámení. Pokud není nastavena žádná závažnost, použije se výchozí informační styl.

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

Programové uzavření v informačním panelu

Informační panel může uživatel zavřít prostřednictvím tlačítka Zavřít nebo programově. Pokud je oznámení nutné zobrazit, dokud se stav nevyřeší a chcete uživateli odebrat možnost zavřít informační panel, můžete vlastnost IsClosable nastavit na false.

Výchozí hodnota této vlastnosti je true, v takovém případě je tlačítko zavřít přítomno a má formu "X".

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

Přizpůsobení: Barva a ikona pozadí

Mimo předdefinované úrovně závažnosti je možné nastavit vlastnosti Pozadí a IconSource tak, aby přizpůsobily ikonu a barvu pozadí. Informační panel zachová nastavení závažnosti asistivní technologie nebo výchozí, pokud nebyla definována žádná.

Vlastní barvu pozadí lze nastavit pomocí standardní vlastnosti 'Pozadí' a přepíše barvu, která je nastavena podle závažnosti. Při nastavování vlastní barvy mějte na paměti čitelnost obsahu a přístupnost.

Vlastní ikonu lze nastavit pomocí vlastnosti IconSource. Ve výchozím nastavení se zobrazí ikona (za předpokladu, že ovládací prvek není sbalený). Tuto ikonu můžete odebrat nastavením vlastnosti IsIconVisible na false. U vlastních ikon je doporučená velikost ikony 20 pixelů.

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

Tlačítko Přidat akci

Další tlačítko akce lze přidat definováním vlastního tlačítka, které dědí ButtonBase a nastaví ho ve vlastnosti ActionButton. Vlastní styly se použijí u tlačítek akcí typu Button a HyperlinkButton pro konzistenci a přístupnost. Kromě vlastnosti ActionButton lze přidat další akční tlačítka prostřednictvím vlastního obsahu a zobrazí se pod zprávou.

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

Tlačítko akce zarovnané doprava

Ve výchozím nastavení je tlačítko akce zarovnané doleva v dostupném prostoru přímo napravo od zprávy. Volitelně můžete nastavit "HorizontalAlignment" na "right" ve svém tlačítku, abyste toto tlačítko zarovnali tak, aby bylo přímo nalevo od tlačítka zavřít ve vodorovném rozložení na jedné řádce.

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

Obtékání obsahu

Pokud se obsah informačního panelu s výjimkou vlastního obsahu nevejde na jednu vodorovnou čáru, bude rozložen svisle. Nadpis, zpráva a actionButton (pokud je k dispozici) se zobrazí na samostatných řádcích.

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

Vlastní obsah

Obsah XAML lze přidat do informačního panelu pomocí vlastnosti Content. Zobrazí se ve vlastním řádku pod zbytkem obsahu ovládacího prvku. Informační panel se rozbalí tak, aby odpovídal definovanému obsahu.

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

Lehký styl

Výchozí styl a ovládací prvek ControlTemplate můžete upravit tak, aby ovládací prvek získal jedinečný vzhled. Seznam dostupných prostředků motivu najdete v části Styl a šablona ovládacího prvku v dokumentaci k InfoBar API.

Další informace naleznete v části Lehký styl článku Stylingové ovládací prvky.

Například následující způsobí, že barva pozadí všech informačních informačních panelů na stránce bude modrá:

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

Zrušení uzavření

Ke zrušení nebo odložení zavření informačního panelu lze použít závěrečnou událost. Toto lze použít k ponechání informačního panelu otevřeného nebo k poskytnutí času pro provedení vlastní akce. Když se zavření informačního panelu zruší, IsOpen se vrátí na hodnotu true. Programové zavření je také možné zrušit.

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

Související články

• Dialogy a vyskakovací okna