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>

Ovenbird

You're looking for something like Control Templates in combination with a Content Presenter. – Blameful

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

Forbes

@Ender KARADAG I have not heard from you for a couple of days. Please let me know if there is anything that I can help here. If above answer is helpful, please accept it as answer, it will help others who have similar issue! Thanks in advance! – Forbes

Thank you Alexandar. I just saw your answer. That seems to be the correct answer. Thank you. Do i have declare that ControlTemplate in My contentview's ContentView.Resources? i did it, but i got an exception "Position 8:10. resources in ResourceDictionary require a x:Key attribute" tough i declared a x:Key for that – Ovenbird

Hi Alexandar. Now i tested it. It works like a charm. Thank you – Ovenbird

Thank you for the answer. It helped me as well. – Epideictic