Search code examples
c#xamlavaloniauiavalonia

How to place on spinbutton on top of another in NumericUpDown? | Avalonia UI

Default NumericUpDown looks like that:

enter image description here,

and because of buttons take a lot of place I want to make it more Windows form style, like this:

enter image description here.

I've tried to play with ButtonSpinner Styles, but didn't work out, it shrinks the whole NumericUpDown, not only ButtonSpinner (even if I write another style for NumericUpDown).

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

What I should do to achieve desired result?

Solution

  • So, @radoslawik proposed a good solution, but there was one problem -- he linked to nightly build of Avalonia and you may use another version. If you are you must find source code of your version (they are tagged in github) and look up styles there. For my version (0.10.18 -- it's last non-preview available at the moment) solution is next:

    <Window.Styles>
  <Style Selector="NumericUpDown /template/ ButtonSpinner">
    <Setter Property="Template">
      <ControlTemplate>
        <DataValidationErrors>
          <Border Background="{TemplateBinding Background}"
                  BorderBrush="{TemplateBinding BorderBrush}"
                  BorderThickness="{TemplateBinding BorderThickness}"
                  CornerRadius="{TemplateBinding CornerRadius}"
                  MinHeight="{TemplateBinding MinHeight}">
            <DockPanel>
              <UniformGrid Rows="2" Name="PART_SpinnerPanel"
                          DockPanel.Dock="Right"
                          IsVisible="{TemplateBinding ShowButtonSpinner}">
                <RepeatButton Name="PART_IncreaseButton"
                              Classes="ButtonSpinnerRepeatButton"
                              VerticalContentAlignment="Center"
                              Foreground="{TemplateBinding Foreground}"
                              BorderBrush="{TemplateBinding BorderBrush}"
                              Background="{TemplateBinding Background}"
                              FontSize="{TemplateBinding FontSize}">
                  <Path Fill="{TemplateBinding Foreground}"
                        Width="16"
                        Height="8"
                        Stretch="Uniform"
                        HorizontalAlignment="Center"
                        VerticalAlignment="Center"
                        Data="{StaticResource ButtonSpinnerIncreaseButtonIcon}" />
                </RepeatButton>

                <RepeatButton Name="PART_DecreaseButton"
                              Classes="ButtonSpinnerRepeatButton"
                              Foreground="{TemplateBinding Foreground}"
                              BorderBrush="{TemplateBinding BorderBrush}"
                              Background="{TemplateBinding Background}"
                              VerticalContentAlignment="Center"
                              FontSize="{TemplateBinding FontSize}">
                  <Path Fill="{TemplateBinding Foreground}"
                        Width="16"
                        Height="8"
                        Stretch="Uniform"
                        HorizontalAlignment="Center"
                        VerticalAlignment="Center"
                        Data="{StaticResource ButtonSpinnerDecreaseButtonIcon}" />
                </RepeatButton>
              </UniformGrid>

              <ContentPresenter Name="PART_ContentPresenter"
                                Grid.Column="1"
                                ContentTemplate="{TemplateBinding ContentTemplate}"
                                Content="{TemplateBinding Content}"
                                HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
                                VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
                                Padding="{TemplateBinding Padding}" />
            </DockPanel>
          </Border>
        </DataValidationErrors>
      </ControlTemplate>
    </Setter>
  </Style>
</Window.Styles>