UpDown Button in .NET MAUI NumericUpDown

8 Jan 202514 minutes to read

This section describes how to change the value in the NumericUpDown control using keys, mouse scrolling, and the up-down button

Increase or decrease value

You can increment or decrement the value in the NumericUpDown control using the UpArrow, DownArrow, PageUp, and PageDown keys. You can change the increment or decrement value when the Arrow keys are pressed using the SmallChange property and Page keys using the LargeChange property. By default, the value of the SmallChange property is 1, and the LargeChange property is 10.

NOTE

The value in the NumericUpDown can also be changed by mouse scrolling. The mouse scrolling increases or decreases the value based on the SmallChange property.

XAML

<editors:SfNumericUpDown HorizontalOptions="Center"
                         VerticalOptions="Center" 
                         SmallChange="5"
                         Value="10"
                         LargeChange="10" />

C#

SfNumericUpDown sfNumericUpDown= new SfNumericUpDown();
sfNumericUpDown.Value=10;
sfNumericUpDown.SmallChange=5;
sfNumericUpDown.LargeChange=10;
sfNumericUpDown.HorizontalOptions = LayoutOptions.Center;
sfNumericUpDown.VerticalOptions = LayoutOptions.Center;

UpDown button placement

You can increase or decrease the value of the NumericUpDown control using the up-down button. By default, the value of the UpDownPlacementMode property is Inline which positions the up-down buttons in a horizontal orientation. You can adjust the position of the up-down buttons by setting the UpDownPlacementMode property to InlineVertical for vertical orientation.

NOTE

When using the up-down button, the NumericUpDown control value changes based on the value of the SmallChange property.

XAML

<editors:SfNumericUpDown HorizontalOptions="Center"
                         VerticalOptions="Center"
                         Value="24";
                         UpDownPlacementMode="InlineVertical" />

C#

SfNumericUpDown sfNumericUpDown = new SfNumericUpDown();
sfNumericUpDown.HorizontalOptions = LayoutOptions.Center;
sfNumericUpDown.VerticalOptions = LayoutOptions.Center;
sfNumericUpDown.Value=360;
sfNumericUpDown.UpDownPlacementMode = NumericUpDownUpDownPlacementMode.Inline;

UpDown button alignment

The UpDown button alignment in the NumericUpDown control can be customized using the UpDownButtonAlignment property. The buttons can be aligned to the following positions:

Left: Positions the buttons to the left of the control.
Right: Positions the buttons to the right of the control.
Both: Positions the buttons on both sides of the control.

The default updown button alignment is Right.

XAML

<editors:SfNumericUpDown HorizontalOptions="Center"
                         VerticalOptions="Center"
                         Value="24";
                         UpDownButtonAlignment="Both" />

C#

SfNumericUpDown sfNumericUpDown = new SfNumericUpDown();
sfNumericUpDown.HorizontalOptions = LayoutOptions.Center;
sfNumericUpDown.VerticalOptions = LayoutOptions.Center;
sfNumericUpDown.Value=360;
sfNumericUpDown.UpDownButtonAlignment = NumericUpDownUpDownPlacementMode.Inline;

UpDown button customization

UpDown button color

Customize the NumericUpDown control button color by using the UpDownButtonColor property.

XAML

<editors:SfNumericUpDown HeightRequest="50"
                         WidthRequest="200"
                         HorizontalOptions="Center"
                         VerticalOptions="Center"
                         Value="360"
                         UpDownButtonColor="Blue"/>

C#

SfNumericUpDown sfNumericUpDown = new SfNumericUpDown();
sfNumericUpDown.HeightRequest= 50;
sfNumericUpDown.WidthRequest = 200;
sfNumericUpDown.HorizontalOptions = LayoutOptions.Center
sfNumericUpDown.VerticalOptions = LayoutOptions.Center;
sfNumericUpDown.Value = 360;
sfNumericUpDown.UpDownPlacementMode = NumericUpDownUpDownPlacementMode.Inline;
sfNumericUpDown.UpDownButtonColor = Colors.Blue;

UpDown button template

The NumericUpDown control supports customization of the UpDownButton’s appearance through the use of the UpButtonTemplate and DownButtonTemplate properties.

NOTE

The UpDownButton template only supports Inline Placement mode.

XAML

<VerticalStackLayout Spacing="10" VerticalOptions="Center">
    <editors:SfNumericUpDown x:Name="NumericUpDown"
                             WidthRequest="200"
                             HeightRequest="40" 
                             VerticalOptions="Center"
                             Value="50">
        <editors:SfNumericUpDown.UpButtonTemplate>
            <DataTemplate>
                <Grid>
                    <Label  Text="&#xe791;" 
                            FontFamily="FontIcon"  
                            FontAttributes="Bold" 
                            Padding="6,6,8,0" 
                            TextColor="Green" />
                </Grid>
            </DataTemplate>
        </editors:SfNumericUpDown.UpButtonTemplate>
        <editors:SfNumericUpDown.DownButtonTemplate>
            <DataTemplate>
                <Grid>
                    <Label  Text="&#xe792;" 
                            FontFamily="FontIcon"  
                            FontAttributes="Bold" 
                            Padding="6,6,8,0" 
                            TextColor="Red" />
                </Grid>
            </DataTemplate>
        </editors:SfNumericUpDown.DownButtonTemplate>
    </editors:SfNumericUpDown>
</VerticalStackLayout>

C#

public partial class MainPage : ContentPage
 {
     public MainPage()
     {
         InitializeComponent();
         var verticalStackLayout = new StackLayout
         {
             Spacing = 10,
             VerticalOptions = LayoutOptions.Center
         };
         var NumericUpDown = new SfNumericUpDown
         {
             WidthRequest = 200,
             HeightRequest = 40,
             VerticalOptions = LayoutOptions.Center,
             Value = 50
         };
         var upButtonTemplate = new DataTemplate(() =>
         {
             var grid = new Grid();
             var label = new Label
             {
                 Padding = new Thickness(6, 6, 8, 0),
                 FontFamily = "FontIcon",
                 FontAttributes="Bold" 
                 Text = "\ue791", // Use Unicode directly for the icon
                 TextColor = Colors.Green,
             };
             grid.Children.Add(label);
             return grid;
         });
         var downButtonTemplate = new DataTemplate(() =>
         {
             var grid = new Grid();
             var label = new Label
             {
                 Padding = new Thickness(6, 6, 8, 0),
                 FontFamily = "FontIcon",
                 FontAttributes="Bold" 
                 Text = "\ue792",
                 TextColor = Colors.Red,
             };
             grid.Children.Add(label);
             return grid;
         });
         NumericUpDown.UpButtonTemplate = upButtonTemplate;
         NumericUpDown.DownButtonTemplate = downButtonTemplate;
         verticalStackLayout.Children.Add(NumericUpDown);
         Content = verticalStackLayout;
     }
 }

Auto reverse in SfNumericUpDown

Auto-reverse in NumericUpDown allows the control to automatically switch direction when reaching its Minimum or Maximum value. When incrementing, it starts at the Minimum and progresses to the Maximum, and conversely.

NOTE

The default value of this property is false.

XAML

<editors:SfNumericUpDown UpDownPlacementMode="Inline"
                        AutoReverse="True"
                        Minimum="0"
                        Maximum="10"/>

C#

SfNumericUpDown sfNumericUpDown = new SfNumericUpDown();
sfNumericUpDown.UpDownPlacementMode = NumericUpDownUpDownPlacementMode.Inline;
sfNumericUpDown.AutoReverse = true;
sfNumericUpDown.Minimum=0;
sfNumericUpDown.Maximum=10;