How can I create, duplicate, or copy paste a whole Border control as it is with all of its controls inside it

Question

first of all, I just want to note that I might be not good at english, and i'm sorry about this.

**Issue: **

I'm for now learning .net Maui and i want to learn how can i do this: i want to make a border control that contains many other controls like layouts, label and image, but the problem i'm facing is that i want to create this specific border control design so i can use it as a template or like the base form that data shows inside the FlexLayout Control, but if i create this border control in xaml, i don't know how to duplicate it, or how to copy it and pasted multi times as many as i need for all data i have using C# to show these data in this form that i've created, and now i don't know what should i do, and what are the ways to do something like this, and even how to do it?

i hope if you can help me with this thing, and thank you.

Note: i have an idea to make all of this border control to be like a new custom control with all of the other content and controls it contains using C#, so i can make everytime i want to use it just an instance of it, or a copy of it, and just giving it every time the values it needs, such as string name or image data, and so. but all of this i don't even know how to do it. so if that's possible to work, then i don't know which tutorial or video should i watch to learn this.

Answer 1

As an answer:

How can I create, duplicate, or copy paste a whole Border control as it is with all of its controls inside it

You can use ContentView to achieve it:

Create a ContentView:

<ContentView xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="MauiApp2.NewContent1"
             x:Name="this">

   <!--create control or layout you want-->
   <Border BindingContext="{x:Reference this}"
            Stroke="#C49B33"
            StrokeThickness="4"
            Background="#2B0B98"
            Padding="16,8"
            Margin="10"
            HorizontalOptions="Center">
       <Border.StrokeShape>
           <RoundRectangle CornerRadius="40,40,40,40" />
       </Border.StrokeShape>
       <VerticalStackLayout>
           <Label Text="{Binding Title}"
                   TextColor="White"
                   FontSize="18"
                   FontAttributes="Bold"/>
           <Image .../>
           ......
       </VerticalStackLayout>
   </Border>
</ContentView>

controls it contains using C#, so i can make everytime i want to use it just an instance of it, or a copy of it, and just giving it every time the values it needs, such as string name or image data,

About that, use BindableProperty to bind data in code behind:

public partial class NewContent1 : ContentView
{
    public static readonly BindableProperty TitleProperty = BindableProperty.Create(nameof(Title), typeof(string), typeof(NewContent1), string.Empty);
 
    public string Title
    {
        get => (string)GetValue(NewContent1.TitleProperty);
        set => SetValue(NewContent1.TitleProperty, value);
    }
 
    public NewContent1()
    {
        InitializeComponent();
    }
}

Now you can reuse it in other page:

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="MauiApp2.NewPage3"
             xmlns:control="clr-namespace:MauiApp2"
             Title="NewPage3">
   <VerticalStackLayout>
       <control:NewContent1 Title="AAABBB"/>

       or use ViewModel to give it a value
       <control:NewContent1 Title="{Binding Name}"/>
       .....
   </VerticalStackLayout>
</ContentPage>

You can also refer to this case: .net MAUI DataTemplate's. Command Bindings in Parents View Model to learn deeper use about ContentView.