How to split TabbedPage ContentPage into different file

Question

I would like to follow SIP (Single Responsibility Principle). I created the below TabbedPage with 3 tabs/Pages respectively (Page1, Page2 and Page3) and it works well.

I'm thinking of spliting each ContentPage onto its own xaml file so that each of its C# file (xaml.cs) file also can handle it's own ContentPage, but at the end they need to behave as a normal tabbedview page of 3 pages.

I'm looking at doing so as each ContentPage has to have many things (code) in it at the end of the day, that's why I'm thinking of separating each ContentPage into a single file from the beginning.

Not sure if it's doable in Xamarin.

<?xml version="1.0" encoding="utf-8" ?>
<TabbedPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="TabbedPageApp.MainPage"
             xmlns:android="clr-namespace:Xamarin.Forms.PlatformConfiguration.AndroidSpecific;assembly=Xamarin.Forms.Core"
             android:TabbedPage.ToolbarPlacement="Bottom">
    
    <!--android:TabbedPage.BarItemColor="Black"
             android:TabbedPage.BarSelectedItemColor="Red">-->
    
    <ContentPage Title="Page 1" IconImageSource="outline_settings_black_24dp.png">
        <ContentPage.Content>
            <StackLayout VerticalOptions="Center" HorizontalOptions="Center">
                <Label Text="Welcome to Xamarin - TabbedPage 1" HorizontalTextAlignment="Center" TextColor="Yellow" FontSize="36"/>

                <Entry x:Name="entryB" />
                
                <Button x:Name="myButtonCancel" Text="Cancel" />
            </StackLayout>
        </ContentPage.Content>
    </ContentPage>
    
    
    <ContentPage Title="Page 2" IconImageSource="outline_add_shopping_cart_black_24dp.png">
        <ContentPage.Content>
            <StackLayout VerticalOptions="Center" HorizontalOptions="Center">
                <Label Text="Welcome to Xamarin - TabbedPage 2" HorizontalTextAlignment="Center" TextColor="Yellow" FontSize="36"/>
            </StackLayout>
        </ContentPage.Content>
    </ContentPage>
    
    
    <ContentPage Title="Page 3" IconImageSource="outline_account_circle_black_24dp.png">
        <ContentPage.Content>
            <StackLayout VerticalOptions="Center" HorizontalOptions="Center">
                <Label Text="Welcome to Xamarin - TabbedPage 3" HorizontalTextAlignment="Center" TextColor="Yellow" FontSize="36"/>
            </StackLayout>
        </ContentPage.Content>
    </ContentPage>
</TabbedPage>

Answer 1

the docs explicitly show how to do this. You just have to declare the namespace that your ContentPage XAML files are in

PageOne, etc are just ContentPage XAML files that you create in your project

<TabbedPage xmlns="http://xamarin.com/schemas/2014/forms"
            xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
            xmlns:local="clr-namespace:TabbedPageWithNavigationPage;assembly=TabbedPageWithNavigationPage"
            x:Class="TabbedPageWithNavigationPage.MainPage">
    <local:PageOne />
    <local:PageTwo />
</TabbedPage>