Tabbed Page Inside Master Detail Page Xamarin

Question

I am trying to add a tabbed page as shown in the xamarin documentation but I keep getting the following error, System.NullReferenceException "Object reference not set to an instance of an object." Do I need to declare a new object for each page or is this done automatically when using xaml?

Here is my StackTrace,

  at Xamarin.Forms.Platform.Android.AppCompat.Platform.LayoutRootPage(Xamarin.Forms.P age page, Int32 width, Int32 height) [0x0005d] in   C:\BuildAgent\work\aad494dc9bc9783\Xamarin.Forms.Platform.Android\AppCompat\Plat form.cs:279 
  at Xamarin.Forms.Platform.Android.AppCompat.Platform.Xamarin.Forms.Platform.Android.IPlatformLayout.OnLayout (Boolean changed, Int32 l, Int32 t, Int32 r, Int32 b) [0x00003] in C:\BuildAgent\work\aad494dc9bc9783\Xamarin.Forms.Platform.Android\AppCompat\Platform.cs:196 
  at Xamarin.Forms.Platform.Android.PlatformRenderer.OnLayout (Boolean changed, Int32 l, Int32 t, Int32 r, Int32 b) [0x0000e] in C:\BuildAgent\work\aad494dc9bc9783\Xamarin.Forms.Platform.Android\PlatformRenderer.cs:73 
  at Android.Views.ViewGroup.n_OnLayout_ZIIII (IntPtr jnienv, IntPtr native__this, Boolean changed, Int32 l, Int32 t, Int32 r, Int32 b) [0x00009] in /Users/builder/data/lanes/3415/7db2aac3/source/monodroid/src/Mono.Android/platforms/android-23/src/generated/Android.Views.ViewGroup.cs:3427 
  at (wrapper dynamic-method) System.Object:d59f31f1-b9b6-40ea-9254-a422fe409750 (intptr,intptr,bool,int,int,int,int)

Here is my code,

using Xamarin.Forms;
namespace BSi.Mobile.Events.Views
{
    public partial class MainMasterDetailPage : MasterDetailPage
    {
        public MainMasterDetailPage()
        {
            InitializeComponent();
        }
    }
}

<?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:prism="clr-namespace:Prism.Mvvm;assembly=Prism.Forms"
              xmlns:local="clr-namespace:BSi.Mobile.Events.Views;assembly=BSi.Mobile.Events"
              prism:ViewModelLocator.AutowireViewModel="True"
              x:Class="BSi.Mobile.Events.Views.MainMasterDetailPage">
    <MasterDetailPage.Master>
       <ContentPage Title="Default" Padding="10">
          <StackLayout>
             <Button Text="Home" Command="{Binding MenuSelectedCommand}"  CommandParameter="NavigationPage\MainPage"/>
             <Button Text="Event Schedule" Command="{Binding MenuSelectedCommand}" CommandParameter="NavigationPage\EventPage"/>
             <Button Text="Floor Plan" Command="{Binding MenuSelectedCommand}" CommandParameter="NavigationPage\FloorPlanPage"/>
             <Button Text="Sponsor/Media Partners" Command="{Binding MenuSelectedCommand}" CommandParameter="NavigationPage\SponsorsPage"/>
             <Button Text="Where To Eat" Command="{Binding MenuSelectedCommand}" CommandParameter="NavigationPage\FoodNearbyPage"/>
          </StackLayout>
       </ContentPage>
   </MasterDetailPage.Master>
   <MasterDetailPage.Detail>
       <TabbedPage>
           <TabbedPage.Children>
              <local:MainPage Title="Info" Icon="http://icons.iconarchive.com/icons/graphicloads/100-flat/256/home-icon.png"/>
              <local:EventPage Title="Sessions" Icon="http://icons.iconarchive.com/icons/graphicloads/100-flat/256/home-icon.png"/>
              <local:SpeakersPage Title="Speakers" Icon="http://icons.iconarchive.com/icons/graphicloads/100-flat/256/home-icon.png"/>
              <local:ExhibitsPage Title="Exhibits" Icon="http://icons.iconarchive.com/icons/graphicloads/100-flat/256/home-icon.png"/>
           </TabbedPage.Children>
       </TabbedPage>
   </MasterDetailPage.Detail>
</MasterDetailPage>

---

UPDATE:

I made some changes as suggested by SushiHangover, I now recieve no errors but my tabbed menu is not appearing.

Answer 1

The answer was to use command parameter that is relative to the pages to be displayed in the tabbed page.

<?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:prism="clr-namespace:Prism.Mvvm;assembly=Prism.Forms"
              prism:ViewModelLocator.AutowireViewModel="True"
              x:Class="BSi.Mobile.Events.Views.MainMasterDetailPage">
