Wie wechselt man die Seiten in Xamarin.Forms?

Wie wechseln Sie zwischen Seiten in Xamarin Forms?

Meine Hauptseite ist eine ContentPage und ich möchte nicht zu einer Seite mit Registerkarten wechseln.

Ich konnte dies pseudo-tun, indem ich Eltern der Steuerelemente fand, die die neue Seite auslösen sollten, bis ich die ContentPage gefunden hatte, und dann den Inhalt mit Steuerelementen gegen eine neue Seite austauschte. Aber das scheint wirklich schlampig.

Xamarin.Forms unterstützt mehrere integrierte Navigationshosts:

• NavigationPage, wo die nächste Seite hineingleitet,
• TabbedPage, die du nicht magst
• CarouselPageDies ermöglicht das Umschalten von links und rechts auf die nächsten / vorherigen Seiten.

Darüber hinaus unterstützen alle Seiten auch PushModalAsync()das Verschieben einer neuen Seite über die vorhandene.

Wenn Sie ganz am Ende sicherstellen möchten, dass der Benutzer nicht zur vorherigen Seite zurückkehren kann (mithilfe einer Geste oder der Zurück-Hardware-Schaltfläche), können Sie diese weiterhin Pageanzeigen und ersetzen Content.

Die vorgeschlagenen Optionen zum Ersetzen der Stammseite funktionieren ebenfalls, aber Sie müssen dies für jede Plattform unterschiedlich behandeln.

In der App-Klasse können Sie die Hauptseite auf eine Navigationsseite und die Stammseite auf Ihre ContentPage festlegen:

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

Dann in Ihrem ersten ContentPage-Aufruf:

Navigation.PushAsync (new SecondContentPage ());

Wenn Ihr Projekt als PCL-Formularprojekt eingerichtet wurde (und sehr wahrscheinlich auch als freigegebene Formulare, aber das habe ich noch nicht ausprobiert), gibt es eine Klasse App.cs, die folgendermaßen aussieht:

public class App
{
    public static Page GetMainPage ()
    {     
        AuditorDB.Model.Extensions.AutoTimestamp = true;
        return new NavigationPage (new LoginPage ());
    }
}

Sie können die GetMainPageMethode ändern , um eine neue TabbedPaged oder eine andere Seite zurückzugeben, die Sie im Projekt definiert haben

Von dort aus können Sie Befehle oder Ereignishandler hinzufügen, um Code auszuführen und auszuführen

// to show OtherPage and be able to go back
Navigation.PushAsync(new OtherPage());

// to show AnotherPage and not have a Back button
Navigation.PushModalAsync(new AnotherPage()); 

// to go back one step on the navigation stack
Navigation.PopAsync();

Schieben Sie eine neue Seite auf den Stapel und entfernen Sie die aktuelle Seite. Dies führt zu einem Wechsel.

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

Sie müssen sich zuerst auf einer Navigationsseite befinden:

MainPage = NavigationPage(new FirstPage());

Das Wechseln von Inhalten ist nicht ideal, da Sie nur eine große Seite und eine Reihe von Seitenereignissen wie OnAppearing ect haben.

Wenn Sie nicht zur vorherigen Seite wechseln möchten, dh den Benutzer nach Abschluss der Autorisierung nicht zum Anmeldebildschirm zurückkehren lassen möchten, können Sie Folgendes verwenden:

 App.Current.MainPage = new HomePage();

Wenn Sie die Back-Funktionalität aktivieren möchten, verwenden Sie einfach

Navigation.PushModalAsync(new HomePage())

Dieser Thread scheint sehr beliebt zu sein und es wird traurig sein, hier nicht zu erwähnen, dass es einen alternativen Weg gibt - ViewModel First Navigation. Die meisten MVVM-Frameworks verwenden es. Wenn Sie jedoch verstehen möchten, worum es geht, lesen Sie weiter.

Die gesamte offizielle Xamarin.Forms-Dokumentation zeigt eine einfache, aber etwas nicht MVVM-reine Lösung. Das liegt daran, dass die Page(Ansicht) nichts über die wissen sollte ViewModelund umgekehrt. Hier ist ein gutes Beispiel für diesen Verstoß:

// 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>

