Xamarin.Forms의 TabbbedPage에서, 탭의 전이를 Command(Button 등)로 하는 방법.

5613 단어 XamarinXamarin.Forms

개요



Xamarin.Forms의 TabbbedPage (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)의 내용도 기본적으로 상기와 동일하므로 생략합니다.

출처



여기 의 포럼 게시물을 참고했습니다.

좋은 웹페이지 즐겨찾기