CODEWITHSUNDEEP
c#xamlmobilexamarinxamarin.forms
kylecorver
kylecorver

Reputation: 459

Xamarin Forms: ContentPages in TabbedPage

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?

Upvotes: 11

Views: 18946

Answers (3)

CloudArch
CloudArch

Reputation: 341

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>

Upvotes: 2

Depechie
Depechie

Reputation: 6142

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>

Upvotes: 0

jzeferino
jzeferino

Reputation: 7850

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

Upvotes: 20

Related Questions