<MasterDetailPage.Master>
   <ContentPage Title="Default">
     <StackLayout>
       <StackLayout BackgroundColor="{StaticResource iconGray}" Padding="15"      HeightRequest="100">
         <Image Source="canfitpro_logo2" HeightRequest="60" HorizontalOptions="Start" VerticalOptions="EndAndExpand" />
       </StackLayout>
       <TableView Intent="Form" HasUnevenRows="True">
         <TableRoot>
           <TableSection Title="Vancouver Fitness Expo">
             <ViewCell>
              <StackLayout Margin="15, 10, 10, 10" Orientation="Horizontal">
                 <StackLayout.GestureRecognizers>
                   <TapGestureRecognizer Command="{Binding MenuSelectedCommand}" CommandParameter="EventTabbedPage/NavigationPage/MainPage"/>
                 </StackLayout.GestureRecognizers>
                 <Image Source="icon_home_circle" HeightRequest="40"/>
                 <Label Text="Home" VerticalTextAlignment="Center" Margin="20, 0, 0, 0" Style="{DynamicResource SubtitleStyle}"/>
               </StackLayout>
             </ViewCell>
             <ViewCell>
               <StackLayout Margin="15, 10, 10, 10" Orientation="Horizontal">
                 <StackLayout.GestureRecognizers>
                   <TapGestureRecognizer Command="{Binding MenuSelectedCommand}" CommandParameter="EventTabbedPage/NavigationEventPage"/>
                 </StackLayout.GestureRecognizers>
                 <Image Source="icon_sessions_circle" HeightRequest="40"/>
                 <Label Text="Sessions" VerticalTextAlignment="Center" Margin="20, 0, 0, 0" Style="{DynamicResource SubtitleStyle}"/>
               </StackLayout>
             </ViewCell>
           </TableSection>
           <TableSection Title="Resources">
             <ViewCell>
               <StackLayout Margin="15, 10, 10, 10" Orientation="Horizontal">
                 <StackLayout.GestureRecognizers>
                   <TapGestureRecognizer Command="{Binding MenuSelectedCommand}" CommandParameter="NavigationPage/FloorPlanPage"/>
                 </StackLayout.GestureRecognizers>
                 <Image Source="icon_floormap_circle" HeightRequest="40"/>
                 <Label Text="Floor Plan" VerticalTextAlignment="Center" Margin="20, 0, 0, 0" Style="{DynamicResource SubtitleStyle}"/>
               </StackLayout>
             </ViewCell>
             <ViewCell>
               <StackLayout Margin="15, 10, 10, 10" Orientation="Horizontal">
                 <StackLayout.GestureRecognizers>
                   <TapGestureRecognizer Command="{Binding MenuSelectedCommand}" CommandParameter="NavigationPage/SponsorsPage"/>
                 </StackLayout.GestureRecognizers>
                 <Image Source="icon_partners_circle" HeightRequest="40"/>
                 <Label Text="Sponsor / Media Partners" VerticalTextAlignment="Center" Margin="20, 0, 0, 0" Style="{DynamicResource SubtitleStyle}"/>
               </StackLayout>
             </ViewCell>
             <ViewCell>
               <StackLayout Margin="15, 10, 10, 10" Orientation="Horizontal">
                 <StackLayout.GestureRecognizers>
                   <TapGestureRecognizer Command="{Binding MenuSelectedCommand}" CommandParameter="NavigationPage/FoodNearbyPage"/>
                 </StackLayout.GestureRecognizers>
                 <Image Source="icon_restaurant_circle" HeightRequest="40"/>
                 <Label Text="Where To Eat" VerticalTextAlignment="Center" Margin="20, 0, 0, 0" Style="{DynamicResource SubtitleStyle}"/>
               </StackLayout>
             </ViewCell>
           </TableSection>
         </TableRoot>        
       </TableView>        
     </StackLayout>
   </ContentPage>
  </MasterDetailPage.Master>
</MasterDetailPage>

Answer 2

You can add TabbedPage Children like this in XAML:

<MasterDetailPage.Detail>
    <TabbedPage>
        <TabbedPage.Children>
            <ContentPage Title="Page 1" Icon="ja.png" />
            <ContentPage Title="Page 2" Icon="ja.png" />
            <ContentPage Title="Page 3" Icon="ja.png" />
        </TabbedPage.Children>
    </TabbedPage>
</MasterDetailPage.Detail>

Just substitute your "local" custom pages for ContentPage

Or via code:

public TabsPage ()
{
    this.Children.Add (new ContentPage () { Title = "Page 1", Icon = "ja.png" });
    this.Children.Add (new ContentPage () { Title = "Page 2", Icon = "ja.png" });
    this.Children.Add (new ContentPage () { Title = "Page 3", Icon = "ja.png" });
}