Xamarin.Forms
Navigazione in Xamarin.Forms

Flusso NavigationPage

using System;
using Xamarin.Forms;

namespace NavigationApp
{    
    public class App : Application
    {
        public App()
        {
            MainPage = new NavigationPage(new FirstPage());
        }
    }

    public class FirstPage : ContentPage
    {
        Label FirstPageLabel { get; set; } = new Label();

        Button FirstPageButton { get; set; } = new Button();

        public FirstPage()
        {
            Title = "First page";

            FirstPageLabel.Text = "This is the first page";
            FirstPageButton.Text = "Navigate to the second page";
            FirstPageButton.Clicked += OnFirstPageButtonClicked;

            var content = new StackLayout();
            content.Children.Add(FirstPageLabel);
            content.Children.Add(FirstPageButton);

            Content = content;
        }

        async void OnFirstPageButtonClicked(object sender, EventArgs e)
        {
            await Navigation.PushAsync(new SecondPage(), true);
        }
    }

    public class SecondPage : ContentPage
    {
        Label SecondPageLabel { get; set; } = new Label();

        public SecondPage()
        {
            Title = "Second page";

            SecondPageLabel.Text = "This is the second page";

            Content = SecondPageLabel;
        }
    }
}    

Flusso NavigationPage con XAML

File App.xaml.cs (il file App.xaml è predefinito, quindi saltato)

using Xamrin.Forms

namespace NavigationApp
{
    public partial class App : Application
    {
        public static INavigation GlobalNavigation { get; private set; }

        public App()
        {
            InitializeComponent();
            var rootPage = new NavigationPage(new FirstPage());

            GlobalNavigation = rootPage.Navigation;

            MainPage = rootPage;
        }
    }
}

File FirstPage.xaml

<?xml version="1.0" encoding="UTF-8"?>
<ContentPage
    xmlns="http://xamarin.com/schemas/2014/forms"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    x:Class="NavigationApp.FirstPage"
    Title="First page">
    <ContentPage.Content>
        <StackLayout>
            <Label
                Text="This is the first page" />
            <Button
                Text="Click to navigate to a new page" 
                Clicked="GoToSecondPageButtonClicked"/>
            <Button
                Text="Click to open the new page as modal" 
                Clicked="OpenGlobalModalPageButtonClicked"/>
        </StackLayout>
    </ContentPage.Content>
</ContentPage>

In alcuni casi è necessario aprire la nuova pagina non nella navigazione corrente ma in quella globale. Ad esempio, se la pagina corrente contiene il menu in basso, sarà visibile quando si spinge la nuova pagina nella navigazione corrente. Se è necessario aprire la pagina sull'intero contenuto visibile nascondendo il menu in basso e il contenuto di un'altra pagina corrente, è necessario inserire la nuova pagina come modale nella navigazione globale. Vedi la proprietà App.GlobalNavigation e l'esempio seguente.

File FirstPage.xaml.cs

using System;
using Xamarin.Forms;

namespace NavigationApp
{
    public partial class FirstPage : ContentPage
    {
        public FirstPage()
        {
            InitializeComponent();
        }

        async void GoToSecondPageButtonClicked(object sender, EventArgs e)
        {
            await Navigation.PushAsync(new SecondPage(), true);
        }

        async void OpenGlobalModalPageButtonClicked(object sender, EventArgs e)
        {
            await App.GlobalNavigation.PushModalAsync(new SecondPage(), true);
        }
    }
}

File SecondPage.xaml (il file xaml.cs è predefinito, quindi saltato)

<?xml version="1.0" encoding="UTF-8"?>
<ContentPage
    xmlns="http://xamarin.com/schemas/2014/forms"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    x:Class="NavigationApp.SecondPage"
    Title="Second page">
    <ContentPage.Content>
        <Label
            Text="This is the second page" />
    </ContentPage.Content>
</ContentPage>

Navigazione gerarchica con XAML

Per impostazione predefinita, il modello di navigazione funziona come una pila di pagine, chiamando le pagine più recenti sulle pagine precedenti. Dovrai utilizzare l'oggetto NavigationPage per questo.

Spingendo nuove pagine

...
public class App : Application 
{
    public App() 
    {
        MainPage = new NavigationPage(new Page1());
    }
}
...

Page1.xaml

...
<ContentPage.Content>
    <StackLayout>
        <Label Text="Page 1" />
        <Button Text="Go to page 2" Clicked="GoToNextPage" />
    </StackLayout>
