Comment voulez-vous changer de page dans Xamarin Forms?

Dans la classe App vous pouvez définir la page d'accueil à une Page de Navigation et de définir la page racine de votre ContentPage:

public App ()
{
    //The root page of your application
    MainPage = new NavigationPage( new FirstContentPage() );
}

Puis dans votre premier ContentPage appel:

Navigation.PushAsync (new SecondContentPage ());

Pousser une nouvelle page sur la pile, puis de supprimer la page en cours. Il en résulte un interrupteur.

item.Tapped += async (sender, e) => {
    await Navigation.PushAsync (new SecondPage ());
    Navigation.RemovePage(this);
};

Vous avez besoin pour être en première Page de Navigation:

MainPage = NavigationPage(new FirstPage());

De commutation de contenu n'est pas idéal que vous avez juste une grande page et un ensemble de événements de page comme OnAppearing ect.

Semble que ce fil est très populaire et il sera triste de ne pas mentionner ici qu'il existe une alternative - ViewModel First Navigation. La plupart des frameworks MVVM là à l'aide, toutefois si vous voulez comprendre de quoi il s'agit, continuer la lecture.

Tous les officiels de Xamarin.Les formes de la documentation démontre un simple, mais un peu de ne pas MVVM solution. C'est parce que la Page(Vue) devrait ne sais rien à propos de la ViewModel et vice versa. Voici un excellent exemple de cette violation:

//C# version
public partial class MyPage : ContentPage
{
    public MyPage()
    {
        InitializeComponent();
        //Violation
        this.BindingContext = new MyViewModel();
    }
}

//XAML version
<?xml version="1.0" encoding="utf-8"?>
<ContentPage
    xmlns="http://xamarin.com/schemas/2014/forms"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:viewmodels="clr-namespace:MyApp.ViewModel"
    x:Class="MyApp.Views.MyPage">
    <ContentPage.BindingContext>
        <!-- Violation -->
        <viewmodels:MyViewModel />
    </ContentPage.BindingContext>
</ContentPage>

Si vous avez un 2 pages de l'application de cette approche pourrait être bon pour vous. Toutefois, si vous travaillez sur une grande solution d'entreprise de mieux vous aller avec un ViewModel First Navigation approche. Il est un peu plus compliqué mais beaucoup plus propre approche qui vous permettent de naviguer entre ViewModels à la place de la navigation entre les Pages(points de Vue). L'un des avantages à côté de claire séparation des préoccupations que vous pourriez facilement passer des paramètres à la prochaine ViewModel ou d'exécuter un code d'initialisation asynchrone à droite après la navigation. Maintenant pour les détails.

(Je vais essayer de simplifier tous les exemples de code autant que possible).

