NumericUpDown looks broken when disabled

[Jannik-M91]

I am currently building my first Avalonia application and I am using a lot of NumericUpDown controls.

To me the control looks broken when "IsEnabled" is set to false (top enabled, bottom disabled):

I would have expected that either both the text edit and the spinner have the border visible or not, not this strange mixture.

Is this the expected behavior or am I doing it wrong?

[stevemonaco]

It looks ok here. (Fluent Theme, 11.1.0 and nightly)

The image looks like you're constricting the control's Height and the ControlTheme does not enjoy it. You may need to check DevTools for the layout sizing at runtime and the original Fluent ControlTheme if there's nothing obvious on your end.

[Jannik-M91]

I am using the "Dense" Density Style of the Fluent Theme, but switching back to normal still looks the same. There are no constraint on the height of the NumericUpDown.

I am using the latest Avalonia and Fluent Theme versions 11.1.3. Switching to 11.1.0 gives the same results.

I just tried the "Light" Theme Variant and that one looks ok. As it turns out the Color Palette I created for the "Dark" Theme Variant is the culprit, if I remove it, the Dark Theme is also ok.

  <!-- To create new color palettes use: https://theme.xaml.live/ -->
  <Application.Styles>
    <FluentTheme DensityStyle="Compact">
      <FluentTheme.Palettes>
        <ColorPaletteResources x:Key="Dark"
                               Accent="#ff0073cf"
                               AltHigh="Black"
                               AltLow="Black"
                               AltMedium="Black"
                               AltMediumHigh="Black"
                               AltMediumLow="Black"
                               BaseHigh="White"
                               BaseLow="#ff333333"
                               BaseMedium="#ff9a9a9a"
                               BaseMediumHigh="#ffb4b4b4"
                               BaseMediumLow="#ff676767"
                               ChromeAltLow="#ffb4b4b4"
                               ChromeBlackHigh="Black"
                               ChromeBlackLow="#ffb4b4b4"
                               ChromeBlackMedium="Black"
                               ChromeBlackMediumLow="Black"
                               ChromeDisabledHigh="#ff333333"
                               ChromeDisabledLow="#ff9a9a9a"
                               ChromeGray="Gray"
                               ChromeHigh="Gray"
                               ChromeLow="#ff151515"
                               ChromeMedium="#ff1d1d1d"
                               ChromeMediumLow="#ff2c2c2c"
                               ChromeWhite="White"
                               ListLow="#ff1d1d1d"
                               ListMedium="#ff333333"
                               RegionColor="Black" />
      </FluentTheme.Palettes>
    </FluentTheme>
  </Application.Styles>

[Jannik-M91]

This seems to be an issue with the Theme Editor: https://theme.xaml.live/

Simply using the default settings, clicking "Export" and using those in my application reproduces the issue.

Edit: Removing the line for the "BaseLow" color fixes the issue. No idea why though.

Edit 2: Instead of #ff333333 I am now using the (I think original Fluent Theme) value #33ffffff which works fine. If I understand this correctly this should be the same color, just using alpha instead of reducing the RGB components. I still think this should get fixed in the Theme Editor. Where should I report this?

[stevemonaco]

After investigating, this isn't the Theme Editor. There's an error (IMO) in the NumericUpDown ControlTheme which took some work to track down. There's a negative margin in its TextBox which I believe spills it out on top of the border we expect to be drawn.

Avalonia/src/Avalonia.Themes.Fluent/Controls/NumericUpDown.xaml

Lines 77 to 80 in 77fe040

	<TextBox Name="PART_TextBox"
	Background="Transparent"
	BorderBrush="Transparent"
	Margin="-1"

A bit fortuitous that it only happens in :disabled as the Margin will have ControlTemplate priority from the local set value. A conditional activator like :disabled will bump the setter priority up so you can successfully override it:

<Style Selector="NumericUpDown:disabled /template/ TextBox#PART_TextBox">
    <Setter Property="Margin" Value="0" />
</Style>

Please file an issue in the main Avalonia repo (here), but I do not know why the designer added the negative Margin nor the team's stance on using them in standard ControlThemes. They're rarely used because of reasons like this. You can link this discussion/comment.