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

  • 9
    いいね
  • 0
    コメント
この記事は最終更新日から1年以上が経過しています。

概要

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)の中身も基本的に上記と同様なので省略します。

出処

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