Avalonia UI中带有全尺寸图标的按钮

Question

我想要一个宽度和高度都为全屏的按钮，里面有一个PathIcon（而不是手动设置按钮的Width和Height属性为相同的像素值）。

根据文档，似乎将HorizontalAlignment和VerticalAlignment属性设置为"Stretch"应该可以解决问题，但是使用以下简化的XAML代码（我还尝试将按钮的HorizontalContentAlignment和VerticalContentAlignment属性设置为Stretch，在Avalonia文档中并没有详细说明，但IntelliSense提供了这些属性，它们似乎与此相关，所以... :)）。

<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>

导致这个结果：

可以看到，红色图标无法完全覆盖青色按钮。我进行了三次检查，但没有找到可能会干扰的边距或填充。

现在，这里的明显（而且相当丑陋）的解决方案是像这样做：

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

这可能在这个简化的例子中有效，但实际上我的按钮包含一个面板，然后包含几个图标，这些图标将被有条件地切换（IsVisible="True/False"），因此为它们所有设置相同的Width和Height值并不实用（特别是如果这些值在将来需要更改的情况下）。

我已经查看了类似于如何在WPF中将宽度设置为100％，如何在WPF中使按钮内容填充宽度和WPF：将宽度（和高度）设置为百分比值的问题，但似乎都没有起到作用（可能是因为我没有正确使用它们或者因为avaloniaui和wpf之间存在太多差异？）

基本上，我想要实现类似于这个CSS片段的东西。

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

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

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

我尝试过的方法：

• 使用 DockPanel 并设置 LastChildFill="True"（不起作用 - 虽然 DockPanel 填充了按钮（至少大部分是这样），但 PathIcon（dock面板的最后一个子元素）似乎并不关心它应该填充 DockPanel :|
• 使用 ControlTemplate 进行一些技巧操作（不起作用 - 不过当时我并不知道自己在做什么，也不确定这是否是 avaloniaui 中正确的方法 :P

那么怎么做呢？

- Frederik Hoeft

Answer 1

水平对齐在按钮中起作用

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

截图

- MoreArty Die