読者です 読者をやめる 読者になる 読者になる

しっぽを追いかけて

ぐるぐるしながら考えています

Unity と猫の話題が中心   掲載内容は個人の私見であり、所属組織の見解ではありません

Xamarin.Forms の画面遷移は NavigationPage 必須?!

Windows ランタイムアプリ Xamarin XAML C# iOS

とりあえず MVVM 基盤が整ってきたので次は画面遷移を何とかしたい

できる限り Xamarin.Forms でがんばりたいので、Xamarin.Forms の Navigation について調べてみると VisualElement.Navigation というプロパティが用意されていました

Push や Pop などのメソッドがあるので、TabbedPage や MasterDetail みたいな状態遷移のような画面遷移ではなくいわゆる画面が切り替わる画面遷移に利用すると予想

ただどの Page などにも Navigation プロパティはあるみたいなので動作を確かめるために実験

f:id:matatabi_ux:20141103211824p:plain

こんな感じでトップ画面、最初の画面、二番目の画面をそれぞれ 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 も似たようなつくりで、これで実行してみると

f:id:matatabi_ux:20141103213255p:plain

コンパイルは通り、起動できました! そして「To Second」のボタンをタップすると

f:id:matatabi_ux:20141103213558p:plain

エラーで停止!!やはり NavigationPage でないとだめだそうです・・・

じゃあなんで NavigationPage 以外にも Navigation プロパティがあるのでしょうか?!