Edited at

Xamarin.FormsのTabbedPageで、タブの遷移をCommand(Button等)でする方法。

More than 1 year has passed since last update.


概要

Xamarin.FormsのTabbedPage(UIをXAMLで書いている場合)にCommand(Button等)でタブを遷移する方法です。

なかなかやり方が見つからず困ったので、こちらに記載しておきます。

これができると「ボタンを押して何かの処理をして、そのまま別のタブに切り替える。」

といったことができるので、便利かなと思います。

サンプル (GitHub)

下記のサンプルは、このような挙動をするものです。

サンプルの挙動


サンプルソース

説明するよりもサンプルを見ていただいた方が早そうなので、ソースを貼っておきます。


MainPage.xaml


MainPage.xaml

<?xml version="1.0" encoding="UTF-8"?>

<TabbedPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:SwitchingTabs;assembly=SwitchingTabs"
x:Class="SwitchingTabs.MainPage"
Title="タブのページ">
<TabbedPage.Children>
<local:Tab1 />
<local:Tab2 />
</TabbedPage.Children>
</TabbedPage>


Tab1.xaml

ButtonのCommandParameterを{x:Reference 当該ページのx:name}とします。

ここでは、x:Name="Tab1" なのでTab1 と記載しています。


Tab1.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="SwitchingTabs.Tab1"
x:Name="Tab1"
Title="Tab1">
<ContentPage.Content>
<StackLayout>
<Button Text="Tab2へ移動" Command="{Binding GoToTab2}" CommandParameter="{x:Reference Tab1}" />
</StackLayout>
</ContentPage.Content>
</ContentPage>


Tab1ViewModel.cs

下記のように記載すると、GoToTab2メソッドでTab2(二つ目のタブ)に遷移できます。

ParentPage.Children[1]; ここの[]内が遷移先の各タブを示します。

(0始まりなので、一つ目のタブへの遷移はここが[0]となります。


Tab1ViewModel.cs

using System.Windows.Input;

using Xamarin.Forms;

namespace SwitchingTabs
{
public class Tab1ViewModel
{
public ICommand GoToTab2 { get; set; }

public Tab1ViewModel()
{
GoToTab2 = new Command((PageName) =>
{
var Page = PageName as Tab1;
var ParentPage = Page.Parent as TabbedPage;
ParentPage.CurrentPage = ParentPage.Children[1];
});
}
}
}


※2番目のタブ(Tab2)の中身も基本的に上記と同様なので省略します。


出処

こちらのフォーラムの投稿を参考にしました。