Xamarin.Forms で画面遷移をさせる方法

画面遷移３つの方法

ページを入れ替える
PushModalAsync
PushAsync

PushAsync での画面遷移を記載する。

ボタンを作る

MainPage.xaml に次の画面に行くボタンを足す

        <StackLayout>
            <Button x:Name="NextButton" Text="Next Page!" />
        </StackLayout>

MainPage.xaml.cs にボタンの動作を記述する。

    public partial class MainPage : ContentPage
    {
        public MainPage()
        {
            InitializeComponent();

            NextButton.Clicked += Nextbutton_Clicked;

            /* ナビゲーション画面として表示
             * チップス：ナビゲーションバーをページ毎に消すこともできる
             */
            NavigationPage.SetHasNavigationBar(this, false);
        }

        private void Nextbutton_Clicked(object sender, EventArgs e)
        {
            /* 
             * ナビゲーション画面として表示
             * 実装方法：App.xaml.cs の MainPage() の生成方法をNavigationで生成する
             * メリット：画面を「戻る」ボタンで戻ることができる
             * チップス：ナビゲーションバーをページ毎に消すこともできる
             * 　　　　　MainPage のナビゲーションを消している。MainPage() を参照すること。
             */
            Navigation.PushAsync(new Pages.GridPage());

        }
    }

初期起動する画面を指定する

App.xaml.cs に、初期起動する画面を設定する。

        public App()
        {
            InitializeComponent();

            /* 
             * Navigation のタイトルバーのプロパティを変更する
             */
            var navigationBar = new NavigationPage(new MainPage());
            navigationBar.BarBackgroundColor = Color.DeepSkyBlue;
            navigationBar.BarTextColor = Color.DarkGreen;
            MainPage = navigationBar;
        }

開かれた画面に戻るボタンをつける

ナビゲーションバーにタイトルを表示する

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="SampleXamarin.Pages.GridPage"
             Title="Navigationのタイトル文字列">
</ContentPage>

同じファイルに、ボタンを追加する

    <Grid RowSpacing="0" ColumnSpacing="0">
        <Grid.RowDefinitions>
            <RowDefinition Height="100" />
            <RowDefinition Height="Auto" />
            <RowDefinition Height="50" />
        </Grid.RowDefinitions>

        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="100" />
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition Width="1*" />
            <ColumnDefinition Width="2*" />
            <ColumnDefinition Width="Auto" />
        </Grid.ColumnDefinitions>

        <Label Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2" Text="AAA" BackgroundColor="Red" />
        <Label Grid.Row="1" Grid.Column="1" Text="AAAAAAAAAAAA" BackgroundColor="Green" />
        <Label Grid.Row="1" Grid.Column="2" Text="AAA" BackgroundColor="Blue" />
        <Label Grid.Row="1" Grid.Column="3" Text="AAA" BackgroundColor="Gray" />
        <Label Grid.Row="1" Grid.Column="4" Text="AAA" BackgroundColor="LightBlue" />

        <Button x:Name="BackPageButton"
                Grid.Row="2" Grid.Column="0" Grid.ColumnSpan="5" Text="Back Page" />
    </Grid>

ボタンの制御を追加する。

namespace SampleXamarin.Pages
{
    [XamlCompilation(XamlCompilationOptions.Compile)]
    public partial class GridPage : ContentPage
    {
        public GridPage()
        {
            InitializeComponent();
            BackPageButton.Clicked += BackPageButton_Clicked;
        }

        private void BackPageButton_Clicked(object sender, EventArgs e)
        {
            Navigation.PopAsync();
        }
    }
}