Bagaimana Anda mengganti halaman di Xamarin.Forms?

Bagaimana Anda beralih antar halaman dalam Formulir Xamarin?

Halaman utama saya adalah ContentPage dan saya tidak ingin beralih ke sesuatu seperti Halaman Tab.

Saya dapat melakukan pseudo-melakukannya dengan menemukan orang tua dari kontrol yang harus memicu halaman baru sampai saya menemukan ContentPage dan kemudian menukar Konten dengan kontrol untuk halaman baru. Tapi ini sepertinya sangat ceroboh.

Xamarin.Forms mendukung beberapa host navigasi built-in:

• NavigationPage, di mana halaman berikutnya meluncur masuk,
• TabbedPage, yang tidak Anda sukai
• CarouselPage, yang memungkinkan untuk beralih dari kiri dan kanan ke halaman berikutnya / sebelumnya.

Di atas ini, semua halaman juga mendukung PushModalAsync()yang hanya mendorong halaman baru di atas yang sudah ada.

Pada akhirnya, jika Anda ingin memastikan pengguna tidak dapat kembali ke halaman sebelumnya (menggunakan isyarat atau tombol perangkat keras belakang), Anda dapat tetap menampilkan yang sama Pagedan menggantinya.Content .

Opsi yang disarankan untuk mengganti halaman root juga berfungsi, tetapi Anda harus menanganinya secara berbeda untuk setiap platform.

Di kelas App, Anda dapat menyetel MainPage ke Halaman Navigasi dan menyetel halaman root ke ContentPage:

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

Kemudian di panggilan ContentPage pertama Anda:

Navigation.PushAsync (new SecondContentPage ());

Jika proyek Anda telah disiapkan sebagai proyek formulir PCL (dan sangat mungkin sebagai Formulir Bersama juga tetapi saya belum mencobanya) ada kelas App.cs yang terlihat seperti ini:

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

Anda dapat memodifikasi file GetMainPage metode untuk mengembalikan TabbedPaged baru atau halaman lain yang telah Anda tetapkan dalam proyek

Dari sana Anda dapat menambahkan perintah atau penangan kejadian untuk mengeksekusi kode dan melakukan

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

Dorong halaman baru ke tumpukan, lalu hapus halaman saat ini. Ini menghasilkan peralihan.

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

Anda harus berada di Halaman Navigasi terlebih dahulu:

MainPage = NavigationPage(new FirstPage());

Mengalihkan konten tidak ideal karena Anda hanya memiliki satu halaman besar dan satu rangkaian acara halaman seperti OnAppearing ect.

Jika Anda tidak ingin membuka halaman sebelumnya yaitu jangan biarkan pengguna kembali ke layar login setelah otorisasi selesai, maka Anda dapat menggunakan;

 App.Current.MainPage = new HomePage();

Jika Anda ingin mengaktifkan fungsionalitas kembali, gunakan saja

Navigation.PushModalAsync(new HomePage())

Sepertinya utas ini sangat populer dan akan menyedihkan untuk tidak menyebutkan di sini bahwa ada cara alternatif - ViewModel First Navigation . Sebagian besar kerangka kerja MVVM di luar sana menggunakannya, namun jika Anda ingin memahami tentang apa itu, lanjutkan membaca.

Semua dokumentasi resmi Xamarin.Forms mendemonstrasikan solusi murni MVVM yang sederhana, namun sedikit tidak. Itu karena Page(View) seharusnya tidak tahu apa-apa tentang the ViewModeldan sebaliknya. Berikut adalah contoh bagus dari pelanggaran ini:

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

Jika Anda memiliki aplikasi 2 halaman, pendekatan ini mungkin baik untuk Anda. Namun jika Anda bekerja pada solusi perusahaan besar, Anda lebih baik menggunakan ViewModel First Navigationpendekatan. Ini sedikit lebih rumit tetapi pendekatan yang jauh lebih bersih yang memungkinkan Anda untuk menavigasi di antara ViewModelsalih-alih navigasi di antara Pages(Tampilan). Salah satu keuntungan di samping pemisahan perhatian yang jelas adalah Anda dapat dengan mudah meneruskan parameter ke parameter berikutnya ViewModelatau menjalankan kode inisialisasi asinkron tepat setelah navigasi. Sekarang untuk detailnya.

(Saya akan mencoba menyederhanakan semua contoh kode sebanyak mungkin).

1. Pertama-tama kita membutuhkan tempat di mana kita bisa mendaftarkan semua objek kita dan secara opsional menentukan masa pakainya. Untuk masalah ini kita dapat menggunakan container IOC, Anda dapat memilihnya sendiri. Dalam contoh ini saya akan menggunakan Autofac (ini adalah salah satu yang tercepat yang tersedia). Kami dapat menyimpan referensi tentangnya Appagar tersedia secara global (bukan ide yang baik, tetapi diperlukan untuk penyederhanaan):

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. Kita akan membutuhkan objek yang bertanggung jawab untuk mengambil Page(View) untuk spesifik ViewModeldan sebaliknya. Kasus kedua mungkin berguna dalam kasus pengaturan root / halaman utama aplikasi. Untuk itu kita harus menyetujui konvensi sederhana bahwa semua ViewModelsharus ada di ViewModelsdirektori dan Pages(Views) harus ada di Viewsdirektori. Dengan kata lain ViewModelsharus hidup di [MyApp].ViewModelsnamespace dan Pages(Views) di [MyApp].Viewsnamespace. Selain itu, kita harus setuju bahwa WelcomeView(Halaman) harus memiliki WelcomeViewModeldan dll. Berikut adalah contoh kode 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. Untuk kasus pengaturan halaman root kita memerlukan semacam ViewModelLocatoryang akan mengatur BindingContextsecara otomatis:

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. Akhirnya kita membutuhkan pendekatan NavigationServiceyang akan mendukung ViewModel First Navigation:

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

