How to customise the spin button of the NumericUpDown

2 mins read

Syncfusion NumericUpDown for Xamarin.Forms provides support to customise the spin button.

The following steps explain how to add a view inside the spin button of the NumericUpDown:

Step 1: Create a NumericUpDown sample with all the required assemblies.

Step 2: Add the necessary images in the required folder of all the projects that have to be shown in the spin button

Android: Resource > drawable

iOS: Resource

UWP: Add the images inside the project.

Step 3: Add the images inside the ButtonView property of UpDownButtonSettings, and then set view to the increment and decrement buttons separately inside the IncrementButtonSettings and DecrementButtonSettings properties of the UpDownButtonSettings class.

Initialize the NumericUpDown control in the xaml page, in which set the view to be added inside the spin button, and then add the required properties to display the image inside the view of increment and decrement of the spin button in NumericUpDown.

Code Snippet

    <updown:SfNumericUpDown x:Name="upDown" SpinButtonAlignment="Both" TextAlignment="Center">
            <updown:SfNumericUpDown.IncrementButtonSettings>
                <updown:UpDownButtonSettings ButtonHeight="45" ButtonWidth="45">
                    <updown:UpDownButtonSettings.ButtonView>
                        <Grid HeightRequest="40" WidthRequest="40">
                            <Image Source="up.png" Aspect="AspectFit" />
                        </Grid>
                    </updown:UpDownButtonSettings.ButtonView>
                </updown:UpDownButtonSettings>
            </updown:SfNumericUpDown.IncrementButtonSettings>
            <updown:SfNumericUpDown.DecrementButtonSettings>
                <updown:UpDownButtonSettings ButtonHeight="45" ButtonWidth="45">
                    <updown:UpDownButtonSettings.ButtonView>
                        <Grid HeightRequest="40" WidthRequest="40">
                            <Image Source="down.png" Aspect="AspectFit" />
                        </Grid>
                    </updown:UpDownButtonSettings.ButtonView>
                </updown:UpDownButtonSettings>
            </updown:SfNumericUpDown.DecrementButtonSettings>
        </updown:SfNumericUpDown>

Step 4: The NumericUpDown provides support for adding the images directly to the increment and decrement button.

   <updown:SfNumericUpDown x:Name="upDown" SpinButtonAlignment="Both" TextAlignment="Center">
            <updown:SfNumericUpDown.IncrementButtonSettings>
                <updown:UpDownButtonSettings ButtonImage="up" ButtonHeight="35" ButtonWidth="35" />
            </updown:SfNumericUpDown.IncrementButtonSettings>
            <updown:SfNumericUpDown.DecrementButtonSettings>
                <updown:UpDownButtonSettings ButtonImage="down" ButtonHeight="35" ButtonWidth="35" />
            </updown:SfNumericUpDown.DecrementButtonSettings>
        </updown:SfNumericUpDown>

Output

../Desktop/Screen%20Shot%202019-01-22%20at%2012.27.03%20PM.png

Step 5: The NumericUpDown provides support to customise the spin button using font icon. The following code explains how to set the font icon for the increment and decrement button.

Code Snippet

  <updown:SfNumericUpDown x:Name="upDown" SpinButtonAlignment="Both" TextAlignment="Center">
            <updown:SfNumericUpDown.IncrementButtonSettings>
                <updown:UpDownButtonSettings ButtonFontIcon="&#xe701;" ButtonFontFamily="numeric.ttf" ButtonHeight="35" ButtonWidth="35" />
            </updown:SfNumericUpDown.IncrementButtonSettings>
            <updown:SfNumericUpDown.DecrementButtonSettings>
                <updown:UpDownButtonSettings ButtonFontIcon="&#xe700;" ButtonFontFamily="numeric.ttf" ButtonHeight="35" ButtonWidth="35" />
            </updown:SfNumericUpDown.DecrementButtonSettings>
        </updown:SfNumericUpDown>

Output

/Users/Syncfusion/xamarin-docs_ug/Xamarin/SfNumericUpDown/images/FontTTf.png

Did you find this information helpful?

Yes

Comments (0)

How to customise the spin button of the NumericUpDown

Code Snippet

Code Snippet

Access denied