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>

You're looking for something like [Control Templates](https://learn.microsoft.com/en-us/dotnet/maui/fundamentals/controltemplate) in combination with a [Content Presenter](https://learn.microsoft.com/en-us/dotnet/maui/fundamentals/controltemplate#substitute-content-into-a-contentpresenter). — Julian, Feb 10 '23 at 21:50

score 9 · Accepted Answer · answered Feb 14 '23 at 08:40

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

@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! — Alexandar May - MSFT, Feb 16 '23 at 08:58
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 — Ender KARADAG, Feb 16 '23 at 10:52
@EnderKARADAG If it's the correct answer, please help accept it as answer(click the ✔ in the upper left corner of this answer), it will help others who have similar issue! You don't need declare that ControlTemplate in your contentview's ContentView.Resources. Thanks in advance! — Alexandar May - MSFT, Feb 17 '23 at 06:06
Hi Alexandar. Now i tested it. It works like a charm. Thank you — Ender KARADAG, Feb 17 '23 at 18:58

reusable contentview .NET MAUI

1 Answers1

Linked