|
1 | | -# How to create a borderless Xamarin.Forms numeric control (SfNumericUpDown) |
| 1 | +# How to create a borderless Xamarin.Forms numeric control SfNumericUpDown |
2 | 2 |
|
3 | | -This article explains how to create a Syncfusion SfNumericUpDown without having its border as per in the following image |
| 3 | +This repository contains sample to create a borderless [Syncfusion Xamarin.Forms Numeric UpDown](https://help.syncfusion.com/xamarin/numericupdown/getting-started) control. |
4 | 4 |
|
5 | | - |
| 5 | +Please refer the KB through this [link](https://www.syncfusion.com/kb/11873/how-to-create-a-borderless-xamarin-forms-numeric-control-sfnumericupdown). |
6 | 6 |
|
7 | | -It has been achieved by using its custom renderer of Xamarin.Forms SfNumericUpDown with platform specific as per in the below code changes. |
| 7 | +## Syncfusion controls: |
8 | 8 |
|
9 | | -**[XAML]** |
| 9 | +This project used the following Syncfusion control(s): |
| 10 | +* [SfNumericUpDown](https://www.syncfusion.com/xamarin-ui-controls/xamarin-numericupdown) |
10 | 11 |
|
11 | | -*Control initialization with custom numericUpDown class* |
| 12 | +## Supported platforms |
12 | 13 |
|
13 | | - ``` |
14 | | - <local:CustomNumericUpDown x:Name="sfNumericUpDown" HeightRequest="100" Value="100" AllowNull="false" FormatString="n"/> |
15 | | -``` |
16 | | -*Create a CustomNumericUpDown class which is inherited from SfNumericUpDown.* |
| 14 | +| Platforms | Supported versions | |
| 15 | +| --------- | ------------------ | |
| 16 | +| Android | API level 21 and later versions | |
| 17 | +| iOS | iOS 9.0 and later versions | |
| 18 | +| UWP | Windows 10 devices | |
17 | 19 |
|
18 | | -``` |
19 | | - public class CustomNumericUpDown : SfNumericUpDown |
20 | | - { |
21 | | - } |
22 | | -``` |
| 20 | +## Requirements to run the sample |
23 | 21 |
|
24 | | -## Android |
25 | | -It has been achieved by setting null to the EditText Background which is a child of native numeric control as shown in below |
| 22 | +* [Visual Studio](https://visualstudio.microsoft.com/downloads/) or [Visual Studio for Mac](https://visualstudio.microsoft.com/vs/mac/) |
26 | 23 |
|
27 | | -``` |
28 | | - protected override void OnElementChanged(ElementChangedEventArgs<Syncfusion.SfNumericUpDown.XForms.SfNumericUpDown> e) |
29 | | - { |
30 | | - base.OnElementChanged(e); |
31 | | - if (Control != null) |
32 | | - { |
33 | | - for (int i = 0; i < Control.ChildCount; i++) |
34 | | - { |
35 | | - var child = Control.GetChildAt(i); |
36 | | - if (child is EditText) |
37 | | - { |
38 | | - var control = child as EditText; |
39 | | - control.Background = null; |
40 | | - } |
41 | | - } |
42 | | - } |
43 | | - } |
44 | | -``` |
| 24 | +Refer to the following link for more details - [System Requirements](https://help.syncfusion.com/xamarin/system-requirements) |
45 | 25 |
|
46 | | -## iOS |
47 | | -To achieve the same in iOS, set the 0 as border width of its native control. |
| 26 | +## How to run the sample |
48 | 27 |
|
49 | | -``` |
50 | | - protected override void OnElementChanged(ElementChangedEventArgs<Syncfusion.SfNumericUpDown.XForms.SfNumericUpDown> e) |
51 | | - { |
52 | | - base.OnElementChanged(e); |
53 | | - if (this.Control != null) |
54 | | - { |
55 | | - /// For Achieving Borderwidth customization. |
56 | | - this.Control.Layer.BorderWidth = 0f; |
57 | | - } |
58 | | - } |
59 | | -``` |
| 28 | +1. Clone the sample and open it in Visual Studio. |
60 | 29 |
|
61 | | -## UWP |
62 | | -By setting the 0 as border thickness as shown in below |
63 | | - |
64 | | -``` |
65 | | - protected override void OnElementChanged(ElementChangedEventArgs<SfNumericUpDown> e) |
66 | | - { |
67 | | - base.OnElementChanged(e); |
68 | | - if (Control != null) |
69 | | - { |
70 | | - Control.BorderThickness = new Windows.UI.Xaml.Thickness(0); |
71 | | - } |
72 | | - } |
73 | | -``` |
74 | | - |
75 | | -## See also |
76 | | - |
77 | | -[How to change border thickness of numeric control](https://www.syncfusion.com/kb/7633/how-to-change-borderwidth-of-numericupdown-by-using-custom-renderer) |
78 | | - |
79 | | -[Spin Button Customization in Xamarin NumericUpDown (SfNumericUpDown)](https://help.syncfusion.com/xamarin/numericupdown/spin-button-customization) |
80 | | - |
81 | | -[How to customize the color appearance of numeric controls in Xamarin.Forms](https://www.syncfusion.com/kb/11610/how-to-customize-the-color-appearance-of-numeric-controls-in-xamarin-forms) |
82 | | - |
83 | | -[How to customize the spin button of the NumericUpDown](https://www.syncfusion.com/kb/10156/how-to-customise-the-spin-button-of-the-numericupdown) |
84 | | - |
85 | | -[Auto Reverse in Xamarin NumericUpDown (SfNumericUpDown)](https://help.syncfusion.com/xamarin/numericupdown/auto-reverse) |
| 30 | + *Note: If you download the sample using the "Download ZIP" option, right-click it, select Properties, and then select Unblock.* |
| 31 | + |
| 32 | +2. Register your license key in the App.xaml.cs file as demonstrated in the following code. |
86 | 33 |
|
| 34 | + public App() |
| 35 | + { |
| 36 | + //Register Syncfusion license |
| 37 | + Syncfusion.Licensing.SyncfusionLicenseProvider.RegisterLicense("YOUR LICENSE KEY"); |
| 38 | + |
| 39 | + InitializeComponent(); |
| 40 | + |
| 41 | + MainPage = new App1.MainPage(); |
| 42 | + } |
| 43 | + |
| 44 | + Refer to this [link](https://help.syncfusion.com/xamarin/licensing/overview) for more details. |
| 45 | + |
| 46 | +3. Clean and build the application. |
87 | 47 |
|
| 48 | +4. Run the application. |
88 | 49 |
|
| 50 | +## License |
89 | 51 |
|
| 52 | +Syncfusion has no liability for any damage or consequence that may arise by using or viewing the samples. The samples are for demonstrative purposes, and if you choose to use or access the samples, you agree to not hold Syncfusion liable, in any form, for any damage that is related to use, for accessing, or viewing the samples. By accessing, viewing, or seeing the samples, you acknowledge and agree Syncfusion’s samples will not allow you seek injunctive relief in any form for any claim related to the sample. If you do not agree to this, do not view, access, utilize, or otherwise do anything with Syncfusion’s samples. |
0 commit comments