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

Auquier Cyril 35 Points de réputation
2024-08-06T06:46:15.0533333+00:00

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
User's image Is there something that i missed or that i did really wrong?

C#
C#
Langage de programmation orienté objet et sécurisé au niveau des types, qui prend ses racines dans la famille des langages C et inclut la prise en charge de la programmation orientée vers les composants.
13 questions
Développement
Développement
Processus de recherche, de productisation et d’affinement de technologies nouvelles ou existantes.
11 questions
0 commentaires Aucun commentaire
{count} votes

Réponse acceptée
  1. Alexis Thorez (CONCENTRIX CORPORATION) 10,810 Points de réputation Fournisseur Microsoft
    2024-08-07T06:30:52.6466667+00:00

    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

    User's image

    0 commentaires Aucun commentaire

1 réponse supplémentaire

Trier par : Le plus utile
  1. Auquier Cyril 35 Points de réputation
    2024-08-06T11:54:38.31+00:00

    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

    User's image

    2 personnes ont trouvé cette réponse utile.

Votre réponse

Les réponses peuvent être marquées comme Réponses acceptées par l’auteur de la question, ce qui permet aux utilisateurs de connaître la réponse qui a résolu le problème de l’auteur.