Delen via

Infobalk

Het infobalkbesturingselement is bedoeld voor het weergeven van app-brede statusberichten voor gebruikers die zeer zichtbaar zijn maar niet-intrusief zijn. Er zijn ingebouwde ernstniveaus om eenvoudig aan te geven welk type bericht wordt weergegeven, evenals de optie om uw eigen aanroep naar actie of hyperlinkknop op te nemen. Omdat de Infobalk in lijn is met andere gebruikersinterface-inhoud, kan de optie worden gegeven om het besturingselement altijd zichtbaar te maken of door de gebruiker te laten verdwijnen.

Een voorbeeld van een infobalk met de standaardstatus met een knop Sluiten en een bericht

Is dit de juiste controle?

Gebruik een InfoBalk-besturingselement wanneer een gebruiker op de hoogte moet worden gesteld van, erkent of actie moet ondernemen op een gewijzigde toepassingsstatus. Standaard blijft de melding in het inhoudsgebied staan totdat het door de gebruiker wordt gesloten, maar zal de gebruikersstroom niet noodzakelijkerwijs onderbreken.

Een infobalk neemt ruimte in uw indeling in beslag en gedraagt zich net als andere onderliggende elementen. Het bedekt geen andere inhoud of zweeft er bovenop.

Gebruik geen infobalkbesturingselement om te bevestigen of rechtstreeks te reageren op een gebruikersactie die de status van de app niet wijzigt, voor tijdgevoelige waarschuwingen of voor niet-essentiële berichten.

Opmerkingen

Gebruik een infobalk die door de gebruiker wordt gesloten of wanneer de status wordt opgelost voor scenario's die rechtstreeks invloed hebben op de app-perceptie of -ervaring.

Hier volgen enkele voorbeelden:

  • De internetverbinding is verbroken.
  • Fout bij het opslaan van een document wanneer het automatisch wordt geactiveerd, niet gerelateerd aan specifieke gebruikersactie
  • Er is geen microfoon aangesloten bij het opnemen
  • Het abonnement op de toepassing is verlopen

Gebruik een infobalk die door de gebruiker wordt gesloten voor scenario's die indirect invloed hebben op app-perceptie of -ervaring

Hier volgen enkele voorbeelden:

  • Een oproep is begonnen met opnemen
  • Update toegepast met koppeling naar Opmerkingen bij de release
  • De servicevoorwaarden zijn bijgewerkt en vereisen bevestiging
  • Een back-up voor de hele app is asynchroon succesvol voltooid.
  • Het abonnement op de toepassing verloopt bijna

Wanneer moet een ander besturingselement worden gebruikt?

Er zijn enkele scenario's waarin een ContentDialog-, Flyout-of TeachingTip geschikter kan zijn voor gebruik.

  • Voor scenario's waarbij een permanente melding niet nodig is, bijvoorbeeld het weergeven van informatie in de context van een specifiek UI-element, is een Flyout- een betere optie.
  • Gebruik een ContentDialog-voor scenario's waarin de applicatie een gebruikersactie bevestigt en informatie toont die de gebruiker moet lezen.
    • Gebruik een ContentDialog als een statuswijziging in de app zo ernstig is dat het nodig is om alle verdere mogelijkheden voor de gebruiker om met de app te communiceren te blokkeren.
  • Voor scenario's waarin een melding een tijdelijk lesmoment is, is een TeachingTip een betere optie.

Zie het artikel Dialoogvensters en flyouts voor meer informatie over het kiezen van het juiste meldingsbeheer.

Aanbevelingen

Bruikbaarheid invoeren en afsluiten

Knipperende inhoud

De Infobalk mag niet worden weergegeven en verdwijnt snel uit de weergave om te voorkomen dat het scherm knippert. Vermijd knipperende beelden voor mensen met lichtgevoeligheid en om de bruikbaarheid van uw toepassing te verbeteren.

Voor InfoBars die de weergave automatisch invoeren en afsluiten via een app-statusvoorwaarde, raden we u aan logica op te nemen in uw toepassing om te voorkomen dat inhoud snel of meerdere keren achter elkaar wordt weergegeven of verdwijnt. Over het algemeen moet deze controle echter worden gebruikt voor statusberichten van lange duur.

De infobalk bijwerken

Zodra het controle-element is geopend, zullen wijzigingen in de verschillende eigenschappen, zoals het bijwerken van het bericht of de ernstgraad, geen meldingsgebeurtenis veroorzaken. Als u gebruikers die schermlezers gebruiken wilt informeren over de bijgewerkte inhoud van de InfoBalk, raden we u aan het besturingselement te sluiten en opnieuw te openen om de gebeurtenis te activeren.

Inline berichten die inhoud beinvloeden

Voor InfoBalken die inline zijn met andere gebruikersinterface-inhoud, moet u er rekening mee houden hoe de rest van de pagina responsief reageert op de toevoeging van het element.

