How can I bind a DependencyProperty in Avalonia rightly?

Question

I want to change the background color of the Border B when mouse is over in the TemplateControls.

Here is the XAML:

<Styles xmlns="https://github.com/avaloniaui"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:controls="using:Sample.TemplateControls">
    <Design.PreviewWith>
        <controls:NormalButton />
    </Design.PreviewWith>

    <Style Selector="controls|NormalButton">
        <!-- Set Defaults -->
        <Setter Property="Background" Value="Blue"></Setter>
        <Setter Property="HoverBackground" Value="Red"></Setter>
        <Setter Property="Template">            
            <ControlTemplate>
                <Border Name="B" Background="{TemplateBinding Background}">
                    <ContentPresenter></ContentPresenter>
                </Border>           
            </ControlTemplate>
        </Setter>       
    </Style>
    <Style Selector="controls|NormalButton:pointerover /template/ Border#B">
        <Setter Property="Background" Value="{TemplateBinding HoverBackground}" />
    </Style>
</Styles>

Here is code-behind:

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

namespace Sample.TemplateControls
{
    public class NormalButton : Button
    {
        public static readonly StyledProperty<Brush> HoverBackgroundProperty =
    AvaloniaProperty.Register<Border, Brush>(nameof(HoverBackground));

        public Brush HoverBackground
        {
            get { return GetValue(HoverBackgroundProperty); }
            set { SetValue(HoverBackgroundProperty, value); }
        }
    }
}

In XAML it threw errors in two parts: One is

<Setter Property="HoverBackground" Value="Red"></Setter>

The other is

<Setter Property="Background" Value="{TemplateBinding HoverBackground}" />

What's wrong with my code?

Answer 1

Based on @coder_cy answer. I found the solution.

Firstly, the type of the HoverBackground should be IBrush not Brush as the official tutorial said. I don't know why but type of Background is IBrush but not Brush. Brush type will cause the error.

Secondary, the HoverBackground Setter should contain namespace also.

All the code should be like this:

<Styles xmlns="https://github.com/avaloniaui"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:controls="using:Sample.TemplateControls">
    <Design.PreviewWith>
        <controls:NormalButton />
    </Design.PreviewWith>

    <Style Selector="controls|NormalButton">         
        <Setter Property="Background" Value="Blue"></Setter>
        <Setter Property="HoverBackground" Value="Red"></Setter>
        <Setter Property="Template">            
            <ControlTemplate>
                <Border Name="B" Background="{TemplateBinding Background}">
                    <ContentPresenter></ContentPresenter>
                </Border>           
            </ControlTemplate>
        </Setter>       
    </Style>
    <Style Selector="controls|NormalButton:pointerover /template/ Border#B">
        <Setter Property="Background" Value="{TemplateBinding controls:NormalButton.HoverBackground}" />
    </Style>
</Styles>



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

namespace Sample.TemplateControls
{
    public class NormalButton : Button
    {      
        public static readonly StyledProperty<IBrush> HoverBackgroundProperty =
    AvaloniaProperty.Register<Border, IBrush>(nameof(HoverBackground));

        public IBrush HoverBackground
        {
            get { return GetValue(HoverBackgroundProperty); }
            set { SetValue(HoverBackgroundProperty, value); }
        }
    }
}