Wenn Sie eine 2-seitige Anwendung haben, ist dieser Ansatz möglicherweise gut für Sie. Wenn Sie jedoch an einer Lösung für große Unternehmen arbeiten, sollten Sie einen ViewModel First NavigationAnsatz wählen. Es ist ein etwas komplizierterer, aber viel saubererer Ansatz, mit dem Sie ViewModelszwischen Pages(Ansichten) navigieren können . Einer der Vorteile neben der klaren Trennung von Bedenken besteht darin, dass Sie problemlos Parameter an den nächsten übergeben ViewModeloder direkt nach der Navigation einen asynchronen Initialisierungscode ausführen können. Nun zu den Details.

(Ich werde versuchen, alle Codebeispiele so weit wie möglich zu vereinfachen).

1. Zunächst benötigen wir einen Ort, an dem wir alle unsere Objekte registrieren und optional ihre Lebensdauer definieren können. Für diese Angelegenheit können wir einen IOC-Container verwenden, Sie können selbst einen auswählen. In diesem Beispiel verwende ich Autofac (es ist eines der schnellsten verfügbaren). Wir können einen Verweis darauf behalten, Appdamit er global verfügbar ist (keine gute Idee, aber zur Vereinfachung erforderlich):

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.Wir benötigen ein Objekt, das für das Abrufen einer Page(Ansicht) für ein bestimmtes Objekt verantwortlich ist, ViewModelund umgekehrt. Der zweite Fall kann hilfreich sein, wenn Sie die Stamm- / Hauptseite der App festlegen. Dafür sollten wir uns auf eine einfache Konvention einigen, dass sich alle ViewModelsim ViewModelsVerzeichnis und Pages(Ansichten) im ViewsVerzeichnis befinden sollten. Mit anderen Worten, ViewModelssollte im [MyApp].ViewModelsNamespace und Pages(Ansichten) im [MyApp].ViewsNamespace leben. Darüber hinaus sollten wir uns einig sein, dass WelcomeView(Seite) ein WelcomeViewModelund usw. haben sollte . Hier ist ein Codebeispiel für einen Mapper:

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.Für den Fall des Einstellens einer Stammseite benötigen wir eine Art ViewModelLocator, die BindingContextautomatisch Folgendes festlegt :

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. Schließlich werden wir einen Ansatz brauchen NavigationService, der den ViewModel First NavigationAnsatz unterstützt:

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);
    }
}

Wie Sie vielleicht sehen, gibt es eine BaseViewModelabstrakte Basisklasse für alle, in ViewModelsdenen Sie InitializeAsyncsolche Methoden definieren können , die direkt nach der Navigation ausgeführt werden. Und hier ist ein Beispiel für die 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>());
    }
}

Wie Sie verstehen, ist dieser Ansatz komplizierter, schwieriger zu debuggen und möglicherweise verwirrend. Es gibt jedoch viele Vorteile und Sie müssen es nicht selbst implementieren, da die meisten MVVM-Frameworks es sofort unterstützen. Das hier gezeigte Codebeispiel ist auf github verfügbar .

Es gibt viele gute Artikel zum Thema ViewModel First NavigationAnsatz und es gibt ein kostenloses Enterprise Application Patterns mit Xamarin.Forms eBook, in dem dieses und viele andere interessante Themen ausführlich erläutert werden.

Mit der PushAsync () -Methode können Sie Push und PopModalAsync () können Sie Seiten zum und vom Navigationsstapel platzieren. In meinem Codebeispiel unten habe ich eine Navigationsseite (Stammseite) und von dieser Seite aus schiebe ich eine Inhaltsseite, die eine Anmeldeseite ist. Sobald ich mit meiner Anmeldeseite fertig bin, kehre ich zur Stammseite zurück

~~~ Die Navigation kann als letzter Stapel von Seitenobjekten betrachtet werden. Um von einer Seite zur nächsten zu wechseln, schiebt eine Anwendung eine neue Seite auf diesen Stapel. Um zur vorherigen Seite zurückzukehren, fügt die Anwendung die aktuelle Seite vom Stapel ab. Diese Navigation in Xamarin.Forms wird von der INavigation-Oberfläche ausgeführt

