Avalonia UI：如何将NumericUpDown的微调按钮上下堆叠？

默认的NumericUpDown样式：

由于默认按钮占用空间过大，希望将其修改为Windows窗体的紧凑风格：

尝试直接修改ButtonSpinner的宽高样式，但修改后整个NumericUpDown控件被缩小，而非仅调整按钮部分（即使单独为NumericUpDown编写了样式），使用的代码如下：

<Style Selector="ButtonSpinner">
  <Setter Property="Height">
    <Setter.Value>
      10
    </Setter.Value>
  </Setter>
  <Setter Property="Width">
    <Setter.Value>
      25
    </Setter.Value>
  </Setter>
</Style>

请问该如何实现预期的紧凑按钮效果？

直接给ButtonSpinner设置固定宽高会破坏它与NumericUpDown的布局绑定关系，导致整个控件尺寸异常。正确的做法是重写ButtonSpinner的控件模板，调整内部上下按钮的尺寸与布局，而非修改控件本身的宽高属性。

具体实现代码 #

1. 为NumericUpDown内部的ButtonSpinner编写自定义模板，实现紧凑的WinForms风格：

<Style Selector="NumericUpDown ButtonSpinner">
    <Setter Property="Template">
        <ControlTemplate>
            <!-- 设置按钮区域的固定宽度，控制整体紧凑度 -->
            <Grid Width="22" Margin="0">
                <Grid.RowDefinitions>
                    <RowDefinition Height="*"/>
                    <RowDefinition Height="*"/>
                </Grid.RowDefinitions>
                <!-- 上箭头按钮 -->
                <Button Name="PART_IncreaseButton" 
                        Grid.Row="0" 
                        Padding="0"
                        Height="Auto"
                        Width="Auto"
                        Content="▲"/>
                <!-- 下箭头按钮 -->
                <Button Name="PART_DecreaseButton" 
                        Grid.Row="1" 
                        Padding="0"
                        Height="Auto"
                        Width="Auto"
                        Content="▼"/>
            </Grid>
        </ControlTemplate>
    </Setter>
</Style>

2. 确保NumericUpDown保持自适应高度，避免被限制尺寸：

<Style Selector="NumericUpDown">
    <Setter Property="Height" Value="Auto"/>
    <Setter Property="VerticalAlignment" Value="Center"/>
</Style>

核心要点 #

• 使用NumericUpDown ButtonSpinner作为样式选择器，确保样式仅作用于NumericUpDown内部的按钮容器，不会影响其他控件。
• 通过模板内的Grid固定按钮区域宽度，上下按钮均分高度，用简洁的箭头符号替代默认样式，大幅减少空间占用。
• 不给ButtonSpinner设置固定Height，让它自动匹配NumericUpDown的高度，彻底解决控件整体缩小的问题。

内容的提问来源于stack exchange，提问作者dragondangun