Flyoutnavigatie implementeren

  • 4 minuten

Flyoutnavigatie is een type navigatie waarbij een venster met menu-items dia's (of vliegt) vanaf de zijkant van het scherm van het apparaat. Het wordt aangeroepen door te tikken op een 'hamburger'-menu, een pictogram met drie horizontale lijnen die op elkaar zijn gestapeld.

In deze les leert u hoe u een app bouwt waarmee flyoutnavigatie in een .NET Multi-Platform App UI (TENANT) wordt geïmplementeerd.

Wat is flyoutnavigatie?

In flyoutnavigatie wordt een menu weergegeven dat een snelle manier biedt om te schakelen tussen context in uw toepassing.

Het flyoutmenu bestaat uit verschillende onderdelen, de Header, FlyoutItemsen MenuItemsFooter.

In de volgende afbeelding ziet u een visueel voorbeeld van de flyoutonderdelen.

Een schermopname van een flyoutmenu met elk gedeelte van de flyout met aantekeningen.

Omdat het flyoutmenu niet altijd zichtbaar is, kan het worden gebruikt om te schakelen tussen conceptueel verschillende onderdelen van uw toepassing. Een flyoutitem kan bijvoorbeeld leiden tot een gegevensinvoerpagina (of pagina's) en een andere naar een infopagina.

Flyoutnavigatie in een .NET MAUI-app

U gebruikt de FlyoutItem klasse om flyoutnavigatie in .NET MAUI te implementeren. FlyoutItem maakt deel uit van het shell-app-ontwikkelingsparadigma dat wordt geleverd door .NET MAUI.

Navigatie met een flyout in .NET MAUI vindt plaats wanneer er op een FlyoutItem item wordt getikt. Hiermee FlyoutItem schakelt u automatisch de inhoud die in uw app wordt weergegeven. U geeft op wat er wordt weergegeven wanneer een FlyoutItem tikt door de eigenschap ervan ShellContent in te stellen. Deze eigenschap verwijst naar een pagina in uw toepassing.

De FlyoutItem pagina moet worden gehost op een Shell pagina, die fungeert als de hoofdpagina van uw toepassing. En je kunt zoveel FlyoutItemhebben als je wilt.

In het volgende voorbeeld wordt een flyout gemaakt met twee flyoutitems:

<Shell xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
       xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
       xmlns:controls="clr-namespace:Xaminals.Controls"
       xmlns:views="clr-namespace:Xaminals.Views"
       x:Class="Xaminals.AppShell">
    <FlyoutItem Title="Cats"
                Icon="cat.png">
       <Tab>
           <ShellContent ContentTemplate="{DataTemplate views:CatsPage}" />
       </Tab>
    </FlyoutItem>
    <FlyoutItem Title="Dogs"
                Icon="dog.png">
       <Tab>
           <ShellContent ContentTemplate="{DataTemplate views:DogsPage}" />
       </Tab>
    </FlyoutItem>
</Shell>

Een flyout maken

Een of meer flyout-items kunnen worden toegevoegd aan de flyout. Een FlyoutItem object vertegenwoordigt elk flyout-item. Elk FlyoutItem object moet een onderliggend Shell object zijn van het subklasseobject dat fungeert als de app MainPage.

Het Shell object heeft impliciete conversieoperators waarmee de hiërarchie van de Shell-visual kan worden vereenvoudigd. Deze vereenvoudiging is mogelijk omdat een subklasseobject Shell alleen objecten of een FlyoutItem object kan bevattenTabBar, dat alleen objecten kan bevattenTab, die alleen objecten kunnen bevatten, die alleen objecten kunnen bevattenShellContent.

Deze impliciete conversieoperators kunnen worden gebruikt om de FlyoutItem en Tab objecten uit het vorige voorbeeld te verwijderen:

<Shell xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
       xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
       xmlns:controls="clr-namespace:Xaminals.Controls"
       xmlns:views="clr-namespace:Xaminals.Views"
       x:Class="Xaminals.AppShell">
   <ShellContent Title="Cats"
                 Icon="cat.png"
                 ContentTemplate="{DataTemplate views:CatsPage}" />
   <ShellContent Title="Dogs"
                 Icon="dog.png"
                 ContentTemplate="{DataTemplate views:DogsPage}" />
</Shell>

Deze code resulteert in een flyout met twee items. De CatsPage optie wordt standaard weergegeven wanneer de app wordt geopend. Als u op de tweede tikt, wordt de DogsPage.

Een schermopname van een flyout met twee opties.

Flyoutmenu-items

Menu-items kunnen eventueel worden toegevoegd aan de flyout. Een MenuItem object vertegenwoordigt elk menu-item. Menu-items zijn vergelijkbaar met knoppen waarin tikken op een actie leidt tot een actie die wordt uitgevoerd in plaats van een pagina die moet worden weergegeven.

De positie van objecten in de flyout is afhankelijk van MenuItem de declaratievolgorde in de Shell-visualhiërarchie. Daarom worden alle MenuItem objecten die vóór FlyoutItem objecten zijn gedeclareerd, weergegeven vóór de objecten in de FlyoutItem flyout, en alle MenuItem objecten die na FlyoutItem objecten zijn gedeclareerd, worden weergegeven na de objecten in de FlyoutItem flyout.

<Shell ...>
    ...            
    <MenuItem Text="Help"
              IconImageSource="help.png"
              Command="{Binding HelpCommand}"
              CommandParameter="https://learn.microsoft.com/dotnet/maui/fundamentals/shell" />    
</Shell>

De flyoutheader is de inhoud die optioneel boven aan de flyout wordt weergegeven. U definieert het uiterlijk van de koptekst door een object in te stellen met de Shell.FlyoutHeader bindbare eigenschap:

<Shell ...>
    <Shell.FlyoutHeader>
        <Grid>
            <Image Source="header-image.png" />
        </Grid>
    </Shell.FlyoutHeader>
</Shell>

De flyoutvoettekst is de inhoud die eventueel onder aan de flyout wordt weergegeven. U definieert het uiterlijk van de voettekst door een object in te stellen met de Shell.FlyoutFooter bindbare eigenschap:

<Shell ...>
    <Shell.FlyoutFooter>
        <Grid>
            <Image Source="footer-image.png" />
        </Grid>
    </Shell.FlyoutFooter>
</Shell>