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

Answer 1

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.

Answer 2

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