Xamarin.Forms verfügt über eine NavigationPage-Klasse, die diese Schnittstelle implementiert und den Seitenstapel verwaltet. Die NavigationPage-Klasse fügt außerdem eine Navigationsleiste am oberen Bildschirmrand hinzu, in der ein Titel angezeigt wird, und verfügt über eine plattformgerechte Schaltfläche "Zurück", die zur vorherigen Seite zurückkehrt. Der folgende Code zeigt, wie eine Navigationsseite um die erste Seite einer Anwendung gewickelt wird:

Weitere Informationen zu Xamarin Forms finden Sie im Abschnitt Navigation: Ein Verweis auf den oben aufgeführten Inhalt und ein Link, den Sie überprüfen sollten:

http://developer.xamarin.com/guides/cross-platform/xamarin-forms/introduction-to-xamarin-forms/

~~~

public class MainActivity : AndroidActivity
{
    protected override void OnCreate(Bundle bundle)
    {
        base.OnCreate(bundle);

        Xamarin.Forms.Forms.Init(this, bundle);
        // Set our view from the "main" layout resource
        SetPage(BuildView());
    }

    static Page BuildView()
    {
        var mainNav = new NavigationPage(new RootPage());
        return mainNav;
    }
}


public class RootPage : ContentPage
{
    async void ShowLoginDialog()
    {
        var page = new LoginPage();

        await Navigation.PushModalAsync(page);
    }
}

// Code der Einfachheit halber entfernt, nur der Pop wird angezeigt

private async void AuthenticationResult(bool isValid)
{
    await navigation.PopModalAsync();
}

Navigation von einer Seite zur anderen Seite in Xamarin.forms mithilfe der Navigationseigenschaft Unter dem Beispielcode

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());
        }

So navigieren Sie von einer Seite zu einer anderen Seite mit der Ansichtszelle unter dem Code Xamrian.forms

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

Beispiel wie unten

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);
        }

    }

Anruf:

((App)App.Current).ChangeScreen(new Map());

Erstellen Sie diese Methode in App.xaml.cs:

public void ChangeScreen(Page page)
{
     MainPage = page;
}

In App.Xaml.Cs:

MainPage = new NavigationPage( new YourPage());

Wenn Sie von YourPage zur nächsten Seite navigieren möchten, tun Sie Folgendes:

await Navigation.PushAsync(new YourSecondPage());

Weitere Informationen zur Navigation mit Xamarin Forms finden Sie hier: https://docs.microsoft.com/en-us/xamarin/xamarin-forms/app-fundamentals/navigation/hierarchical

Microsoft hat ziemlich gute Dokumente dazu.

Es gibt auch das neuere Konzept der Shell. Es ermöglicht eine neue Art der Strukturierung Ihrer Anwendung und vereinfacht in einigen Fällen die Navigation.

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

Video zu den Grundlagen von Shell: https://www.youtube.com/watch?v=0y1bUAcOjZY&t=3112s

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

XAML-Seite fügen Sie dies hinzu

<ContentPage.ToolbarItems>
            <ToolbarItem Text="Next" Order="Primary"
            Activated="Handle_Activated"/>

</ContentPage.ToolbarItems>   

auf der CS-Seite

 async void Handle_Activated(object sender, System.EventArgs e)
        {
            await App.Navigator.PushAsync(new PAGE());
        }

Nach PushAsyncVerwendung PopAsync(mit this) zum Entfernen der aktuellen Seite.

await Navigation.PushAsync(new YourSecondPage());
this.Navigation.PopAsync(this);

In Xamarin haben wir eine Seite namens NavigationPage. Es enthält einen Stapel von ContentPages. NavigationPage verfügt über Methoden wie PushAsync () und PopAsync (). PushAsync fügt eine Seite oben im Stapel hinzu. Zu diesem Zeitpunkt wird diese Seitenseite zur aktuell aktiven Seite. Die PopAsync () -Methode entfernt die Seite vom oberen Rand des Stapels.

In App.Xaml.Cs können wir wie einstellen.

MainPage = neue Navigationsseite (neue YourPage ());

warte auf Navigation.PushAsync (new newPage ()); Diese Methode fügt newPage oben im Stapel hinzu. Zu diesem Zeitpunkt ist nePage derzeit aktiv.