Templated Control

A generic control can be restyled.

TIP

All most all built-in components are templated from avalonia, so it's possible to inherit from them and customize on your design.

Template

The slot as <ControlTemplate /> is the value of the style.

<Styles xmlns="https://github.com/avaloniaui"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:controls="using:AvaloniaApplication">

    <Design.PreviewWith>
        <controls:MyTemplatedControl />
    </Design.PreviewWith>

    <Style Selector="controls|MyTemplatedControl">
        <!-- Set Defaults -->
        <Setter Property="Template">
            <ControlTemplate>
                <TextBlock Text="Templated Control" />
            </ControlTemplate>
        </Setter>
    </Style>
</Styles>

INFO

Use | to access members of a xml namespace in selector syntax.

Code behind

using Avalonia;
using Avalonia.Controls;
using Avalonia.Controls.Primitives;

namespace AvaloniaApplication;

public class MyTemplatedControl : TemplatedControl
{
}

Each templated control inherits from TemplatedControl, and it has a TemplateProperty where we set our template.

public class TemplatedControl : Control
{
    // ...
    public IControlTemplate? Template
    {
        get { return GetValue(TemplateProperty); }
        set { SetValue(TemplateProperty, value); }
    }
    // ...
}