Tabbladnavigatie implementeren met .NET MAUI Shell
Tabnavigatie is een navigatiepatroon waarbij een tabstrook (een rij aanraakbare besturingselementen) permanent boven of onder aan het scherm wordt weergegeven. Tabnavigatie biedt een mechanisme voor een gebruiker om te selecteren tussen pagina's in een app met meerdere pagina's.
In deze les leert u hoe u een app maakt die tabnavigatie implementeert.
Wat is tabnavigatie?
In een app die gebruikmaakt van tabnavigatie, vertegenwoordigt elk tabblad een specifieke sectie of pagina van de app. Gebruikers selecteren tabbladen in de tabstrook om te schakelen tussen inhoud in de toepassing. In de volgende afbeelding ziet u bijvoorbeeld het gebruik van tabnavigatie in de iOS Clock-app. Met de pictogrammen die aan de basis van de pagina zijn gemarkeerd, kunt u schakelen tussen verschillende weergaven. Deze pictogrammen komen overeen met tabbladen en de weergaven zijn pagina's met tabbladen:
Omdat de tabstrook altijd zichtbaar is, kunnen gebruikers met tabnavigatie snel schakelen tussen inhoud in een toepassing. Tabnavigatie is ideaal wanneer een toepassing meerdere secties heeft die een gebruiker waarschijnlijk vaak gebruikt. Kloktoepassingen zijn een uitstekend voorbeeld. De secties klok, alarm en stopwatch worden waarschijnlijk vaak gebruikt.
Op mobiele apparaten heeft de tabstrook doorgaans een beperkte hoeveelheid ruimte en kan alleen een vast aantal tabbladen worden weergegeven, afhankelijk van de grootte en afdrukstand van het apparaat. De aanbeveling is om slechts drie tot vier tabbladen te gebruiken. Als u meer tabbladen opneemt, hebt u niet gegarandeerd voldoende ruimte om alle tabbladen op alle apparaten weer te geven. De besturingssystemen die door .NETLOAD worden ondersteund, maken een overloopgebied mogelijk. Dit gebied biedt meer ruimte voor toegang tot tabbladen die niet op het scherm passen. Voor het navigeren naar deze overlooptabbladen zijn echter extra stappen van de gebruiker vereist. Deze secties zijn minder detecteerbaar.
Als u meer dan vier tabbladen nodig hebt, kunt u overwegen een ander navigatiepatroon te gebruiken, zoals navigatie van flyout-items. Bovendien is tabnavigatie niet de beste optie als uw gegevens een natuurlijke, hoofddetailhiërarchie vormen. In dergelijke gevallen moet u overwegen om stacknavigatie te overwegen.
Tabnavigatie in een .NET MAUI-app
U gebruikt het TabBar object om tabnavigatie te implementeren in een .NET MAUI Shell-app. Het TabBar object geeft een set tabbladen weer en schakelt automatisch de weergegeven inhoud wanneer de gebruiker een tabblad selecteert. In de volgende afbeelding ziet u de gebieden van de gebruikersinterface.
Als u tabs wilt gebruiken in een .NET MAUI Shell-toepassing, maakt u een exemplaar van de TabBar klasse als onderliggend element van de Shell klasse. Voeg vervolgens objecten toe Tab aan de TabBar. Binnen het Tab object moet een ShellContent object worden ingesteld op een ContentPage object.
Een TabbedPage maken
U kunt een TabBar exemplaar maken als een onderliggend element van de Shell klasse. Voeg Tab objecten toe als onderliggende elementen aan de TabBar benodigde items. Binnen het Tab object moet een ShellContent object worden ingesteld op een ContentPage object.
<Shell xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:views="clr-namespace:Xaminals.Views"
x:Class="Xaminals.AppShell">
<TabBar>
<Tab Title="Moon Phase"
Icon="moon.png">
<ShellContent ContentTemplate="{DataTemplate local:MoonPhasePage}" />
</Tab>
<Tab Title="Sunrise"
Icon="sun.png">
<ShellContent ContentTemplate="{DataTemplate local:SunrisePage}" />
</Tab>
</TabBar>
</Shell>
Tabbladen in een flyoutmenu
Een flyout-item kan een pagina openen met een tabbalk waarop een of meer tabbladen worden weergegeven.
Als u dit ontwerp wilt implementeren, voegt u een <ShellContent> item toe aan het <FlyoutItem> tabblad dat u wilt weergeven.
Stel de Title titel Icon en het pictogram van het tabblad in om de titel en het <ShellContent> pictogram van het tabblad te bepalen.
<FlyoutItem Title="Astronomy" Icon="moon.png">
<ShellContent Title="Moon Phase" Icon="moon.png"
ContentTemplate="{DataTemplate local:MoonPhasePage}"/>
<ShellContent Title="Sunrise" Icon="sun.png"
ContentTemplate="{DataTemplate local:SunrisePage}"/>
</FlyoutItem>
<FlyoutItem Title="About" Icon="question.png">
<ShellContent
ContentTemplate="{DataTemplate local:AboutPage}"/>
</FlyoutItem>