Avalonia/samples/ControlCatalog/Pages/NumericUpDownPage.xaml

<UserControl xmlns="https://github.com/avaloniaui"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:sys="using:System"
             xmlns:converter="using:ControlCatalog.Converter"
             xmlns:pages="using:ControlCatalog.Pages"
             x:Class="ControlCatalog.Pages.NumericUpDownPage"
             x:DataType="pages:NumbersPageViewModel">
  <StackPanel Orientation="Vertical" Spacing="4"
              MaxWidth="800">
    <TextBlock Margin="2" Classes="h2" TextWrapping="Wrap">Numeric up-down control provides a TextBox with button spinners that allow incrementing and decrementing numeric values by using the spinner buttons, keyboard up/down arrows, or mouse wheel.</TextBlock>

    <TextBlock Margin="2,5,2,2" FontSize="14" FontWeight="Bold">Features:</TextBlock>
    <WrapPanel Margin="-8,0">
      <Grid Grid.Row="0" Grid.Column="0" Margin="8" ColumnDefinitions="Auto, Auto" RowDefinitions="Auto,Auto,Auto,Auto,Auto">
        <TextBlock Grid.Row="0" Grid.Column="0" VerticalAlignment="Center" Margin="2">ShowButtonSpinner:</TextBlock>
        <CheckBox Grid.Row="0" Grid.Column="1" IsChecked="{Binding #upDown.ShowButtonSpinner}" VerticalAlignment="Center" Margin="2"/>

        <TextBlock Grid.Row="1" Grid.Column="0" VerticalAlignment="Center" Margin="2">IsReadOnly:</TextBlock>
        <CheckBox Grid.Row="1" Grid.Column="1" IsChecked="{Binding #upDown.IsReadOnly}" VerticalAlignment="Center" Margin="2"/>

        <TextBlock Grid.Row="2" Grid.Column="0" VerticalAlignment="Center" Margin="2">AllowSpin:</TextBlock>
        <CheckBox Grid.Row="2" Grid.Column="1" IsChecked="{Binding #upDown.AllowSpin}" VerticalAlignment="Center" Margin="2"/>

        <TextBlock Grid.Row="3" Grid.Column="0" VerticalAlignment="Center" Margin="2">ClipValueToMinMax:</TextBlock>
        <CheckBox Grid.Row="3" Grid.Column="1" IsChecked="{Binding #upDown.ClipValueToMinMax}" VerticalAlignment="Center" Margin="2"/>

      </Grid>
      <Grid Grid.Row="0" Grid.Column="1" Margin="8" ColumnDefinitions="Auto, 120" RowDefinitions="Auto,Auto,Auto,Auto,Auto">
        <TextBlock Grid.Row="0" Grid.Column="0" VerticalAlignment="Center" Margin="2">FormatString:</TextBlock>
        <ComboBox Grid.Row="0" Grid.Column="1" ItemsSource="{Binding Formats}" SelectedItem="{Binding SelectedFormat}"
                  VerticalAlignment="Center" Margin="2">
          <ComboBox.ItemTemplate>
            <DataTemplate>
              <StackPanel Orientation="Horizontal" Spacing="2">
                <TextBlock Text="{Binding Name}"/>
                <TextBlock Text="-"/>
                <TextBlock Text="{Binding Value}"/>
              </StackPanel>
            </DataTemplate>
          </ComboBox.ItemTemplate>
        </ComboBox>

        <TextBlock Grid.Row="1" Grid.Column="0" VerticalAlignment="Center" Margin="2">ButtonSpinnerLocation:</TextBlock>
        <ComboBox Grid.Row="1" Grid.Column="1" ItemsSource="{Binding SpinnerLocations}" SelectedItem="{Binding #upDown.ButtonSpinnerLocation}"
                  VerticalAlignment="Center" Margin="2"/>

        <TextBlock Grid.Row="2" Grid.Column="0" VerticalAlignment="Center" Margin="2">CultureInfo:</TextBlock>
        <ComboBox x:Name="CultureSelector" Grid.Row="2" Grid.Column="1" ItemsSource="{Binding Cultures}"
                  VerticalAlignment="Center" Margin="2"/>

        <TextBlock Grid.Row="3" Grid.Column="0" VerticalAlignment="Center" Margin="2">PlaceholderText:</TextBlock>
        <TextBox Grid.Row="3" Grid.Column="1" Text="{Binding #upDown.PlaceholderText}" VerticalAlignment="Center" Margin="2" />

        <TextBlock Grid.Row="4" Grid.Column="0" VerticalAlignment="Center" Margin="2">Text:</TextBlock>
        <TextBox Grid.Row="4" Grid.Column="1" Text="{Binding #upDown.Text}" VerticalAlignment="Center" Margin="2" />
      </Grid>
      <Grid Grid.Row="0" Grid.Column="2" Margin="8" RowDefinitions="Auto,Auto,Auto,Auto,Auto" ColumnDefinitions="Auto, Auto">
        <TextBlock Grid.Row="0" Grid.Column="0" VerticalAlignment="Center" Margin="10,2,2,2">Minimum:</TextBlock>
        <NumericUpDown Grid.Row="0" Grid.Column="1" Value="{Binding #upDown.Minimum}"
                       NumberFormat="{Binding #upDown.NumberFormat}" VerticalAlignment="Center" Margin="2" HorizontalAlignment="Center"/>

        <TextBlock Grid.Row="1" Grid.Column="0" VerticalAlignment="Center" Margin="10,2,2,2">Maximum:</TextBlock>
        <NumericUpDown Grid.Row="1" Grid.Column="1" Value="{Binding #upDown.Maximum}"
                       NumberFormat="{Binding #upDown.NumberFormat}" VerticalAlignment="Center" Margin="2" HorizontalAlignment="Center"/>

        <TextBlock Grid.Row="2" Grid.Column="0" VerticalAlignment="Center" Margin="10,2,2,2">Increment:</TextBlock>
        <NumericUpDown Grid.Row="2" Grid.Column="1" Value="{Binding #upDown.Increment}" VerticalAlignment="Center"
                       Margin="2" HorizontalAlignment="Center"/>

        <TextBlock Grid.Row="3" Grid.Column="0" VerticalAlignment="Center" Margin="10,2,2,2">Value:</TextBlock>
        <NumericUpDown Grid.Row="3" Grid.Column="1" Value="{Binding DecimalValue}" VerticalAlignment="Center"
                       Margin="2" HorizontalAlignment="Center"/>


      </Grid>
    </WrapPanel>

    <WrapPanel Margin="2,10,2,2">
      <StackPanel Orientation="Vertical" Margin="10">
        <Label Target="upDown" FontSize="14" FontWeight="Bold" VerticalAlignment="Center">Usage of decimal NumericUpDown:</Label>
        <NumericUpDown Name="upDown" Minimum="0" Maximum="10" Increment="0.5"
                       NumberFormat="{Binding #CultureSelector.SelectedItem, Converter={x:Static pages:NumericUpDownPage.CultureConverter}}"
                       VerticalAlignment="Center" Value="{Binding DecimalValue}"
                       PlaceholderText="Enter text" FormatString="{Binding SelectedFormat.Value}"/>
      </StackPanel>

      <StackPanel Orientation="Vertical" Margin="10">
        <Label Target="DoubleUpDown" FontSize="14" FontWeight="Bold" VerticalAlignment="Center">Usage of double NumericUpDown:</Label>
        <NumericUpDown Name="DoubleUpDown" Minimum="0" Maximum="10" Increment="0.5"
                       VerticalAlignment="Center" Value="{Binding DoubleValue}"
                       PlaceholderText="Enter text" FormatString="{Binding SelectedFormat.Value}"/>
      </StackPanel>

      <StackPanel Orientation="Vertical" Margin="10">
        <Label Target="ValidationUpDown" FontSize="14" FontWeight="Bold" VerticalAlignment="Center">NumericUpDown with Validation Errors:</Label>
        <NumericUpDown x:Name="ValidationUpDown" Minimum="0" Maximum="10" Increment="0.5"
                       VerticalAlignment="Center"
                       PlaceholderText="Enter text" FormatString="{Binding SelectedFormat.Value}">
          <DataValidationErrors.Error>
            <sys:Exception />
          </DataValidationErrors.Error>
        </NumericUpDown>
      </StackPanel>

      <StackPanel Orientation="Vertical" Margin="10">
        <Label Target="HexUpDown" FontSize="14" FontWeight="Bold" VerticalAlignment="Center">NumericUpDown in HEX mode:</Label>
        <NumericUpDown x:Name="HexUpDown" Value="0"
                       VerticalAlignment="Center">
          <NumericUpDown.TextConverter>
            <converter:HexConverter></converter:HexConverter>
          </NumericUpDown.TextConverter>
        </NumericUpDown>

      </StackPanel>
    </WrapPanel>

    <StackPanel Orientation="Vertical" Margin="10">
      <Label FontSize="14" FontWeight="Bold" Target="PlaceholderForegroundUpDown"
             Content="Placeholder with custom foreground color:"/>
      <NumericUpDown x:Name="PlaceholderForegroundUpDown"
                     PlaceholderText="Enter amount"
                     PlaceholderForeground="Orange"/>
    </StackPanel>

    <StackPanel Margin="10">
      <Label FontSize="14" FontWeight="Bold" Target="InnerContent"
             Content="Inner Contents"/>
      <NumericUpDown ButtonSpinnerLocation="Left"
                     TextAlignment="Right"
                     x:Name="InnerContent">
        <NumericUpDown.InnerLeftContent>
          <TextBlock Text="m"
            TextAlignment="Center"
            VerticalAlignment="Center"/>
        </NumericUpDown.InnerLeftContent>
        <NumericUpDown.InnerRightContent>
          <Button Content="X"/>
        </NumericUpDown.InnerRightContent>
      </NumericUpDown>
    </StackPanel>
  </StackPanel>
</UserControl>