Button with full-sized icon in Avalonia UI

Question

I'd like to have a Button with a full-width and full-height PathIcon inside (without having to manually set the Width and Height to the same pixel value of the button).

According to the docs it seems like setting HorizontalAlignment and VerticalAlignment to "Stretch" should do the trick however using the following (simplified) XAML (I also tried to set the HorizontalContentAlignment and VerticalContentAlignment properties of the Button to Stretch which aren't really documented anywhere in the Avalonia docs as far as I can tell but IntelliSense came up with them and they seemed to be related, soooo ... :)

<Button Name="button"
        Background="Cyan"
        Width="50"
        Height="50"
        HorizontalContentAlignment="Stretch"
        VerticalContentAlignment="Stretch"
        HorizontalAlignment="Stretch"
        VerticalAlignment="Stretch">
  <PathIcon Background="Red"
            HorizontalAlignment="Stretch"
            VerticalAlignment="Stretch"
            Name="normalIcon"
            Data="{StaticResource copy}"/>
</Button>

leads to this result:

As can be seen the red icon doesn't cover the complete cyan button. I triple-checked for any Margins or Paddings that could interfere but there are none.

Now the obvious (and quite ugly) solution here would be to do something like this:

<Button Name="button"
        Background="Cyan"
        Width="50"
        Height="50">
  <PathIcon Background="Red"
            Width="50"
            Height="50"
            Name="normalIcon"
            Data="{StaticResource copy}"/>
</Button>

which probably would work but only for this simplified example. In reality my button contains a panel which then contains several icons that would be conditionally toggled (IsVisible="True/False") so setting Width and Height to the same value for all of them just isn't practical (especially in case these values would have to be changed in the future).

I've already taken a look at questions like How to set width to 100% in WPF, How to get button content to fill width in WPF and WPF: Setting the Width (and Height) as a Percentage Value but neither of them seem to do the trick (either because I'm not using them correctly or because there are just too many differences between avaloniaui and wpf?)

What I'd basically like to achieve is something similar to this CSS snippet

Button {
    width: 50px;
    height: 50px;
}

Button > Panel {
    width: 100%;
    height: 100%;
}

Button > Panel > PathIcon {
    width: 100%;
    height: 100%;
}

What I've also tried:

• Using a DockPanel and setting LastChildFill="True" (Didn't work - while the DockPanel did fill the button (for the most part anyways) the PathIcon (the last child of the dock panel) seemed like it couldn't care less about that it should fill the DockPanel :|
• Doing some trickery with ControlTemplates (Didn't work - then again I'm not going to pretend that I knew what I was doing when I tried it, nor if this is even the correct approach in avaloniaui :P

So how do you do it?

Answer 1

HorizontalAlignment worked in Button

 <Button Content="Add Element"  HorizontalAlignment="Stretch" ></Button>

Screeshot