2
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

ViewModelからNavigationPageの画面遷移できたのでメモ

Last updated at Posted at 2017-07-02

ググって出てくるのは大体コードビハインドからNavigation.PushAsyncする方法。
その場合、遷移前にごちゃごちゃした処理がある場合もコードビハインドに書くってことになるの?それってどうなの?
って感じだったのでViewModelから遷移させる方法を考えてみました。

とは言ってもものすごく簡単なので何か落とし穴がありそう。。。

MainPageViewModel.cs
public class MainPageViewModel
{
    private INavigation navigation;

    public MainPageViewModel(INavigation nav)
    {
        this.navigation = nav;
        this.ScreenTracitionCommand = new Command(() => ScreenTracition());
    }

    public ICommand ScreenTracitionCommand { get; }
    private void ScreenTracition()
    {
        if(this.navigation != null)
        {
            navigation.PushAsync(new NextPage());
        }
    }
}

ViewModelのコンストラクタでNavigationを受け取って変数に保持しておいて画面遷移を実行するイベントでNavigation.PushAsyncするというもの。
この方法で画面遷移と戻るボタンで戻ることはできました。

他のソースはこんな感じになってます。

App.xaml.cs
public App ()
{
	InitializeComponent();

	MainPage = new NavigationPage(new XF_NavigationPage.MainPage());
}

NavigationPageとして扱うので包んであげます。

MainPage.xaml
<StackLayout Spacing="20" Padding="15">
    <Button Text="ViewModelから画面遷移" Command="{Binding ScreenTracitionCommand}"/>
    <Button Text="xaml.csから画面遷移" Clicked="Button_Clicked"/>
</StackLayout>

ScreenTracitionCommandはViewModel側で画面遷移させるためのイベントです。
参考までにButton_Clickedでコードビハインドからの画面遷移も実装しました。

MainPage.xaml.cs
public partial class MainPage : ContentPage
{
    public MainPage()
    {
        InitializeComponent();
        this.BindingContext = new MainPageViewModel(Navigation);
    }

    private void Button_Clicked(object sender, EventArgs e)
    {
        Navigation.PushAsync(new NextPage());
    }
}

BindingContextにMainPageViewModelを設定する際、引数にNavigationを渡してあげます。
Button_Clickedはコードビハインドから画面遷移する場合のイベントです。

NextPageはVisualStudioでContentPageを追加したときのデフォルトの状態なので割愛します。

そういえば「空白のページ」を追加すると「InitializeComponentが見つかりません」のエラーが取れませんでした。(「Content Page」を追加で回避)
このエラーが出るとXamarinのバグなのかコーディングミスか分からなくなるのでMSさんには早く治してほしいです。

2
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?