Pasek informacji

Kontrolka InfoBar służy do wyświetlania użytkownikom komunikatów o stanie dla całej aplikacji, które są wysoce widoczne, ale nieinwazyjne. Istnieją wbudowane poziomy ważności, aby łatwo wskazać typ wyświetlanego komunikatu, a także opcję dołączenia własnego wywołania do akcji lub przycisku hiperłącza. Ponieważ pasek informacji jest zintegrowany z inną zawartością interfejsu użytkownika, dostępna jest opcja, aby kontrolka zawsze była widoczna lub ukryta przez użytkownika.

Czy jest to właściwa kontrola?

Użyj kontrolki InfoBar, gdy użytkownik powinien zostać poinformowany, potwierdzić lub podjąć działania w zmienionym stanie aplikacji. Domyślnie powiadomienie pozostanie w obszarze zawartości do momentu zamknięcia przez użytkownika, ale niekoniecznie spowoduje przerwanie przepływu użytkownika.

Pasek informacji będzie zajmować miejsce w układzie i zachowywać się jak wszystkie inne elementy podrzędne. Nie będzie zasłaniać innych treści ani unosić się nad nimi.

Nie używaj kontrolki InfoBar, aby potwierdzić lub odpowiedzieć bezpośrednio na akcję użytkownika, która nie zmienia stanu aplikacji, w przypadku alertów z uwzględnieniem czasu lub w przypadku komunikatów nieistotnych.

Uwagi

Użyj paska informacji, który jest zamykany przez użytkownika lub gdy stan jest rozwiązany w scenariuszach, które bezpośrednio wpływają na postrzeganie lub doświadczenie aplikacji.

Oto kilka przykładów:

• Utracono łączność z Internetem
• Błąd podczas zapisywania dokumentu przy automatycznym wyzwoleniu, niewynikający z konkretnego działania użytkownika
• Brak podłączonego mikrofonu podczas próby nagrywania.
• Subskrypcja aplikacji wygasła

Użyj paska informacji zamkniętego przez użytkownika w scenariuszach, które pośrednio wpływać na postrzeganie aplikacji lub środowisko

Oto kilka przykładów:

• Rozpoczęto nagrywanie połączenia
• Aktualizacja zastosowana za pomocą linku do informacji o wersji
• Warunki świadczenia usługi zostały zaktualizowane i wymagają potwierdzenia
• Kopia zapasowa dla całej aplikacji została pomyślnie ukończona asynchronicznie.
• Subskrypcja aplikacji jest bliska wygaśnięcia

Kiedy należy użyć innej kontrolki?

Istnieją pewne scenariusze, w których ContentDialog, Flyoutlub TeachingTip może być bardziej właściwe do użycia.

• W przypadku scenariuszy, w których trwałe powiadomienie nie jest potrzebne, np. wyświetlanie informacji w kontekście określonego elementu interfejsu użytkownika, menu wysuwane jest lepszym rozwiązaniem.
• W przypadku scenariuszy, w których aplikacja potwierdza akcję użytkownika, pokazując informacje, które użytkownik musi odczytywać, należy użyć ContentDialog.
  • Ponadto, jeśli zmiana stanu aplikacji jest tak poważna, że musi zablokować wszystkie dalsze możliwości interakcji użytkownika z aplikacją, użyj elementu ContentDialog.
• W scenariuszach, w których powiadomienie jest przejściowym momentem nauczania, TeachingTip jest lepszym rozwiązaniem.

Aby uzyskać więcej informacji na temat wybierania właściwego elementu sterującego powiadomieniami, zobacz artykuł Dialogi i elementy wysuwane.

Rekomendacje

Rozpoczynanie i kończenie użyteczności

Migająca zawartość

Pasek informacji nie powinien pojawiać się i znikać szybko, aby zapobiec migotaniu na ekranie. Unikaj migających obrazów dla osób z nadwrażliwością na światło oraz w celu poprawy użyteczności aplikacji.

W przypadku pasków informacji, które automatycznie wprowadzają i zamykają widok za pośrednictwem warunku stanu aplikacji, zalecamy uwzględnienie logiki w aplikacji, aby zapobiec pojawianiu się lub znikaniu zawartości szybko lub wielokrotnie z rzędu. Jednak ogólnie rzecz biorąc, ta kontrolka powinna być używana dla długotrwałych komunikatów o stanie.

Aktualizowanie paska informacji

