Issue while trying to create create a template component in MAUI XAML

Question

Hello I am currently trying to create a component that will be like a template used by other.

I wanted to create a component that render a text and can render child given in the xaml code.

Here is the code:

<?xml version="1.0" encoding="utf-8" ?>
<ContentView xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="Quiz.ForNative.Components.Form.BaseInput">
    <VerticalStackLayout>
        <HorizontalStackLayout>
            <Label
                x:Name="Label"
                Text="{Binding LabelText}" />
            <Label
                x:Name="Label3"
                Text="Coucou" />
        </HorizontalStackLayout>
    </VerticalStackLayout>
    <ContentView.Content>
        <ContentPresenter />
    </ContentView.Content>
</ContentView>

Here is the code behind:

public partial class BaseInput : ContentView
{
    public static readonly BindableProperty LabelTextProperty = BindableProperty.Create(
        nameof(LabelText),
        typeof(string),
        typeof(BaseInput),
        default(string));

    public string LabelText
    {
        get => (string)GetValue(LabelTextProperty);
        set => SetValue(LabelTextProperty, value);
    }

    public BaseInput()
    {
        InitializeComponent();
        this.BindingContext = this;     
	} 
}

And i wanted to be able to used it in an other component like this

<?xml version="1.0" encoding="utf-8" ?>
<ContentView xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="Quiz.ForNative.Components.Form.DateInput"
             xmlns:local="clr-namespace:Quiz.ForNative.Components.Form">
    <local:BaseInput>
        <DatePicker x:Name="Value" WidthRequest="250"/>
    </local:BaseInput>
</ContentView>

Here the code behing of the previous component:

public partial class DateInput : ContentView
{
    public static readonly BindableProperty LabelProperty = BindableProperty.Create(
        nameof(Label),
        typeof(string),
        typeof(DateInput),
        default(string));

    public string Label
    {
        get => (string)GetValue(LabelProperty);
        set => SetValue(LabelProperty, value);
    }

    public DateInput()
    {
        InitializeComponent();
        this.BindingContext = this;
    }
}

But for some reason the property Label which is given to the BaseInput isn't displayed
Is there something that i missed or that i did really wrong?

Answer 1

Solution proposée et validée par @Auquier Cyril

I've resolved this issue by doing one simple thing: I used a ControlTemplate and some template biing in the compenent that needed to render its children

Here the code (I only changed the xaml code)

<ContentView xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="Quiz.ForNative.Components.Form.BaseInput"
             x:Name="baseInput">
    <ContentView.ControlTemplate>
        <ControlTemplate>
            <VerticalStackLayout>
                <Label
                    x:Name="Label"
                    Text="{TemplateBinding LabelText}" />
                <ContentPresenter />
            </VerticalStackLayout>
        </ControlTemplate>
    </ContentView.ControlTemplate>
</ContentView>

And the result

Answer 2

I've resolve this issue by doing one simple thing: I used a ControlTemplate and some template biing in the compenent that needed to render its children

Here the code (I only changed the xaml code)

<ContentView xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="Quiz.ForNative.Components.Form.BaseInput"
             x:Name="baseInput">
    <ContentView.ControlTemplate>
        <ControlTemplate>
            <VerticalStackLayout>
                <Label
                    x:Name="Label"
                    Text="{TemplateBinding LabelText}" />
                <ContentPresenter />
            </VerticalStackLayout>
        </ControlTemplate>
    </ContentView.ControlTemplate>
</ContentView>

And the result