InfoBalken met een aanzienlijke hoogte kunnen de indeling van de andere elementen op de pagina aanzienlijk wijzigen. Als de infobalk snel wordt weergegeven of verdwijnt, met name achter elkaar, kan de gebruiker worden verward met de veranderende visuele status.

Kleur en pictogram

Houd bij het aanpassen van de kleur en het pictogram buiten de vooraf ingestelde ernstniveaus rekening met de verwachtingen van gebruikers voor de connotaties uit de set standaardpictogrammen en kleuren.

Daarnaast zijn de vooraf ingestelde ernstkleuren al ontworpen voor themawijzigingen, modus hoog contrast, toegankelijkheid van kleurverwarring en contrast met voorgrondkleuren. We raden u aan deze kleuren indien mogelijk te gebruiken en aangepaste logica in uw toepassing op te nemen om zich aan te passen aan de verschillende kleurstatussen en toegankelijkheidsfuncties.

Bekijk de UX-richtlijnen voor Standaardpictogrammen en Color om ervoor te zorgen dat uw bericht duidelijk en toegankelijk is voor gebruikers.

Ernst

Stel de eigenschap Ernst niet in voor een melding die niet overeenkomt met de informatie die wordt gecommuniceerd in de titel, het bericht of de aangepaste inhoud.

De bijbehorende informatie moet erop gericht zijn het volgende te communiceren om die ernst over te brengen.

  • Fout: er is een fout of probleem opgetreden.
  • Waarschuwing: Een voorwaarde die in de toekomst een probleem kan veroorzaken.
  • Geslaagd: Een langlopende en/of achtergrondtaak is voltooid.
  • Standaard: algemene informatie waarvoor de aandacht van de gebruiker is vereist.

Pictogrammen en kleur mogen niet de enige ui-onderdelen zijn die betekenis geven voor uw melding. Tekst in de titel en/of het bericht van de melding moet worden opgenomen om informatie weer te geven.

Bericht

Tekst in uw melding is niet een constante lengte in alle talen. Voor de eigenschap Titel en Bericht kan dit van invloed zijn op het feit of uw melding wordt uitgebreid naar een tweede regel. We raden u aan om plaatsing te voorkomen op basis van berichtlengte of andere UI-elementen die zijn ingesteld op een specifieke taal.

De melding volgt het standaardspiegelgedrag wanneer deze wordt gelokaliseerd naar of van talen die van rechts naar links (RTL) of van links naar rechts (LTR) zijn. Het pictogram wordt alleen gespiegeld als er sprake is van richting.

Bekijk de richtlijnen voor Indeling en lettertypen aanpassen en ondersteuning voor RTL- voor meer informatie over de lokalisatie van tekst in uw melding.

Een infobalk maken

Open de App WinUI 3 Gallery en zie de Infobalk in actie

De WinUI 3 Gallery app bevat interactieve voorbeelden van de meeste Besturingselementen, functies en functionaliteit van WinUI 3. Download de app uit de Microsoft Store of haal de broncode op GitHub-

In de onderstaande XAML wordt een inline infobalk beschreven met de standaardstijl voor een informatieve melding. Een infobalk kan net als elk ander element worden geplaatst en volgt het gedrag van de basisindeling. In een verticaal StackPanel wordt de infobalk bijvoorbeeld horizontaal uitgebreid om de beschikbare breedte te vullen.

De infobalk is standaard niet zichtbaar. Stel de eigenschap IsOpen in op true in de XAML of code achter om de Infobalk weer te geven.

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

Een voorbeeld van een infobalk met de standaardstatus met een knop Sluiten en een bericht

Vooraf gedefinieerde ernstniveaus gebruiken

Het type infobalk kan via de eigenschap Severity automatisch een consistente statuskleur, een pictogram en ondersteunende technologie-instellingen instellen, afhankelijk van de ernst van de melding. Als er geen ernst is ingesteld, wordt de standaardinformatiestijl toegepast.

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

Een voorbeeld van een infobalk met een waarschuwingsstatus met een knop Sluiten en een bericht

Programmatisch sluiten in de InfoBar

Een infobalk kan door de gebruiker worden gesloten via de knop Sluiten of programmatisch. Als de melding moet worden weergegeven totdat de status is opgelost en u de mogelijkheid voor de gebruiker om de infobalk te sluiten wilt verwijderen, kunt u de eigenschap IsClosable instellen op false.

De standaardwaarde van deze eigenschap is waar, in welk geval de knop Sluiten aanwezig is en de vorm heeft van een X.

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

Een voorbeeld van een infobalk met de status Fout zonder knop Sluiten

Aanpassing: Achtergrondkleur en pictogram

Buiten de vooraf gedefinieerde ernstniveaus kunnen de eigenschappen Achtergrond en IconSource worden ingesteld om het pictogram en de achtergrondkleur aan te passen. De InfoBalk behoudt de instellingen voor ondersteunende technologie van de gedefinieerde ernstinstelling, of standaardinstellingen als er geen ernstinstelling is gedefinieerd.

