Avalonia style selector doen't works on derived classes

Question

I'm having an issue to style my custom control derived from button.

I inherited the Button class to add a DependencyProperty to it:

public class IconButton : Button, IStyleable
{
    Type IStyleable.StyleKey => typeof(Button);

    public static readonly StyledProperty<string> IconProperty =
        AvaloniaProperty.Register<IconButton, string>(nameof(Icon));

    public string Icon
    {
        get { return GetValue(IconProperty); }
        set { SetValue(IconProperty, value); }
    }
}

Now I want to create a style targetting only this derived class:

    <Styles xmlns="https://github.com/avaloniaui"
            xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
            xmlns:i="clr-namespace:Projektanker.Icons.Avalonia;assembly=Projektanker.Icons.Avalonia"
            xmlns:cc="*****.*****.CustomControls">
        <Design.PreviewWith>
            <Border Padding="20">
              <StackPanel Orientation="Vertical">
                <cc:IconButton Content="hello custom" Icon="fab fa-github"/>
                <Button Content="hello"/>
              </StackPanel>
            </Border>
        </Design.PreviewWith>
    
      <Style Selector=":is(cc|IconButton)">
        <Setter Property="Background" Value="Red"/>
        <Setter Property="Template">
          <Setter.Value>
            <ControlTemplate>
              <StackPanel Orientation="Horizontal">
                <i:Icon Value="{TemplateBinding Icon}" />
                <TextBlock Text="{TemplateBinding Content}" />
              </StackPanel>
            </ControlTemplate>
          </Setter.Value>
        </Setter>
      </Style>
    </Styles>

AS you can see, the content is not my control template as the icon is not visible and the background is not red. Therefore I can't use my dependencyproperty.

Any suggestions or is it not supported by the language? I read on the documentation that is(****) for selector is intended to support derived type so I would expect my code to be working :(

Thx for help.

Answer 1

Try to remove IStyleable and your overriden StyleKey. You are telling the selector that it should look for a Button style and not your style.

Happy coding Tim

PS I cannot test it on my own right now, so if it doesn't work please tell me here.

---

Update: I just made a blank new project and tested your code. Once I remove the StyleKey, it works:

This is the modified IconButton:

public class IconButton : Button
{
    public static readonly StyledProperty<string> IconProperty =
        AvaloniaProperty.Register<IconButton, string>(nameof(Icon));
    
    public string Icon
    {
        get { return GetValue(IconProperty); }
        set { SetValue(IconProperty, value); }
    }
}

If you are able to upload a minimal sample on Github, I can have a look what may be wrong.

---

Update 2: Looking into your demo App I see that you use a third party icon lib. The lib requires you to configure a special service at start up, see: https://github.com/Projektanker/Icons.Avalonia#1-register-icon-providers-on-app-start-up

I send you a PR which fixes your issue.

Happy coding Tim