Can I create a custom control that lets me pass in children as XAML?

[shukriadams]

I want to create a custom control that will wrap children with custom markup. My custom control is basically a panel, but with additional things added around its children. Using it would look like

     <local:MyCustomWrapper>
         <Button Text="I am a button but I could be anything later" />
     </local:MyCustomWrapper>

The XAML of MyCustomWrapper could look like

<UserControl>
    <Panel>
        <TextBlock>I am some token text, here's the child content : </TextBlock>

         <.... ! this is where the the button or something else would be rendered ! ....>
          
          <TextBlock>That's it for the children.</TextBlock>
    <Panel>
</UserControl>

The point is, I want be able to create and style some kind of container that adds a bunch of markup around some children, and the children must be passed in XAML along with the container's markup. I've looked at templated controls, but they seem to work by passing data in, and I want to pass markup in instead.

The closest example I can find is in WPF (https://stackoverflow.com/questions/9094486/adding-children-to-usercontrol), but I can't seem to find the Avalonia equivalent of this. Can this be done?

[stevemonaco]

Types like Button that support arbitrary child content do this. In Button's case, it derives from ContentControl which has the Content dependency property (an object?) marked with [Content]. The ControlTemplate then uses ContentPresenter to project this:

Avalonia/src/Avalonia.Themes.Fluent/Controls/Button.xaml

Lines 29 to 43 in 67a223d

	<Setter Property="Template">
	<ControlTemplate>
	<ContentPresenter x:Name="PART_ContentPresenter"
	Background="{TemplateBinding Background}"
	BorderBrush="{TemplateBinding BorderBrush}"
	BorderThickness="{TemplateBinding BorderThickness}"
	CornerRadius="{TemplateBinding CornerRadius}"
	Content="{TemplateBinding Content}"
	ContentTemplate="{TemplateBinding ContentTemplate}"
	Padding="{TemplateBinding Padding}"
	RecognizesAccessKey="True"
	HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
	VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}" />
	</ControlTemplate>
	</Setter>

You aren't writing a TemplatedControl. You don't have a ControlTemplate, so you should instead use ContentControl.

To clarify the point about markup -- it's never passed. XAML is compiled to IL, bindings are created with compile-time safety. XAML isn't seen at runtime unless you're explicitly loading it through that path. Instead, you're running IL that has a lot of news and property sets.

[shukriadams]

I'm not sure I get you. Does that mean it's not possible? The button isn't important, it could be a Panel or TextBlock or anything. I just want to define some arbitrary XAML inside of a wrapper element, the wrapper element must be a custom control of some kind, with Xaml of its own, and single point in its markup where its child elements are rendered. Kind of like how base templates in Asp Razor have a @RenderBody() function, where the content of that page the inherits from that base template is rendered.

Put another way, can I make a control that is basically a custom Panel, with Xaml of its own, and them some Xaml element that is the <RenderChildrenOfThisControlHere />?

[stevemonaco]

The distinction that you aren't really pushing XAML content into a control, but rather assigning a .NET type instance, is important. Otherwise, there would be a significant rift between creating UIs with XAML and with C#.

For instance, with Button, you can do this:

<Button>
    <StackPanel Orientation="Horizontal" Spacing="4">
        <Image Source="...." />
        <TextBlock Text="{Binding Description"} />
    </StackPanel>
</Button>

This will be assigned to Button.Content because it (or rather its ContentControl parent) has a Content property correctly decorated with the attribute. That lets the XAML compiler to implicitly know which property to assign it to. Otherwise, you need to use the full object syntax like:

<Button>
    <Button.Content>
        <StackPanel Orientation="Horizontal" Spacing="4">
            <Image Source="...." />
            <TextBlock Text="{Binding Description"} />
        </StackPanel>
    <Button.Content>
</Button>

Similarly, Panel has its own Content property, but it's a collection instead of a single item:

Avalonia/src/Avalonia.Controls/Panel.cs

Lines 49 to 50 in 67a223d

	[Content]
	public Controls Children { get; } = new Controls();

So yes, you can do the same as these controls do. But it's not the same as injecting XAML and you need to follow the pattern to correctly integrate it. It's best to spend some time reading the source for a few controls to figure it out.

[shukriadams]

Ok. I found what I'm looking for, the way Avalonia does it is a bit round-about, but it works. I should have actually started with the example of the control I wanted to make - I want to make the equivalent of the classic WPF GroupBox control, which I can use to wrap any child content in a square with a header, and some styling like padding etc. Searching for that specific use-case led to this piece of official Avalonia documentation (https://docs.avaloniaui.net/docs/tutorials/groupbox), which was a good start.

Instead of using the built-in HeaderedContentControl Avalonia I made my own base, the source at https://github.com/AvaloniaUI/Avalonia/blob/master/src/Avalonia.Controls/Primitives/HeaderedContentControl.cs was a big help, you can strip that down to a bare-bones class and it'll work fine. I think it makes more sense to use a dedicated base, because you're going to globally override its behaviour.

    public class GroupBox: ContentControl
    {
        public static readonly StyledProperty<string> HeaderProperty =
            AvaloniaProperty.Register<HeaderedControl, string>(nameof(Header));

        public string Header
        {
            get => GetValue(HeaderProperty);
            set => SetValue(HeaderProperty, value);
        }

        public GroupBox() 
        {
            this.Header = "Default header text";
        }
    }

This is where it gets a bit weird, and what confused me in my earlier searches. In order to set the XAML markup for this control, you do it in style, not control-style Xaml. You could create a user control and add the style to that, but that defeats the purpose as you're locking the re-usability inside that user control. A better approach is to create an application-level style sheet - I guess Avalonia calls them themes, or fluent themes? Anyway, https://docs.avaloniaui.net/docs/basics/user-interface/styling/themes/fluent explains it.

Take the style from Avalonia GroupBox example, put it in its own style sheet, call that say "GroupBoxStyle.xaml", it needs a .cs codebehind file too, add that to your csproj file so it's imported, also add to your app's Styles.Add(new GroupBoxStyle()); section. Now it can be used anywhere. Then you can use GroupBox like a standard local control, with all manner of things in it

<local:GroupBox Header="my header">
        <Panel>
             <Button />
             <Button />
             <TextBlock />
             .... etc
        </Panel>
</local:GroupBox>