How to change the Spinner button position
Syncfusion NumericUpDown provides the support to change the position of the Spin button.
To set the position of the spin button on right:
Step 1: Set SpinButtonAlignment to Right.
Step 2: SpinButton will be displayed on the Right side of the SfNumericTextBox.
To set the position of the spin button on left:
Step 1: Set SpinButtonAlignment to Left.
Step 2: SpinButton will be displayed on the Left side of the SfNumericTextBox.
To set the position of the spin button on both side:
Step 1: Set SpinButtonAlignment to Both.
Step 2: SpinButton will be displayed on the both side of the SfNumericTextBox.
The below code illustrates the way to achieve this
XAML code to set Spin button to right side:
<?xml version="1.0" encoding="utf-8" ?> <ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" xmlns:local="clr-namespace:NumericUpDown" xmlns:numeric="clr-namespace:Syncfusion.SfNumericUpDown.XForms;assembly=Syncfusion.SfNumericUpDown.XForms" x:Class="NumericUpDown.MainPage"> <StackLayout> <numeric:SfNumericUpDown Value="10" FormatString="n" ParsingMode="Decimal" SpinButtonAlignment="Right" TextAlignment="Center"/> </StackLayout> </ContentPage>
C# code to set spin button on right side:
namespace NumericUpDown
{
public partial class MainPage : ContentPage
{
SfNumericUpDown numeric = new SfNumericUpDown();
public MainPage()
{
InitializeComponent();
StackLayout stack = new StackLayout();
numeric.Value = 10;
numeric.FormatString = "n";
numeric.ParsingMode = ParsingMode.Decimal;
numeric.SpinButtonAlignment = SpinButtonAlignment.Right;
numeric.TextAlignment = TextAlignment.Center;
numeric.BackgroundColor = Color.Gray;
numeric.HeightRequest = 300;
stack.Children.Add(numeric);
this.Content = stack;
}
}
}
Image when Spin button set to right side:
Image when Spin button set to left side:
Image when Spin button set to both side:
| ||||||||||||