</ContentPage.Content>
...

Page1.xaml.cs

...
public partial class Page1 : ContentPage
{
    public Page1()
    {
        InitializeComponent();
    }
    
    protected async void GoToNextPage(object sender, EventArgs e)
    {
        await Navigation.PushAsync(new Page2());
    }
}
...

Page2.xaml

...
<ContentPage.Content>
    <StackLayout>
        <Label Text="Page 2" />
        <Button Text="Go to Page 3" Clicked="GoToNextPage" />
    </StackLayout>
</ContentPage.Content>
...

Page2.xaml.cs

...
public partial class Page2 : ContentPage
{
    public Page2()
    {
        InitializeComponent();
    }
    
    protected async void GoToNextPage(object sender, EventArgs e)
    {
        await Navigation.PushAsync(new Page3());
    }
}
...

Popping pages

Normalmente l'utente utilizza il pulsante Indietro per restituire le pagine, ma a volte è necessario controllarlo a livello di codice, quindi è necessario chiamare il metodo NavigationPage.PopAsync () per tornare alla pagina precedente o NavigationPage.PopToRootAsync () per tornare all'inizio, come ...

Page3.xaml

...
<ContentPage.Content>
    <StackLayout>
        <Label Text="Page 3" />
        <Button Text="Go to previous page" Clicked="GoToPreviousPage" />
        <Button Text="Go to beginning" Clicked="GoToStartPage" />
    </StackLayout>
</ContentPage.Content>
...

Page3.xaml.cs

...
public partial class Page3 : ContentPage
{
    public Page3()
    {
        InitializeComponent();
    }
    
    protected async void GoToPreviousPage(object sender, EventArgs e)
    {
        await Navigation.PopAsync();
    }

    protected async void GoToStartPage(object sender, EventArgs e)
    {
        await Navigation.PopToRootAsync();
    }
}
...

Navigazione modale con XAML

Le pagine modali possono essere create in tre modi:

• Da oggetto NavigationPage per pagine a schermo intero
• Per avvisi e notifiche
• Per ActionSheets che sono menu a comparsa

Modifiche a schermo intero

...
// to open
await Navigation.PushModalAsync(new ModalPage());
// to close
await Navigation.PopModalAsync();
...

Avvisi / conferme e notifiche

...
// alert
await DisplayAlert("Alert title", "Alert text", "Ok button text");
// confirmation
var booleanAnswer = await DisplayAlert("Confirm?", "Confirmation text", "Yes", "No");
...

ActionSheets

...
var selectedOption = await DisplayActionSheet("Options", "Cancel", "Destroy", "Option 1", "Option 2", "Option 3");
...

Pagina principale di dettaglio principale

public class App : Application
{
    internal static NavigationPage NavPage;

    public App ()
    {
        // The root page of your application
        MainPage = new RootPage();
    }
}
public class RootPage : MasterDetailPage
{
    public RootPage()
    {
        var menuPage = new MenuPage();
        menuPage.Menu.ItemSelected += (sender, e) => NavigateTo(e.SelectedItem as MenuItem);
        Master = menuPage;
        App.NavPage = new NavigationPage(new HomePage());
        Detail = App.NavPage;
    }
    protected override async void OnAppearing()
    {
        base.OnAppearing();
    }
    void NavigateTo(MenuItem menuItem)
    {
        Page displayPage = (Page)Activator.CreateInstance(menuItem.TargetType);
        Detail = new NavigationPage(displayPage);
        IsPresented = false;
    }
}

Navigazione dettagliata principale

Il codice seguente mostra come eseguire la navigazione asincrona quando l'app si trova in un contesto MasterDetailPage.

public async Task NavigateMasterDetail(Page page)
{
        if (page == null)
            {
                return;
            }

        var masterDetail = App.Current.MainPage as MasterDetailPage;

        if (masterDetail == null || masterDetail.Detail == null)
            return;         

        var navigationPage = masterDetail.Detail as NavigationPage;
        if (navigationPage == null)
        {
            masterDetail.Detail = new NavigationPage(page);
            masterDetail.IsPresented = false;
            return;
        }

        await navigationPage.Navigation.PushAsync(page);

        navigationPage.Navigation.RemovePage(navigationPage.Navigation.NavigationStack[navigationPage.Navigation.NavigationStack.Count - 2]);
        masterDetail.IsPresented = false;
    }