Xamarin.Forms: Can I embed one ContentPage or ContentView into another ContentPage

Question

I have multiple ContentPage xaml files in my Xamarin project. I want to embed a shared piece of xaml into each ContentPage. There is nothing particularly special about the shared piece of xaml (it does't need to do anything platform specific). Shouldn't it be just as easy as embedding a tag in the xaml of the ContentPage to include the shared xaml file? Can someone point me in the right direction?

Answer 1

You can take the parent child of your ContentPage (for example, a StackLayout that wraps all the children), put it in an external xaml file, and then include that component in each one of your ContentPages.

The external xaml file will be a StackLayout type, rather than a ContentPage.

Edit - added a code sample:

Let's add a header StackLayout: we add a code behind class:

public partial class HeaderNavigationBar 
{
    public HeaderNavigationBar()
    {
        InitializeComponent();
    }
}

Then add the XAML code:

<StackLayout x:Class="HeaderNavigationBar"
             Orientation="Horizontal"
             HorizontalOptions="FillAndExpand"
             Padding="10"
             BackgroundColor="White">

    <Image Source="burger_icon"
           HorizontalOptions="StartAndExpand"
           Aspect="AspectFit">
        <Image.GestureRecognizers>
            <TapGestureRecognizer Command="{Binding SlideNavigationDrawerCommand}" />
        </Image.GestureRecognizers>
    </Image>
</StackLayout>

And finally, in the page where you want to reuse your component - add this reference:<HeaderNavigationBar />.

Answer 2

Thank you very much IdoT, It did work for me, but after adding some lines. As this will help in making templates/custom controls/sub forms, easily added/shared across Xamarin.Forms.

Here is my full work based on your suggestion, so it can be used as is with others:

HeaderNavigationBar.xaml

<?xml version="1.0" encoding="utf-8" ?>
<StackLayout xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="App9.MVC.Views.HeaderNavigationBar"
             Orientation="Horizontal"
             HorizontalOptions="FillAndExpand"
             Padding="10"
             ackgroundColor="White">

    <Button Text="Internal 1" />
    <Button Text="Internal 2" />
</StackLayout>

As you can see, added:

xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"

and in the HeaderNavigationBar.cs, it was declared as StackLayout:

HeaderNavigationBar.cs

using Xamarin.Forms;

namespace App9.MVC.Views
{
    public partial class HeaderNavigationBar : StackLayout
    {
        public HeaderNavigationBar()
        {
            InitializeComponent();
        }
    }
}

then for the page that will hold it/show it:

MainView.xaml

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:common="clr-namespace:App9.MVC.Views;assembly=App9"
             x:Class="App9.MVC.Views.MainView">

    <StackLayout Padding="0,0,0,20">
        <common:HeaderNavigationBar>
            <Button Text="External 1" />
        </common:HeaderNavigationBar>

        <Button Text="Test Button 1
                x:Name="btnPage1"
                Clicked="btnPage1_clicked" />
    </StackLayout>
</ContentPage>

As you can notice, the namespace has the full path, in the MainView:

xmlns:common="clr-namespace:App9.MVC.Views;assembly=App9"

Also, you can notice that there is a button called External 1, this will also show with the Internal buttons, as the control is a StackLayout, so it can handle adding more controls.

Screenshot:

Also for Page inside another Page:

• https://github.com/twintechs/TwinTechsFormsLib
• http://blog.twintechs.com/advanced-xamarin-forms-techniques-for-flexible-and-performant-cross-platform-apps-part-5-page-in-page-embedding

Again thanks goes to IdoT.