Po otwarciu kontrolki wszelkie zmiany wprowadzone w różnych właściwościach, takie jak aktualizowanie komunikatu lub ważność, nie będą zgłaszać zdarzenia powiadomienia. Jeśli chcesz poinformować użytkowników, którzy korzystają z czytników ekranu, o zaktualizowanej zawartości InfoBaru, zalecamy zamknięcie i ponowne otwarcie kontrolki, aby uruchomić zdarzenie.

Komunikaty wbudowane dekompensujące zawartość

W przypadku pasków informacji wbudowanych z inną zawartością interfejsu użytkownika należy pamiętać, jak reszta strony będzie reagować na dodanie elementu.

Paski informacji o znacznej wysokości mogą znacząco zmienić układ innych elementów na stronie. Jeśli pasek informacji pojawia się lub znika szybko, szczególnie jeden po drugim, użytkownik może być zdezorientowany zmieniającym się stanem wizualnym.

Kolor i ikona

Podczas dostosowywania koloru i ikony poza wstępnie ustawionymi poziomami ważności należy pamiętać o oczekiwaniach użytkowników dotyczących konotacji z zestawu standardowych ikon i kolorów.

Ponadto wstępnie ustawione kolory poziomu ważności zostały już zaprojektowane pod kątem zmian motywu, trybu dużego kontrastu, ułatwień dostępu dla osób z zaburzeniami rozpoznawania kolorów oraz kontrastu z kolorami tła. Zalecamy używanie tych kolorów w miarę możliwości i dołączania logiki niestandardowej do aplikacji w celu dostosowania ich do różnych stanów kolorów i funkcji ułatwień dostępu.

Zapoznaj się z wytycznymi dotyczącymi UX dla ikon standardowych i koloru , aby upewnić się, że Twoja wiadomość jest jasna i dostępna dla użytkowników.

Severity

Unikaj ustawiania właściwości Ważność dla powiadomienia, które nie jest zgodne z informacjami podanymi w tytule, wiadomości lub zawartości niestandardowej.

Towarzyszące informacje powinny mieć na celu przekazanie następujących kwestii, aby używać tej surowości.

• Błąd: wystąpił błąd lub problem.
• Ostrzeżenie: Warunek, który może spowodować problem w przyszłości.
• Sukces: Zadanie długotrwałe i/lub w tle zostało zakończone.
• Ustawienie domyślne: Ogólne informacje, które wymagają uwagi użytkownika.

Ikony i kolor nie powinny być jedynymi składnikami interfejsu użytkownika oznaczającymi znaczenie powiadomienia. Tekst w tytule i/lub wiadomości powiadomienia powinien zostać dołączony do wyświetlania informacji.

Message

Tekst w powiadomieniu nie będzie stałą długością we wszystkich językach. W przypadku właściwości Tytuł i Komunikat może to mieć wpływ na to, czy powiadomienie zostanie rozwinięte do drugiego wiersza. Zalecamy unikanie pozycjonowania na podstawie długości komunikatu lub innych elementów interfejsu użytkownika ustawionych na określony język.

Powiadomienie będzie zgodne ze standardowym zachowaniem lustrzanego odbicia w przypadku lokalizacji na/z języków, które są od prawej do lewej (RTL) lub od lewej do prawej (LTR). Ikona będzie odzwierciedlana tylko wtedy, gdy istnieje kierunkowość.

Aby uzyskać więcej informacji na temat lokalizacji tekstu w powiadomieniu, zapoznaj się ze wskazówkami dotyczącymi dostosowywania układu i czcionek oraz obsługi biblioteki RTL.

Tworzenie paska informacji

• Ważne interfejsy API:Klasa InfoBar

Otwórz aplikację Galerii WinUI 3 i zobacz pasek informacji 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

Poniższy kod XAML opisuje wbudowany pasek informacji z domyślnym stylem powiadomienia informacyjnego. Pasek informacyjny można umieścić jak każdy inny element i będzie postępować zgodnie z zachowaniem układu podstawowego. Na przykład w pionowym StackPanelu, InfoBar będzie rozszerzał się poziomo, aby wypełnić dostępną szerokość.

Domyślnie pasek informacji nie będzie widoczny. Aby wyświetlić InfoBar, ustaw właściwość IsOpen na true w kodzie XAML lub w kodzie zaplecza.

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

Używanie z góry określonych poziomów surowości

Typ paska informacyjnego można skonfigurować za pomocą właściwości Ważność, aby automatycznie ustawić spójny kolor stanu, ikonę oraz dostosować ustawienia technologii pomocniczej zależnie od krytyczności powiadomienia. Jeśli nie ustawiono ważności, zostanie zastosowany domyślny styl informacyjny.

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

