WinUI 3 - custom control with content

Question

I can't find how to easily create a custom control in which I can insert content in xaml. For example, I would like my control to contain a grid that I style somehow and then insert content into it from outside the component.

<local:MyComponent>
   ... some xaml content
</local:MyComponent>

My idea was that there was some sort of placeholder tell where to put the content. But it will probably be different.

<UserControl>
    <Grid>
        <ContentPlaceholder />
    </Grid>
</UserControl>

Answer 1

Thank you all for the posted solutions. They all helped me get the solution I needed.

I ended up creating a separate content component as follows:

1. I added a new UserControl in Visula Studio (MyContentControl.xaml file + MyContentControl.xaml.cs is created).
2. In the file MyContentControl.xaml.cs I change the inheritance from UserControl to ContentControl.
3. In the MyContentControl.xaml file, I change the UserControl tag to ContentControl and add the ContentControl.Template tag.

MyContentControl.xaml.cs

using Microsoft.UI.Xaml.Controls;

namespace winui_3_app.components;

public sealed partial class MyContentControl : ContentControl
{
    public MyContentControl()
    {
        this.InitializeComponent();
    }
}

MyContentControl.xaml

<ContentControl
    x:Class="winui_3_app.components.MyContentControl"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:winui_3_app.components"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <ContentControl.Template>
        <ControlTemplate TargetType="ContentControl">
            // Content decoration
            <Grid Background="Yellow" Padding="10, 10, 10, 10">
                <ContentPresenter />
            </Grid>
        </ControlTemplate>
    </ContentControl.Template>
    // Content placeholder
    <ContentControl.Content />
</ContentControl>

Using a component

<?xml version="1.0" encoding="utf-8"?>
<Window
    x:Class="winui_3_app.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
    xmlns:local="using:winui_3_app.components"
    mc:Ignorable="d">

    <Grid>
        <local:MyContentControl>
            // Some content
            <TextBlock>Hello!</TextBlock>
        </local:MyContentControl>
    </Grid>
</Window>