1. Tout d'abord nous avons besoin d'un endroit où nous pourrions inscrire tous nos objets et éventuellement définir leur durée de vie. Pour cette question, nous pouvons utiliser un conteneur IOC, vous pouvez choisir vous-même. Dans cet exemple je vais utiliser Autofac(il est l'un des plus rapides disponibles). Nous pouvons conserver une référence dans le App de sorte qu'il sera disponible partout dans le monde (pas une bonne idée, mais besoin de simplification):

public class DependencyResolver
{
    static IContainer container;

    public DependencyResolver(params Module[] modules)
    {
        var builder = new ContainerBuilder();

        if (modules != null)
            foreach (var module in modules)
                builder.RegisterModule(module);

        container = builder.Build();
    }

    public T Resolve<T>() => container.Resolve<T>();
    public object Resolve(Type type) => container.Resolve(type);
}

public partial class App : Application
{
    public DependencyResolver DependencyResolver { get; }

    //Pass here platform specific dependencies
    public App(Module platformIocModule)
    {
        InitializeComponent();
        DependencyResolver = new DependencyResolver(platformIocModule, new IocModule());
        MainPage = new WelcomeView();
    }

    /* The rest of the code ... */
}

2.Nous avons besoin d'un objet responsable de la récupération d'un Page (Vue) pour un ViewModel et vice versa. Le deuxième cas peut être utile dans le cas de la configuration de la racine/page principale de l'application. Pour que l'on devrait s'entendre sur une simple convention que tous les ViewModels devrait être dans ViewModels répertoire et Pages(Vues) devrait être dans le Views répertoire. En d'autres termes ViewModels doit vivre dans [MyApp].ViewModels espace de noms et Pages(points de Vue) dans [MyApp].Views espace de noms. En plus de cela, nous devons admettre que WelcomeView(Page) devrait avoir un WelcomeViewModel et etc. Voici un exemple de code d'un mappeur:

public class TypeMapperService
{
    public Type MapViewModelToView(Type viewModelType)
    {
        var viewName = viewModelType.FullName.Replace("Model", string.Empty);
        var viewAssemblyName = GetTypeAssemblyName(viewModelType);
        var viewTypeName = GenerateTypeName("{0}, {1}", viewName, viewAssemblyName);
        return Type.GetType(viewTypeName);
    }

    public Type MapViewToViewModel(Type viewType)
    {
        var viewModelName = viewType.FullName.Replace(".Views.", ".ViewModels.");
        var viewModelAssemblyName = GetTypeAssemblyName(viewType);
        var viewTypeModelName = GenerateTypeName("{0}Model, {1}", viewModelName, viewModelAssemblyName);
        return Type.GetType(viewTypeModelName);
    }

    string GetTypeAssemblyName(Type type) => type.GetTypeInfo().Assembly.FullName;
    string GenerateTypeName(string format, string typeName, string assemblyName) =>
        string.Format(CultureInfo.InvariantCulture, format, typeName, assemblyName);
}

3.Pour le cas de création d'une page racine nous aurons besoin de sorte de ViewModelLocator qui va définir la BindingContext automatiquement:

public static class ViewModelLocator
{
    public static readonly BindableProperty AutoWireViewModelProperty =
        BindableProperty.CreateAttached("AutoWireViewModel", typeof(bool), typeof(ViewModelLocator), default(bool), propertyChanged: OnAutoWireViewModelChanged);

    public static bool GetAutoWireViewModel(BindableObject bindable) =>
        (bool)bindable.GetValue(AutoWireViewModelProperty);

    public static void SetAutoWireViewModel(BindableObject bindable, bool value) =>
        bindable.SetValue(AutoWireViewModelProperty, value);

    static ITypeMapperService mapper = (Application.Current as App).DependencyResolver.Resolve<ITypeMapperService>();

    static void OnAutoWireViewModelChanged(BindableObject bindable, object oldValue, object newValue)
    {
        var view = bindable as Element;
        var viewType = view.GetType();
        var viewModelType = mapper.MapViewToViewModel(viewType);
        var viewModel =  (Application.Current as App).DependencyResolver.Resolve(viewModelType);
        view.BindingContext = viewModel;
    }
}

//Usage example
<?xml version="1.0" encoding="utf-8"?>
<ContentPage
    xmlns="http://xamarin.com/schemas/2014/forms"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:viewmodels="clr-namespace:MyApp.ViewModel"
    viewmodels:ViewModelLocator.AutoWireViewModel="true"
    x:Class="MyApp.Views.MyPage">
</ContentPage>

4.Enfin, nous avons besoin d'un NavigationService qui servira de support ViewModel First Navigation approche:

public class NavigationService
{
    TypeMapperService mapperService { get; }

    public NavigationService(TypeMapperService mapperService)
    {
        this.mapperService = mapperService;
    }

    protected Page CreatePage(Type viewModelType)
    {
        Type pageType = mapperService.MapViewModelToView(viewModelType);
        if (pageType == null)
        {
            throw new Exception($"Cannot locate page type for {viewModelType}");
        }

        return Activator.CreateInstance(pageType) as Page;
    }

    protected Page GetCurrentPage()
    {
        var mainPage = Application.Current.MainPage;

        if (mainPage is MasterDetailPage)
        {
            return ((MasterDetailPage)mainPage).Detail;
        }

        //TabbedPage : MultiPage<Page>
        //CarouselPage : MultiPage<ContentPage>
        if (mainPage is TabbedPage || mainPage is CarouselPage)
        {
            return ((MultiPage<Page>)mainPage).CurrentPage;
        }

        return mainPage;
    }

    public Task PushAsync(Page page, bool animated = true)
    {
        var navigationPage = Application.Current.MainPage as NavigationPage;
        return navigationPage.PushAsync(page, animated);
    }

    public Task PopAsync(bool animated = true)
    {
        var mainPage = Application.Current.MainPage as NavigationPage;
        return mainPage.Navigation.PopAsync(animated);
    }

    public Task PushModalAsync<TViewModel>(object parameter = null, bool animated = true) where TViewModel : BaseViewModel =>
        InternalPushModalAsync(typeof(TViewModel), animated, parameter);

    public Task PopModalAsync(bool animated = true)
    {
        var mainPage = GetCurrentPage();
        if (mainPage != null)
            return mainPage.Navigation.PopModalAsync(animated);

        throw new Exception("Current page is null.");
    }

    async Task InternalPushModalAsync(Type viewModelType, bool animated, object parameter)
    {
        var page = CreatePage(viewModelType);
        var currentNavigationPage = GetCurrentPage();

        if (currentNavigationPage != null)
        {
            await currentNavigationPage.Navigation.PushModalAsync(page, animated);
        }
        else
        {
            throw new Exception("Current page is null.");
        }

        await (page.BindingContext as BaseViewModel).InitializeAsync(parameter);
    }
}

Comme vous pouvez le voir il y a un BaseViewModel - classe de base abstraite pour tous les ViewModels où vous pouvez définir des méthodes comme InitializeAsync qui sera exécuté juste après la navigation. Et voici un exemple de navigation:

public class WelcomeViewModel : BaseViewModel
{
    public ICommand NewGameCmd { get; }
    public ICommand TopScoreCmd { get; }
    public ICommand AboutCmd { get; }

    public WelcomeViewModel(INavigationService navigation) : base(navigation)
    {
        NewGameCmd = new Command(async () => await Navigation.PushModalAsync<GameViewModel>());
        TopScoreCmd = new Command(async () => await navigation.PushModalAsync<TopScoreViewModel>());
        AboutCmd = new Command(async () => await navigation.PushModalAsync<AboutViewModel>());
    }
}

Que vous comprenez cette approche est plus complexe, plus difficile à déboguer et pourrait être source de confusion. Cependant, il existe de nombreux avantages plus vous avez réellement n'avez pas à mettre en œuvre vous-même, car la plupart du MVVM cadres de support de la boîte. L'exemple de code qui est démontré ici est disponible sur github.

Il y a beaucoup de bons articles à propos de ViewModel First Navigation approche et il est gratuit Enterprise Application des Modèles à l'aide de Xamarin.Les formes eBook qui explique cela et bien d'autres sujets intéressants dans le détail.

Une page à une autre page de navigation dans les Xamarin.formulaires à l'aide de de Navigation propriété ci-Dessous un exemple de code

void addClicked(object sender, EventArgs e)
        {
            //var createEmp = (Employee)BindingContext;
            Employee emp = new Employee();
            emp.Address = AddressEntry.Text;   
            App.Database.SaveItem(emp);
            this.Navigation.PushAsync(new EmployeeDetails());
  this.Navigation.PushModalAsync(new EmployeeDetails());
        }

Pour naviguer d'une page à une autre page avec en vue la cellule de code ci-Dessous Xamrian.les formes

 private async void BtnEdit_Clicked1(object sender, EventArgs e)
        {
            App.Database.GetItem(empid);
            await App.Current.MainPage.Navigation.PushModalAsync(new EmployeeRegistration(empid));
        }

Exemple comme ci-dessous

public class OptionsViewCell : ViewCell
    {
        int empid;
        Button btnEdit;
        public OptionsViewCell()
        {
        }
        protected override void OnBindingContextChanged()
        {
            base.OnBindingContextChanged();

            if (this.BindingContext == null)
                return;

            dynamic obj = BindingContext;
            empid = Convert.ToInt32(obj.Eid);
            var lblname = new Label
            {
                BackgroundColor = Color.Lime,
                Text = obj.Ename,
            };

            var lblAddress = new Label
            {
                BackgroundColor = Color.Yellow,
                Text = obj.Address,
            };

            var lblphonenumber = new Label
            {
                BackgroundColor = Color.Pink,
                Text = obj.phonenumber,
            };

            var lblemail = new Label
            {
                BackgroundColor = Color.Purple,
                Text = obj.email,
            };

            var lbleid = new Label
            {
                BackgroundColor = Color.Silver,
                Text = (empid).ToString(),
            };

             //var lbleid = new Label
            //{
            //   BackgroundColor = Color.Silver,
            //   //HorizontalOptions = LayoutOptions.CenterAndExpand
            //};
            //lbleid.SetBinding(Label.TextProperty, "Eid");
            Button btnDelete = new Button
            {
                BackgroundColor = Color.Gray,

                Text = "Delete",
                //WidthRequest = 15,
                //HeightRequest = 20,
                TextColor = Color.Red,
                HorizontalOptions = LayoutOptions.EndAndExpand,
            };
            btnDelete.Clicked += BtnDelete_Clicked;
            //btnDelete.PropertyChanged += BtnDelete_PropertyChanged;  

            btnEdit = new Button
            {
                BackgroundColor = Color.Gray,
                Text = "Edit",
                TextColor = Color.Green,
            };
            //lbleid.SetBinding(Label.TextProperty, "Eid");
            btnEdit.Clicked += BtnEdit_Clicked1; ;
            //btnEdit.Clicked += async (s, e) =>{
            //   await App.Current.MainPage.Navigation.PushModalAsync(new EmployeeRegistration());
            //};

            View = new StackLayout()
            {
                Orientation = StackOrientation.Horizontal,
                BackgroundColor = Color.White,
                Children = { lbleid, lblname, lblAddress, lblemail, lblphonenumber, btnDelete, btnEdit },
            };

        }

        private async void BtnEdit_Clicked1(object sender, EventArgs e)
        {
            App.Database.GetItem(empid);
            await App.Current.MainPage.Navigation.PushModalAsync(new EmployeeRegistration(empid));
        }



        private void BtnDelete_Clicked(object sender, EventArgs e)
        {
            //var eid = Convert.ToInt32(empid);
            //var item = (Xamarin.Forms.Button)sender;
            int eid = empid;
            App.Database.DeleteItem(empid);
        }

    }

In App.Xaml.Cs:

MainPage = new NavigationPage( new YourPage());

Lorsque vous souhaitez accéder à partir de YourPage à la page suivante, vous n':

await Navigation.PushAsync(new YourSecondPage());

Vous pouvez en lire plus à propos de Xamarin Formes de navigation ici: https://docs.microsoft.com/en-us/xamarin/xamarin-forms/app-fundamentals/navigation/hierarchical

Microsoft dispose d'une assez bonne docs sur cette.

Il est aussi le plus récent concept de la Shell. Il permet une nouvelle façon de structurer votre application et simplifie la navigation dans certains cas.

Intro: https://devblogs.microsoft.com/xamarin/shell-xamarin-forms-4-0-getting-started/

Vidéo sur les bases du Shell: https://www.youtube.com/watch?v=0y1bUAcOjZY&t=3112s

Docs: https://docs.microsoft.com/en-us/xamarin/xamarin-forms/app-fundamentals/shell/