Xamarin.FormsのTabbedPage + NavigationPageにMasterDetailPageでメニュー表示

各タブの内容が NavigationPage になっている TabbedPage に MasterDetailPage でメニューを表示させてみます。

コード

XAML

<?xml version="1.0" encoding="UTF-8"?>
<MasterDetailPage
    xmlns="http://xamarin.com/schemas/2014/forms"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:vm="clr-namespace:MyApp.Views"
    x:Class="MyApp.Views.MainPage">

    <MasterDetailPage.Master>
        <ContentPage Title="Master" BackgroundColor="Gray" Icon="menu.png">
            <Label Text="メニュー予定地" TextColor="White" VerticalOptions="Center" HorizontalOptions="Center" />
        </ContentPage>
    </MasterDetailPage.Master>

    <MasterDetailPage.Detail>
        <TabbedPage>
            <TabbedPage.Children>
                
                <NavigationPage Title="その1">
                    <x:Arguments>
                        <ContentPage Title="タブその1">
                            <Label Text="タブその1" VerticalOptions="Center" HorizontalOptions="Center" />
                        </ContentPage>
                    </x:Arguments>
                </NavigationPage>

                <NavigationPage Title="その2">
                    <x:Arguments>
                        <ContentPage Title="タブその2">
                            <Label Text="タブその2" VerticalOptions="Center" HorizontalOptions="Center" />
                        </ContentPage>
                    </x:Arguments>
                </NavigationPage>

            </TabbedPage.Children>
        </TabbedPage>
    </MasterDetailPage.Detail>
    
</MasterDetailPage>

コードビハインド

using Xamarin.Forms;

namespace MyApp.Views
{
    public partial class MainPage : MasterDetailPage
    {
        public MainPage()
        {
            InitializeComponent();
        }
    }
}

結果

タブごと右にズレてくれました。

MasterDetailPage.Detail の直下に NavigationPage を配置する必要があるのかな？と思いきや、
TabbedPage の中に配置した NavigationPage のナビゲーションバーからも Master が呼び出される模様。
NavigationPage の中に TabbedPage を配置するのは推奨されないらしいので助かります。

とりあえずは以上です。