~楓花雪岳~: [XF] NavigationPage 簡易練習

星期四, 4月 19, 2018

[XF] NavigationPage 簡易練習

NavigationPage 基礎操作，會進行下列操作

在 App.xaml 內設定使用 NavigationPage
設定 Title
跳到下一頁 - PushAsync
回上一頁 - PopAsync
回到首頁 - PopToRootAsync
換頁動畫 - 預設值為 true

App.xaml.cs

using Xamarin.Forms;

namespace NaviBase
{
    public partial class App : Application
    {
        public App()
        {
            InitializeComponent();

            MainPage = new NavigationPage(new Page1());
        }

        protected override void OnStart()
        {
            // Handle when your app starts
        }

        protected override void OnSleep()
        {
            // Handle when your app sleeps
        }

        protected override void OnResume()
        {
            // Handle when your app resumes
        }
    }
}

Page1.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"
             xmlns:local="clr-namespace:NaviBase"
             x:Class="NaviBase.Page1"
             Title="第一頁">
    
    <ContentPage.Content>
        <StackLayout>
            <Button x:Name="P1GoNext" Text="到第二頁" Clicked="P1GoNext_Clicked"></Button>
        </StackLayout>
    </ContentPage.Content>
</ContentPage>

Page1.xaml.cs

namespace NaviBase
{
    [XamlCompilation(XamlCompilationOptions.Compile)]
    public partial class Page1 : ContentPage
    {
        public Page1()
        {
            InitializeComponent();
        }

        private async void P1GoNext_Clicked(object sender, EventArgs e)
        {
            // 到第二頁去，設定第二參數沒有換頁動畫
            await this.Navigation.PushAsync(new Page2(),false);
        }
    }
}

Page2.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="NaviBase.Page2"
             Title="第二頁">
    <ContentPage.Content>
        <StackLayout>
            <Button x:Name="P2GoPre" Text="到第一頁" Clicked="P2GoPre_Clicked"></Button>
            <Button x:Name="P2GoNext" Text="到第三頁" Clicked="P2GoNext_Clicked"></Button>
        </StackLayout>
    </ContentPage.Content>
</ContentPage>

Page2.xaml.cs

using Xamarin.Forms;
using Xamarin.Forms.Xaml;

namespace NaviBase
{
    [XamlCompilation(XamlCompilationOptions.Compile)]
    public partial class Page2 : ContentPage
    {
        public Page2()
        {
            InitializeComponent();
        }

        private async void P2GoPre_Clicked(object sender, EventArgs e)
        {
            // 會自動回到上一頁去
            await this.Navigation.PopAsync();
        }

        private async void P2GoNext_Clicked(object sender, EventArgs e)
        {
            // 到第三頁去，設定第二參數會有換頁動畫，此為預設值
            await this.Navigation.PushAsync(new Page3(), true);
        }
    }
}

Page3.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="NaviBase.Page3"
             Title="第三頁">
    <ContentPage.Content>
        <StackLayout>
            <Button x:Name="P3GoHead" Text="到第一頁" Clicked="P3GoHead_Clicked"></Button>
        </StackLayout>
    </ContentPage.Content>
</ContentPage>

Page3.xaml.cs

using Xamarin.Forms;
using Xamarin.Forms.Xaml;

namespace NaviBase
{
    [XamlCompilation(XamlCompilationOptions.Compile)]
    public partial class Page3 : ContentPage
    {
        public Page3()
        {
            InitializeComponent();
        }

        private async void P3GoHead_Clicked(object sender, EventArgs e)
        {
            await this.Navigation.PopToRootAsync();
        }
    }
}