Navigeringssida

.NET Multi-Platform App UI (.NET MAUI) NavigationPage ger en hierarkisk navigeringsupplevelse där du kan navigera genom sidor, framåt och bakåt efter behov. NavigationPage tillhandahåller navigering som en LIFO-stack (last-in, first-out) med Page objekt.

NavigationPage definierar följande egenskaper:

• BarBackground, av typen Brush, anger bakgrunden i navigeringsfältet som en Brush.
• BarBackgroundColor, av typen Color, anger bakgrundsfärgen för navigeringsfältet.
• BackButtonTitle, av typen string, representerar texten som ska användas för bakåtknappen. Det här är en bifogad egenskap.
• BarTextColor, av typen Color, anger färgen på texten i navigeringsfältet.
• CurrentPage, av typen Page, representerar sidan som finns ovanpå navigeringsstacken. Det här är en skrivskyddad egenskap.
• HasNavigationBar, av typen bool, representerar om ett navigeringsfält finns på NavigationPage. Standardvärdet för den här egenskapen är true. Det här är en bifogad egenskap.
• HasBackButton, av typen bool, representerar om navigeringsfältet innehåller en bakåtknapp. Standardvärdet för den här egenskapen är true. Det här är en bifogad egenskap.
• IconColor, av typen Color, definierar bakgrundsfärgen för ikonen i navigeringsfältet. Det här är en bifogad egenskap.
• RootPage, av typen Page, representerar rotsidan i navigeringsstacken. Det här är en skrivskyddad egenskap.
• TitleIconImageSource, av typen ImageSource, definierar ikonen som representerar rubriken i navigeringsfältet. Det här är en bifogad egenskap.
• TitleView, av typen View, definierar vyn som kan visas i navigeringsfältet. Det här är en bifogad egenskap.

Dessa egenskaper stöds av BindableProperty-objekt, vilket innebär att de kan vara mål för databindningar och stiliseras.

Klassen NavigationPage definierar också tre händelser:

• Pushed höjs när en sida skickas till navigeringsstacken.
• Popped höjs när en sida visas från navigeringsstacken.
• PoppedToRoot höjs när den sista sidan som inte är rot visas från navigeringsstacken.

Alla tre händelserna tar emot NavigationEventArgs objekt som definierar en skrivskyddad Page egenskap som hämtar sidan som visades från navigeringsstacken eller den nyligen synliga sidan i stacken.

Utföra lägeslös navigering

.NET MAUI stöder lägeslös sidnavigering. En lägeslös sida finns kvar på skärmen och förblir tillgänglig tills du navigerar till en annan sida.

A NavigationPage används vanligtvis för att navigera genom en stack med ContentPage objekt. När en sida navigerar till en annan push-överförs den nya sidan på stacken och blir den aktiva sidan:

När den andra sidan återgår till den första sidan visas en sida från stacken och den nya översta sidan blir sedan aktiv:

A NavigationPage består av ett navigeringsfält, där den aktiva sidan visas under navigeringsfältet. Följande diagram visar huvudkomponenterna i navigeringsfältet:

En valfri ikon kan visas mellan bakåtknappen och rubriken.

Navigeringsmetoder exponeras av egenskapen för Navigation alla Page härledda typer. Med de här metoderna kan du skicka sidor till navigeringsstacken, pop-sidor från stacken och ändra stacken.

Skapa rotsidan

public partial class App : Application
{
    public App()
    {
        InitializeComponent();
        MainPage = new NavigationPage(new MainPage());
    }
}

public partial class App : Application
{
    public App()
    {
        InitializeComponent();
    }

    protected override Window CreateWindow(IActivationState? activationState)
    {
        return new Window(new NavigationPage(new MainPage()));
    }    
}

Skicka sidor till navigeringsstacken

En sida kan navigeras till genom att anropa PushAsync metoden på egenskapen Navigation för den aktuella sidan:

await Navigation.PushAsync(new DetailsPage());

I det här exemplet skickas objektet DetailsPage till navigeringsstacken, där det blir den aktiva sidan.

Pop-sidor från navigeringsstacken

Den aktiva sidan kan visas från navigeringsstacken genom att trycka på bakåtknappen på en enhet, oavsett om det är en fysisk knapp på enheten eller en skärmknapp.

För att programmatiskt återgå till föregående sida PopAsync ska metoden anropas på egenskapen Navigation för den aktuella sidan:

await Navigation.PopAsync();

I det här exemplet tas den aktuella sidan bort från navigeringsstacken, där den nya översta sidan blir den aktiva sidan.

Dessutom Navigation exponerar egenskapen för varje sida också en PopToRootAsync metod som visar alla utom rotsidan från navigeringsstacken, vilket gör appens rotsida till den aktiva sidan.

Ändra navigeringsstacken

Egenskapen Navigation för en Page exponerar en NavigationStack egenskap som sidorna i navigeringsstacken kan hämtas från. Även om .NET MAUI behåller åtkomsten till navigeringsstacken tillhandahåller NavigationInsertPageBefore egenskapen metoderna och RemovePage för att ändra stacken genom att infoga sidor eller ta bort dem.

Metoden InsertPageBefore infogar en angiven sida i navigeringsstacken före en befintlig angiven sida, enligt följande diagram:

Metoden RemovePage tar bort den angivna sidan från navigeringsstacken enligt följande diagram:

Tillsammans möjliggör dessa metoder en anpassad navigeringsupplevelse, till exempel att ersätta en inloggningssida med en ny sida efter en lyckad inloggning.

Utföra modal navigering

