reusable contentview .NET MAUI

Question

Simply, I have a contentview such as;

<ContentView xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="myapp.customstacklayout">
    <StackLayout>


        <StackLayout>
            <StackLayout x:Name="header">

                <!-- some title things here, such as a header label etc-->

            </StackLayout>
            <StackLayout x:Name="content">

                <!--Contents should be added here when reused-->


            </StackLayout>
            <StackLayout x:Name="footer">

                <!-- some footer things here, such as a summary label etc-->

            </StackLayout>
        </StackLayout>

        <!--Not here-->

    </StackLayout>
</ContentView>

and i want to reuse it in a ContentPage such as;

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:mycontrols="clr-namespace:myapp"
             x:Class="myapp.mainpage">

    <StackLayout>
        <mycontrols:customstacklayout>

            <Button Text="TestButton"/>
            <Entry Text="TestEntry"/>
            <Label Text="TestLabel"/>
                .... and etc..

        </mycontrols:customstacklayout>
    </StackLayout>
</ContentPage>

to create such a reusable item, i think, in xaml, there has to be something for contentview to point which IView item the children should be added in

Any idea or a piece of code for that?

Thanks in advance.

Ender

EDIT: i changed my contentview xaml for using ControlTemplate. Added Resources and a contentPresenter at the point where i want to show the children added. But still can not see the children

<ContentView xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="myapp.customstacklayout">
    <ContentView.Resources x:Key="template">
    <ControlTemplate>
    <StackLayout>


        <StackLayout>
            <StackLayout x:Name="header">

                <!-- some title things here, such as a header label etc-->

            </StackLayout>
            <StackLayout x:Name="content">

                <!--Contents should be added here when reused-->
                    <ContentPresenter/>


            </StackLayout>
            <StackLayout x:Name="footer">

                <!-- some footer things here, such as a summary label etc-->

            </StackLayout>
        </StackLayout>

        <!--Not here-->

    </StackLayout>
    </ControlTemplate>
</ContentView.Resources>

</ContentView>

Answer 1

Well, if you want to create a reusable ContentView .NET MAUI, you can create Control Templates with Content Presenter and then reuse it in the page you want.

You can refer to below detailed steps on how to use it.

1. Create a custom control: CustomControl.xaml that inherits from ContentView with a custom BindableProperty like below:

XAML:

<ContentView.ControlTemplate>

    <ControlTemplate>

        <Frame>

            <VerticalStackLayout>
                <Label Text="{TemplateBinding Title}"/>

                <ContentPresenter/>
            </VerticalStackLayout>
        </Frame>
    </ControlTemplate>
    
    
</ContentView.ControlTemplate>

Code-behind:

public partial class CustomControl : ContentView 
{
    public static readonly BindableProperty TitleProperty =
  BindableProperty.Create(nameof(Title), typeof(string), typeof(CustomControl) );

    public CustomControl()
    {
        InitializeComponent();
    }

    public string Title
    {

        get => GetValue(TitleProperty) as string;
        set => SetValue(TitleProperty, value);

    }
}

2. You can reuse it multiples in the MainPage.xaml like below:

<?xml version="1.0" encoding="utf-8" ?> 
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:controls="clr-namespace:MauiAppCustomDemo.Controls"
             x:Class="MauiAppCustomDemo.MainPage">

    <ScrollView>
        <VerticalStackLayout
            Spacing="25"
            Padding="30,0"
            VerticalOptions="Center">


            <controls:CustomControl Title="Hello World">
                <VerticalStackLayout>
                    <Label Text="Label 1"/>
                    <Label Text="Label 2"/>

                </VerticalStackLayout>
                
            </controls:CustomControl>

            <controls:CustomControl Title="Hello again">

                <HorizontalStackLayout>
                    <Label Text="Label 3"/>
                    <Label Text="Label 4"/>
                </HorizontalStackLayout>
            </controls:CustomControl>

        </VerticalStackLayout>
    </ScrollView>

</ContentPage>

Microsoft Official reference link:https://learn.microsoft.com/en-us/dotnet/maui/fundamentals/controltemplate?view=net-maui-7.0