Articles in this section
Category / Section

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
No
Help us improve this page
Please provide feedback or comments
Comments (0)
Please  to leave a comment
Access denied
Access denied