Seperti yang Anda lihat, ada BaseViewModel- kelas dasar abstrak untuk semua ViewModelstempat Anda dapat mendefinisikan metode seperti InitializeAsyncitu yang akan dieksekusi tepat setelah navigasi. Dan berikut adalah contoh navigasi:

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

Seperti yang Anda pahami, pendekatan ini lebih rumit, lebih sulit untuk di-debug, dan mungkin membingungkan. Namun ada banyak keuntungan plus Anda sebenarnya tidak harus menerapkannya sendiri karena sebagian besar kerangka kerja MVVM mendukungnya di luar kotak. Contoh kode yang ditunjukkan di sini tersedia di github .

Ada banyak artikel bagus tentang ViewModel First Navigationpendekatan dan ada Pola Aplikasi Perusahaan gratis menggunakan eBook Xamarin.Forms yang menjelaskan hal ini dan banyak topik menarik lainnya secara rinci.

Dengan menggunakan metode PushAsync () Anda dapat mendorong dan PopModalAsync () Anda dapat memunculkan halaman ke dan dari tumpukan navigasi. Dalam contoh kode saya di bawah ini, saya memiliki halaman Navigasi (Halaman Root) dan dari halaman ini saya mendorong halaman konten yang merupakan halaman login setelah saya selesai dengan halaman login saya, saya kembali ke halaman root

~~~ Navigasi dapat dianggap sebagai tumpukan objek Halaman yang terakhir masuk, keluar pertama. Untuk berpindah dari satu halaman ke halaman lain, aplikasi akan mendorong halaman baru ke tumpukan ini. Untuk kembali ke halaman sebelumnya, aplikasi akan memunculkan halaman saat ini dari tumpukan. Navigasi di Xamarin.Forms ini ditangani oleh antarmuka INavigation

Xamarin.Forms memiliki kelas NavigationPage yang mengimplementasikan antarmuka ini dan akan mengelola tumpukan Halaman. Kelas NavigationPage juga akan menambahkan bilah navigasi ke bagian atas layar yang menampilkan judul dan juga akan memiliki platform tombol Kembali yang sesuai yang akan kembali ke halaman sebelumnya. Kode berikut menunjukkan cara membungkus NavigationPage di sekitar halaman pertama dalam aplikasi:

Referensi ke konten yang tercantum di atas dan tautan yang harus Anda tinjau untuk informasi lebih lanjut tentang Formulir Xamarin, lihat bagian Navigasi:

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

// Kode yang dihapus untuk kesederhanaan hanya pop yang ditampilkan

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

Navigasi satu halaman ke halaman lain di Xamarin.forms menggunakan properti Navigasi Di bawah kode sampel

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

Untuk menavigasi satu halaman ke halaman lain dengan dalam sel tampilan Di bawah kode Xamrian.forms

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

Contohnya seperti di bawah ini

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

    }

Panggilan:

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

Buat metode ini di dalam App.xaml.cs:

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

In App.Xaml.Cs:

MainPage = new NavigationPage( new YourPage());

Ketika Anda ingin menavigasi dari YourPage ke halaman berikutnya, Anda melakukannya:

await Navigation.PushAsync(new YourSecondPage());

Anda dapat membaca lebih lanjut tentang navigasi Formulir Xamarin di sini: https://docs.microsoft.com/en-us/xamarin/xamarin-forms/app-fundamentals/navigation/hierarchical

Microsoft memiliki dokumen yang cukup bagus tentang ini.

Ada juga konsep yang lebih baru dari Shell. Ini memungkinkan cara baru untuk menyusun aplikasi Anda dan menyederhanakan navigasi dalam beberapa kasus.

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

Video tentang dasar-dasar Shell: https://www.youtube.com/watch?v=0y1bUAcOjZY&t=3112s

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

Halaman XAML menambahkan ini

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

</ContentPage.ToolbarItems>   

di halaman CS

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

Setelah PushAsyncdigunakan PopAsync(dengan this) untuk menghapus halaman ini.

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

Di Xamarin kami memiliki halaman bernama NavigationPage. Ini menyimpan tumpukan ContentPages. NavigationPage memiliki metode seperti PushAsync () dan PopAsync (). PushAsync menambahkan halaman di bagian atas tumpukan, pada saat itu halaman tersebut akan menjadi halaman yang sedang aktif. Metode PopAsync () menghapus halaman dari atas tumpukan.

Di App.Xaml.Cs kita bisa mengatur like.

MainPage = new NavigationPage (new YourPage ());

menunggu Navigation.PushAsync (newPage ()); metode ini akan menambahkan newPage di bagian atas tumpukan. Saat ini nePage akan menjadi halaman aktif.