.NET MAUI stöder navigering på modala sidor. En modal sida uppmuntrar användare att slutföra en fristående uppgift som inte kan navigeras bort från förrän uppgiften har slutförts eller avbrutits.

En modal sida kan vara någon av de sidtyper som stöds av .NET MAUI. Om du vill visa en sida modally bör appen push-överföra den till den modala stacken, där den blir den aktiva sidan:

För att återgå till föregående sida ska appen öppna den aktuella sidan från den modala stacken och den nya översta sidan blir den aktiva sidan:

Modala navigeringsmetoder exponeras av egenskapen för Navigation alla Page härledda typer. Dessa metoder ger möjlighet att skicka sidor till den modala stacken och pop-sidor från den modala stacken. Egenskapen Navigation exponerar också en ModalStack egenskap från vilken sidor i den modala stacken kan hämtas. Det finns dock inget koncept för att utföra modal stackmanipulering eller poppa till rotsidan i modal navigering. Det beror på att dessa åtgärder inte stöds universellt på de underliggande plattformarna.

Skicka sidor till den modala stacken

En sida kan navigeras modally till genom att anropa PushModalAsync metoden på egenskapen för den Navigation aktuella sidan:

await Navigation.PushModalAsync(new DetailsPage());

I det här exemplet DetailsPage skickas objektet till den modala stacken, där det blir den aktiva sidan.

Pop-sidor från den modala stacken

Den aktiva sidan kan öppnas från den modala stacken genom att trycka på bakåtknappen på en enhet, oavsett om det är en fysisk knapp på enheten eller en knapp på skärmen.

För att programmatiskt återgå till den ursprungliga sidan PopModalAsync ska metoden anropas på Navigation egenskapen för den aktuella sidan:

await Navigation.PopModalAsync();

I det här exemplet tas den aktuella sidan bort från den modala stacken, där den nya sidan längst upp blir den aktiva sidan.

Inaktivera bakåtknappen

På Android kan du alltid återgå till föregående sida genom att trycka på standardknappen Bakåt på enheten. Om modalsidan kräver att en fristående uppgift slutförs innan den lämnar sidan måste appen inaktivera bakåtknappen . Detta kan åstadkommas genom att Page.OnBackButtonPressed åsidosätta metoden på modalsidan.

Skicka data under navigeringen

Ibland är det nödvändigt att en sida skickar data till en annan sida under navigeringen. Två standardtekniker för att åstadkomma detta är att skicka data via en sidkonstruktor och genom att ange den nya sidans BindingContext till data.

Skicka data via en sidkonstruktor

Den enklaste tekniken för att skicka data till en annan sida under navigeringen är genom ett sidkonstruktorargument:

Contact contact = new Contact
{
    Name = "Jane Doe",
    Age = 30,
    Occupation = "Developer",
    Country = "USA"
};
...
await Navigation.PushModalAsync(new DetailsPage(contact));

I det här exemplet skickas ett Contact objekt som ett konstruktorargument till DetailPage. Objektet Contact kan sedan visas av DetailsPage.

Skicka data via en BindingContext

En alternativ metod för att skicka data till en annan sida under navigeringen är genom att ange den nya sidans BindingContext till data:

Contact contact = new Contact
{
    Name = "Jane Doe",
    Age = 30,
    Occupation = "Developer",
    Country = "USA"
};

await Navigation.PushAsync(new DetailsPage
{
    BindingContext = contact  
});

Fördelen med att skicka navigeringsdata BindingContext via en sida är att den nya sidan kan använda databindning för att visa data:

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:MyMauiApp"
             x:Class="MyMauiApp.DetailsPage"
             Title="Details"
             x:DataType="local:Contact">
    <StackLayout>
        <Label Text="{Binding Name}" />
        <Label Text="{Binding Occupation}" />
    </StackLayout>
</ContentPage>

Mer information om databindning finns i Databindning.

Visa vyer i navigeringsfältet

Alla .NET MAUI View kan visas i navigeringsfältet i en NavigationPage. Detta uppnås genom att ange den NavigationPage.TitleView anslutna egenskapen till en View. Den här bifogade egenskapen kan ställas in på valfri Page, och när Page den skickas till en NavigationPageNavigationPage respekteras värdet för egenskapen.

I följande exempel visas hur du anger den NavigationPage.TitleView anslutna egenskapen:

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="NavigationPageTitleView.TitleViewPage">
    <NavigationPage.TitleView>
        <Slider HeightRequest="44"
                WidthRequest="300" />
    </NavigationPage.TitleView>
    ...
</ContentPage>

Motsvarande C#-kod är:

Slider titleView = new Slider { HeightRequest = 44, WidthRequest = 300 };
NavigationPage.SetTitleView(this, titleView);

I det här exemplet visas en Slider i navigeringsfältet i NavigationPage, för att styra zoomning.

Layout Eftersom klassen härleds från View klassen kan den TitleView anslutna egenskapen ställas in för att visa en layoutklass som innehåller flera vyer. Detta kan dock resultera i urklipp om vyn som visas i navigeringsfältet är större än standardstorleken för navigeringsfältet. På Android kan dock navigeringsfältets höjd ändras genom att den bindbara egenskapen anges NavigationPage.BarHeight till en double som representerar den nya höjden.

Du kan också föreslå ett utökat navigeringsfält genom att placera en del av innehållet i navigeringsfältet, och vissa i en vy överst i det sidinnehåll som du färgar matchar navigeringsfältet. Dessutom kan avgränsarlinjen och skuggorna i iOS längst ned i navigeringsfältet tas bort genom att den bindbara egenskapen anges NavigationPage.HideNavigationBarSeparator till true.