とりあえず MVVM 基盤が整ってきたので次は画面遷移を何とかしたい
できる限り Xamarin.Forms でがんばりたいので、Xamarin.Forms の Navigation について調べてみると VisualElement.Navigation というプロパティが用意されていました
Push や Pop などのメソッドがあるので、TabbedPage や MasterDetail みたいな状態遷移のような画面遷移ではなくいわゆる画面が切り替わる画面遷移に利用すると予想
ただどの Page などにも Navigation プロパティはあるみたいなので動作を確かめるために実験
こんな感じでトップ画面、最初の画面、二番目の画面をそれぞれ TopPage.xaml、FirstPage.xaml、SecondPage.xaml で作りました
<?xml version="1.0" encoding="utf-8" ?> <CarouselPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" xmlns:view="clr-namespace:PrismXamarin.Views;assembly=PrismXamarin" x:Class="PrismXamarin.Views.TopPage"> <CarouselPage.Children> <view:FirstPage/> <view:SecondPage/> </CarouselPage.Children> </CarouselPage>
TopPage はメリーゴーランドのような遷移をする CarouselPage にして FirstPage と SecondPage を子に持ちます
<?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="PrismXamarin.Views.FirstPage"> <StackLayout VerticalOptions="Center" Spacing="20"> <Label Text="First" HorizontalOptions="Center" /> <Button Text="To Second" Clicked="OnClicked"/> </StackLayout> </ContentPage>
これは xaml
/// <summary> /// 最初の画面 /// </summary> public partial class FirstPage : ContentPage { /// <summary> /// コンストラクタ /// </summary> public FirstPage() { this.InitializeComponent(); } /// <summary> /// ボタンクリックイベントハンドラ /// </summary> /// <param name="sender">イベント発行者</param> /// <param name="e">イベント引数</param> private void OnClicked(object sender, EventArgs e) { this.ParentView.Navigation.PushAsync(new SecondPage()); } }
FirstPage は Label と Button があって、Button を押すと画面遷移する単純なつくり
<?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="PrismXamarin.Views.SecondPage"> <StackLayout VerticalOptions="Center" Spacing="20"> <Label Text="Second" HorizontalOptions="Center" /> <Button Text="To First" Clicked="OnClicked"/> </StackLayout> </ContentPage>
同様に xaml
/// <summary> /// 二番目の画面 /// </summary> public partial class SecondPage : ContentPage { /// <summary> /// コンストラクタ /// </summary> public SecondPage() { this.InitializeComponent(); } /// <summary> /// ボタンクリックイベントハンドラ /// </summary> /// <param name="sender">イベント発行者</param> /// <param name="e">イベント引数</param> private void OnClicked(object sender, EventArgs e) { this.ParentView.Navigation.PopAsync(); } }
SecondPage も似たようなつくりで、これで実行してみると
コンパイルは通り、起動できました! そして「To Second」のボタンをタップすると
エラーで停止!!やはり NavigationPage でないとだめだそうです・・・
じゃあなんで NavigationPage 以外にも Navigation プロパティがあるのでしょうか?!