Programowe zamykanie w InfoBarze

Pasek informacyjny można zamknąć przez użytkownika za pomocą przycisku zamknij lub programowo. Jeśli powiadomienie jest wymagane do wyświetlenia, dopóki stan nie zostanie rozpoznany i chcesz usunąć możliwość zamknięcia paska informacji przez użytkownika, możesz ustawić właściwość IsClosable na false.

Wartość domyślna tej właściwości ma wartość true, w takim przypadku przycisk zamknięcia jest obecny i przyjmuje formę "X".

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

Dostosowywanie: kolor tła i ikona

Poza wstępnie zdefiniowanymi poziomami ważności można ustawić właściwości Background i IconSource, aby dostosować ikonę i kolor tła. Pasek informacyjny zachowa ustawienia technologii asystującej o określonej wadze, lub domyślne, jeśli żadna nie została zdefiniowana.

Niestandardowy kolor tła można ustawić za pomocą standardowej właściwości Background i zastąpi kolor ustawiony przez Ważność. Pamiętaj o czytelności zawartości i ułatwieniach dostępu podczas ustawiania własnego koloru.

Ikonę niestandardową można ustawić za pomocą właściwości IconSource. Domyślnie ikona będzie widoczna (przy założeniu, że kontrolka nie jest zwinięta). Tę ikonę można usunąć, ustawiając właściwość IsIconVisible na false. W przypadku ikon niestandardowych zalecany rozmiar ikony to 20 pikseli.

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

Dodaj przycisk akcji

Można dodać dodatkowy przycisk akcji, definiując własny przycisk, który dziedziczy ButtonBase i ustawiając go we właściwości ActionButton. Niestandardowe style zostaną zastosowane do przycisków akcji typu Button i HyperlinkButton w celu zapewnienia spójności i ułatwień dostępu. Oprócz właściwości ActionButton, dodatkowe przyciski akcji można dodać za pomocą niestandardowej zawartości i pojawią się one poniżej komunikatu.

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

Przycisk akcji wyrównany do prawej

Domyślnie przycisk akcji jest wyrównywany do lewej krawędzi dostępnej przestrzeni tuż po prawej stronie komunikatu. Opcjonalnie możesz ustawić właściwość HorizontalAlignment na "right" w przycisku, aby wyrównać ten przycisk bezpośrednio po lewej stronie przycisku zamknięcia, w układzie jednoliniowym, poziomym.

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

Zawijanie zawartości

Jeśli zawartość paska informacji, z wyłączeniem zawartości niestandardowej, nie jest w stanie zmieścić się w jednym poziomie, zostaną one ułożone w pionie. Elementy Title, Message i ActionButton — jeśli są obecne — będą wyświetlane w osobnych wierszach.

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

Zawartość niestandardowa

Zawartość XAML można dodać do paska informacji przy użyciu właściwości Content. Zostanie ona wyświetlona we własnym wierszu poniżej pozostałej części zawartości kontrolki. Pasek informacji zostanie rozbudowany w celu dopasowania do zdefiniowanej zawartości.

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

Lekka stylizacja

Możesz zmodyfikować domyślny styl i kontrolkęTemplate, aby nadać kontrolce unikatowy wygląd. Zobacz sekcję Styl i szablon sterowania w dokumentacji API InfoBar, aby uzyskać listę dostępnych zasobów motywu.

Aby uzyskać więcej informacji, zobacz sekcję Lekkie stylizacje z artykułu Sterowanie stylizacją.

Na przykład następujące elementy powodują, że kolor tła dla wszystkich informacyjnych pasków informacji na stronie ma kolor niebieski:

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

Anulowanie zamknięcia

Zdarzenie zamykające może służyć do anulowania i/lub odroczenia zamknięcia paska informacji. Może to służyć do utrzymywania otwartego paska informacyjnego lub przeznaczenia czasu na wykonanie akcji niestandardowej. Po anulowaniu zamknięcia paska informacji Funkcja IsOpen powróci do wartości true. Zamknięcie programowe można również anulować.

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

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.

Pasek informacji dla aplikacji 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 .

• WinUI 2 interfejsy API : klasa InfoBar
• Otwórz aplikację Galerii WinUI 2 i zobacz Pasek informacji 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:InfoBar />

Powiązane artykuły

• okna dialogowe i okna wysuwane