Xamarin 表单：TabbedPage 中的 ContentPages

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:

Page 1

<?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="MyApp.Pages.Page1">
<Label Text="Page 1" VerticalOptions="Center" HorizontalOptions="Center" />
</ContentPage>

Page 2 exactly the same. The Tabbed Page:

<?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="MyApp.Pages.Navigation">
    <ContentPage x:Class="MyApp.Pages.Page1" Title="Home">
    </ContentPage>
    <ContentPage x:Class="MyApp.Pages.Page2" Title="Browse">
    </ContentPage>
</TabbedPage>

The Pages just won't show up? How can I do this properly?

Answer 1

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" });
    }
}

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 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>