Een aangepaste achtergrondkleur kan worden ingesteld via de standaardeigenschap Achtergrond en zal de kleur overschrijven die is ingesteld door Severiteit. Houd rekening met de leesbaarheid en toegankelijkheid van inhoud bij het instellen van uw eigen kleur.

U kunt een aangepast pictogram instellen via de eigenschap IconSource. Standaard is er een pictogram zichtbaar (ervan uitgaande dat de controle niet is samengevouwen). Dit pictogram kan worden verwijderd door de eigenschap IsIconVisible in te stellen op false. Voor aangepaste pictogrammen is de aanbevolen pictogramgrootte 20 pixels.

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

Een voorbeeld van een infobalk in de standaardstatus met een aangepaste achtergrondkleur, aangepast pictogram en knop sluiten

Een actieknop toevoegen

U kunt een extra actieknop toevoegen door uw eigen knop te definiëren die ButtonBase over neemt en deze instelt in de eigenschap ActionButton. Aangepaste stijl wordt toegepast op actieknoppen van het type Knop en HyperlinkButton voor consistentie en toegankelijkheid. Naast de eigenschap ActionButton kunnen extra actieknoppen worden toegevoegd via aangepaste inhoud en worden onder het bericht weergegeven.

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

Een voorbeeld van een infobalk in de status Fout, met één regel bericht en een actieknop 

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

Een voorbeeld van een infobalk met een bericht met meerdere regels en een hyperlink

Rechts uitgelijnde actieknop

Standaard wordt de actieknop links uitgelijnd in de beschikbare ruimte direct rechts van het bericht. Desgewenst kunt u HorizontalAlignment instellen op 'rechts' in de knop om deze knop uit te lijnen zodat deze direct links van de knop Sluiten in één regel, horizontaal, indeling wordt uitgelijnd.

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

Een voorbeeld van een infobalk met een rechts uitgelijnde actieknop

Tekstomloop

Als de InfoBalk-inhoud, met uitzondering van aangepaste inhoud, niet op één horizontale lijn past, worden deze verticaal ingedeeld. De titel, het bericht en de ActionButton ( indien aanwezig) worden elk weergegeven op afzonderlijke regels.

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

Een voorbeeld van een InfoBar in de status Geslaagd met een meerrijige titel en bericht

Aangepaste inhoud

XAML-inhoud kan worden toegevoegd aan een infobalk met behulp van de eigenschap Inhoud. Deze wordt weergegeven in een eigen regel onder de rest van de inhoud van het besturingselement. De infobalk wordt uitgebreid zodat deze past bij de gedefinieerde inhoud.

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

Een voorbeeld van een InfoBalk in de standaardstatus met een onbepaalde voortgangsbalk

Lichtgewicht vormgeving

U kunt de standaard Stijl en ControlTemplate wijzigen om het element een uniek uiterlijk te geven. Zie de sectie Besturingselementstijl en sjabloon van de InfoBar-API-documenten voor een lijst met de beschikbare themabronnen.

Voor meer informatie, zie de sectie Lichtgewichtstijl van het artikel Stijlbesturingselementen.

Het volgende zorgt er bijvoorbeeld voor dat de achtergrondkleur voor alle informatiebalken op een pagina blauw is:

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

Beëindigen van sluiten

De afsluitende gebeurtenis kan worden gebruikt om de sluiting van een infobalk te annuleren en/of uit te stellen. Dit kan worden gebruikt om de Infobalk geopend te houden of tijd te bieden voor een aangepaste actie. Wanneer het sluiten van een infobalk wordt geannuleerd, zal IsOpen weer op 'waar' komen te staan. Een programmatische sluiting kan ook worden geannuleerd.

<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 en WinUI 2

Belangrijk

De informatie en voorbeelden in dit artikel zijn geoptimaliseerd voor apps die gebruikmaken van de Windows App SDK en WinUI 3, maar zijn algemeen van toepassing op UWP-apps die gebruikmaken van WinUI 2. Zie de UWP API-referentie voor platformspecifieke informatie en voorbeelden.

Deze sectie bevat informatie die u nodig hebt om het besturingselement te gebruiken in een UWP- of WinUI 2-app.

Voor de InfoBar voor UWP-apps is WinUI 2 vereist. Zie WinUI 2voor meer informatie, inclusief installatie-instructies. API's voor dit besturingselement bevinden zich in de Microsoft.UI.Xaml.Controls naamruimte.

Als u de code in dit artikel wilt gebruiken met WinUI 2, gebruikt u een alias in XAML (we gebruiken muxc) om de API's van de Windows UI-bibliotheek weer te geven die zijn opgenomen in uw project. Zie Aan de slag met WinUI 2 voor meer informatie.

xmlns:muxc="using:Microsoft.UI.Xaml.Controls"

<muxc:InfoBar />