Xamarin Forms: ContentPages in TabbedPage

Question

I am trying to put some custom Content Pages into a Tabbed Page. Sadly I am not sure, how to do this with the XAML syntax. My dummy project looks like the following:

Answer 1

You are looking for the Children property on the TabbedPage

<TabbedPage xmlns="http://xamarin.com/schemas/2014/forms"
            xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
            x:Class="MyApp.Pages.Navigation">
<TabbedPage.Children>
    <ContentPage Title="Home">
    </ContentPage>
    <ContentPage Title="Browse">
    </ContentPage>
</TabbedPage.Children>
</TabbedPage>

Answer 2

As on date today, it's not necessary to add "Children" property. If your Pages are in another directory say "PagesDirectory". You can reference the content page "Page1" as below, it will work absolutely fine:

 <TabbedPage xmlns="http://xamarin.com/schemas/2014/forms"
         xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
         xmlns:d="http://xamarin.com/schemas/2014/forms/design"
         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:views="clr-namespace:YourApp.Views.PagesDirectory"
         mc:Ignorable="d"
         x:Class="YourApp.Views.TabbedPage"
        Title="Tabbed Page">

<views:Page1 Title="Content Page 1"></views:Page1>
<views:Page2 Title="Content Page 2"></views:Page2>

Answer 3

You are doing it wrong. You must place the pages as the TabbedPage Children.

Here is the solution:

<?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:mypages="clr-namespace:MyApp.Pages;assembly=MyApp"
            x:Class="MyApp.Pages.Navigation">
  <TabbedPage.Children>
    <mypages:Page1 Title="Home"/>
    <mypages:Page2 Title="Browse"/>
  </TabbedPage.Children>
</TabbedPage>

In alternative you can do it programmatically:

public class TabsPage : TabbedPage
{
    public TabsPage ()
    {
        this.Children.Add (new Page1 () { Title = "Home" });
        this.Children.Add (new Page2 () { Title = "Browse" });
    }
}