Avalonia: Templated Controls Tutorial?

[TheColonel2688]

Is there a Tutorial for creating Templated Controls? If not can this be added to the to-do?

[Gillibald]

Good idea 👍

[grokys]

Yes, we definitely need this! However it's very similar to the WPF way of doing it except for how we define properties and that's described here: http://avaloniaui.net/docs/authoring-controls/defining-properties so in the meantime you might be able to muddle through!

[JulianKowalczuk]

This is what I used to create control with nested children and some additional properties. I'm using ContentControl, but it inherits from TemplatedControl.

<ContentControl xmlns="https://github.com/avaloniaui" 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" x:Class="MyNamespace.Controls.PinkLabelPanel" xmlns:controls="clr-namespace:MyNamespace.Controls">
  <ContentControl.Styles>
    <Style Selector="controls|PinkLabelPanel">
      <Setter Property="Template">
        <ControlTemplate>
          <Panel>
            <Border Padding="5">
              <StackPanel Background="#180316">
                <Border Padding="0,10,0,0">
                  <StackPanel HorizontalAlignment="Center">
                    <Image Source="{TemplateBinding Label}" Height="40"/>
                    <Image Source="/assets/panel/headerPinkUnderlinePanel.png" Height="10" Width="{TemplateBinding LabelUnderlineWidth}" Stretch="Fill"/>
                  </StackPanel>
                </Border>
                <Border Padding="15">
                  <StackPanel Orientation="Horizontal" Spacing="30" HorizontalAlignment="Center" VerticalAlignment="Center">
                    <StackPanel HorizontalAlignment="Center" Width="200">
                        <ContentPresenter Content="{TemplateBinding Content}"/>
                    </StackPanel>
                  </StackPanel>
                </Border>
              </StackPanel>
            </Border>
            <Image Source="/assets/panel/leftCornerPanel.png" HorizontalAlignment="Left" VerticalAlignment="Top" Height="46"/>
            <Image Source="/assets/panel/rightCornerPanel.png" HorizontalAlignment="Right" VerticalAlignment="Top" Height="46"/>
          </Panel>
        </ControlTemplate>
      </Setter>
    </Style>
  </ContentControl.Styles>
</ContentControl>

```cs
using Avalonia;
using Avalonia.Controls;
using Avalonia.Markup.Xaml;
using Avalonia.Media.Imaging;

namespace HackshieldLauncher.Controls
{
public class PinkLabelPanel : ContentControl
{
public static readonly StyledProperty LabelProperty =
AvaloniaProperty.Register(nameof(Label));

public IBitmap Label
{
  get { return GetValue(LabelProperty); }
  set { SetValue(LabelProperty, value); }
}

public static readonly StyledProperty<int> LabelUnderlineWidthProperty =
AvaloniaProperty.Register<PinkLabelPanel, int>(nameof(LabelUnderlineWidth));

public int LabelUnderlineWidth
{
  get { return GetValue(LabelUnderlineWidthProperty); }
  set { SetValue(LabelUnderlineWidthProperty, value); }
}

public PinkLabelPanel()
{
  this.InitializeComponent();
}

private void InitializeComponent()
{
  AvaloniaXamlLoader.Load(this);
}

}
}

and usage example:
```xml
<controls:PinkLabelPanel Label="/assets/screens/myProfile/informationPinkHeader.png" LabelUnderlineWidth="270">
      <TextBlock Classes="h2">KURWA MAMY TO</TextBlock>
    </controls:PinkLabelPanel>