locked
How to 'include' NavigationPage in XAML RRS feed

  • Question

  • User158173 posted

    Hi,

    I'm trying to make as much work as possible in XAML. Is it possible to 'include'/embed XAML with NavigationPage into another XAML?

    Example - MenuPage:

            <?xml version="1.0" encoding="UTF-8"?>
            <MasterDetailPage 
                xmlns="http://xamarin.com/schemas/2014/forms" 
                xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" 
                x:Class="MyApp.MenuPage"
                xmlns:local="clr-namespace:MyApp;assembly=MyApp"
                Style="{StaticResource PageStyle}"
                Title="MyApp">
    
                <MasterDetailPage.Master Title="Menu">
                    <local:Menu/>
                </MasterDetailPage.Master>
    
                <MasterDetailPage.Detail>
                    <local:DashboardPage/>
                </MasterDetailPage.Detail>
            </MasterDetailPage>
    

    and my DashboardPage looks like this:

    <?xml version="1.0" encoding="UTF-8"?>
    <NavigationPage
        xmlns="http://xamarin.com/schemas/2014/forms" 
        xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" 
        x:Class="MyApp.DashboardPage" 
        xmlns:local="clr-namespace:MyApp;assembly=MyApp"
        Style="{StaticResource NavigationPageStyle}">
    
        <x:Arguments>
            <local:UTTabbedPage Title="Dashboard" Style="{StaticResource TabbedPageStyle}">
                <local:UTTabbedPage.Children>
                <local:ObjectsPage />               
                    <local:HostsPage />
                    <local:ServicesPage />
                </local:UTTabbedPage.Children>
            </local:UTTabbedPage>
        </x:Arguments>
    </NavigationPage>
    

    After login page I'm loading MenuPage like this: Application.Current.MainPage = new MenuPage();

    When I copy my DashboardPage directly into MenuPage everything works as expected. But when I try to embed DashboardPage into MenuPage I have error: "NavigationPage must have a root Page before being used. Either call PushAsync with a valid Page, or pass a Page to the constructor before usage."

    Any idea?

    Saturday, September 12, 2015 6:18 PM

All replies

  • User181 posted

    What does the code for DashboardPage look like?

    Saturday, September 12, 2015 8:01 PM
  • User158173 posted

    Good question. Code-behind for DashboardPage:

    using System;
    using System.Collections.Generic;
    
    using Xamarin.Forms;
    
    namespace MyApp
    {
        public partial class DashboardPage : NavigationPage
        {
            static public NavigationPage DashboardNavPage { get; set; }
    
    
            public DashboardPage()
            {
                InitializeComponent();
    
                DashboardNavPage = this;
            }
        }
    }
    
    Saturday, September 12, 2015 8:06 PM
  • User181 posted

    You probably need a constructor that takes a Page argument and passes that up to the base class. I believe that is what the x:Arguments XAML code will try to call. Try this:

        public DashboardPage(Page page) : base(page)
        {
            InitializeComponent();
    
            DashboardNavPage = this;
        }
    
    Saturday, September 12, 2015 8:58 PM
  • User158173 posted

    Unfortunately - not working. Now there is error regarding missing default constructor: Default constructor not found for type MyApp.DashboardPage

    It's happening (at least exception is thrown) in generated MenuPage code:

     public partial class MenuPage : MasterDetailPage {
    
            [System.CodeDom.Compiler.GeneratedCodeAttribute("Xamarin.Forms.Build.Tasks.XamlG", "0.0.0.0")]
            private void InitializeComponent() {
                this.LoadFromXaml(typeof(MenuPage));
            }
        }
    
    Saturday, September 12, 2015 9:17 PM
  • User181 posted

    Seems like your x:Arguments isn't being used. Make sure you're using that right. I've never used it myself (only learned about it recently) so I can't say if it's right.

    Saturday, September 12, 2015 9:28 PM
  • User131778 posted

    If you write <MasterDetailPage.Detail> <local:DashboardPage /> </MasterDetailPage.Detail> then DashboardPage will be created with parameterless constructor by the parser. Next it will call InitializeComponent(). But as Adam said x:Arguments inside DashboardPage's XAML is not used because instance already have been created.

    I would restructure to this:

    1) DashboardPage with constructor that accept a Page as Adam pointed out 2) MasterDetailPage.Detail: <MasterDetailPage.Detail> <local:DashboardPage> <x:Arguments> <local:UTTabbedPage /> </x:Arguments> </local:DashboardPage> </MasterDetailPage.Detail> 3) UTTabbedPage: <TabbedPage .. > <TabbedPage.Children> <local:ObjectsPage />
    <local:HostsPage /> <local:ServicesPage /> <TabbedPage.Children> </TabbedPage>

    Sunday, September 13, 2015 10:47 PM
  • User158173 posted

    Better, because it's not crashing anymore :)

    But now there is problem: TabbedPage is not showing. I've changed approach to navigation in this specific app, but would be good to find some solution of embedding NavigationPage in xaml.

    Thursday, September 24, 2015 10:53 PM
  • User131778 posted

    Can you show what have been changed for the UITabbedPage?

    Thursday, September 24, 2015 11:06 PM
  • User158173 posted

    Sorry - my fault! When I wanted to copy code from master-detail I've noticed that my tabbed page has old name. Your solution is working - many thanks for help.

    So just to sum up:

    MasterDetailPage.xaml:

    <MasterDetailPage ...>
    
        <MasterDetailPage.Master Title="Menu">
            <local:Menu/>
        </MasterDetailPage.Master>
    
    
        <MasterDetailPage.Detail>
    
            <local:DashboardPage>
                <x:Arguments>
    
                    <local:Tabs/>
    
                </x:Arguments>
    
            </local:DashboardPage>
    
        </MasterDetailPage.Detail>
    
    </MasterDetailPage>
    

    DashboardPage.xaml:

    <NavigationPage...>
    
        <x:Arguments />
    
    </NavigationPage>
    

    DashboardPage.xaml.cs:

    public partial class DashboardPage : NavigationPage
        {
            static public NavigationPage DashboardNavPage { get; set; }
    
            public DashboardPage(Page page) : base(page)
            {
                InitializeComponent();
    
                DashboardNavPage = this;
            }
        }
    

    Tabs.xaml:

         <local:UTTabbedPage   ... >
                    <local:UTTabbedPage.Children>
                    <local:ObjectsPage />           
                    <local:HostsPage />
                            <local:ServicesPage />
                        </local:UTTabbedPage.Children>
        </local:UTTabbedPage>
    
    Thursday, September 24, 2015 11:22 PM
  • User160503 posted

    Hi, AleksanderKobylak.6525 can you share your whole code please because i am facing same issue.....

    Tuesday, January 19, 2016 2:59 PM
  • User298563 posted

    @"AleksanderKobylak.6525"

    This is possible.

    I made a gist explaining the Navigationpage in Xaml

    https://gist.github.com/Easter1021/c2ed3e4f53c939bd3a2a64c400d682e9

    Friday, March 3, 2017 8:06 AM