We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

How to apply default TextBox style to SfNumericTextBox


I want use SfNumericTextBox control, but I would like to know if there is a way to affect the default TextBox style?

There are 2 main differences between them:
- the border color (selected and unselected)
- the size of the cross button

Can we do this easily?

7 Replies

PB Priyanga Balasubramaniam Syncfusion Team October 31, 2016 11:32 AM UTC

Hi Pierre,

Thank you for contacting Syncfusion Support.

We have prepared the workaround sample to meet your requirement. In this sample, we have overridden the SfNumericTextBox Style and changed the Border color in "Focused" Visual state and reduced the Delete Button height by changing the FontSize for "GlyphElement" TextBlock in DeleteButtonStyle.

Please download the sample from the below link.


Priyanga B 

PD Pierre-Christophe DUS November 4, 2016 04:45 PM UTC

Thank you!
It's better but there are always some differences:
- on the border color when the controls are not focused
- on the border color when the controls are focused
- on the cross button: the background color when button is pressed, and the size of the MS TextBox seems to be smaller

Isn't there a way to get the default TextBox style?


VI Vinothini Syncfusion Team November 7, 2016 12:20 PM UTC

Hi Pierre, 

Thank you for your update. 

To get the default TextBox style , we have changed the border brush color and the background color of the SfNumericTextBox. The sample has been modified according to your requirement and it is available in the below link. 

Please look into the sample and let us know whether it meets your requirement. 


PD Pierre-Christophe DUS November 11, 2016 02:10 PM UTC

It's good like this, thank you!
Is is possible to find the default templates of each control?

VI Vinothini Syncfusion Team November 14, 2016 09:20 AM UTC

Hi Pierre, 
Thank you for your update. 
The default template of each control are shipped along with the assemblies under the Themes folder. These folders are under the following location. 
“[Installed Drive]:\ Program Files (x86)\Syncfusion\Essential Studio\$Version #\Assemblies for Universal Windows\10.0\<<Control>>\Themes” 
For example : C:\Program Files (x86)\Syncfusion\Essential Studio\\Assemblies for Universal Windows\10.0\Syncfusion.SfInput.UWP\Themes 

PD Pierre-Christophe DUS December 15, 2016 05:58 PM UTC

Sorry for disturbing you again, but I have a new "request".
For customizing the render of my app, we have applied custom system colors on all controls with:
<SolidColorBrush x:Key="SystemControlBackgroundAccentBrush" Color="{ThemeResource SystemAccentColor}" />
<SolidColorBrush x:Key="SystemControlDisabledAccentBrush" Color="{ThemeResource SystemAccentColor}" />
<SolidColorBrush x:Key="SystemControlForegroundAccentBrush" Color="{ThemeResource SystemAccentColor}" />
<SolidColorBrush x:Key="SystemControlHighlightAccentBrush" Color="{ThemeResource SystemAccentColor}" />
<SolidColorBrush x:Key="SystemControlHighlightAltAccentBrush" Color="{ThemeResource SystemAccentColor}" />
<SolidColorBrush x:Key="SystemControlHighlightAltListAccentHighBrush" Color="{ThemeResource SystemAccentColor}" Opacity="0.9" />
<SolidColorBrush x:Key="SystemControlHighlightAltListAccentLowBrush" Color="{ThemeResource SystemAccentColor}" Opacity="0.6" />
<SolidColorBrush x:Key="SystemControlHighlightAltListAccentMediumBrush" Color="{ThemeResource SystemAccentColor}" Opacity="0.8" />
<SolidColorBrush x:Key="SystemControlHighlightListAccentHighBrush" Color="{ThemeResource SystemAccentColor}" Opacity="0.9" />
<SolidColorBrush x:Key="SystemControlHighlightListAccentLowBrush" Color="{ThemeResource SystemAccentColor}" Opacity="0.6" />
<SolidColorBrush x:Key="SystemControlHighlightListAccentMediumBrush" Color="{ThemeResource SystemAccentColor}" Opacity="0.8" />
<SolidColorBrush x:Key="SystemControlHyperlinkTextBrush" Color="{ThemeResource SystemAccentColor}" />
<SolidColorBrush x:Key="ContentDialogBorderThemeBrush" Color="{ThemeResource SystemAccentColor}" />
<SolidColorBrush x:Key="JumpListDefaultEnabledBackground" Color="{ThemeResource SystemAccentColor}" />
I have updated some color's references from your sample, but there is always a problem: when the user select the content of the SfNumericTextBox, the background color is not updated.
Here is a screenshot that will much better describe the problem:
I have attached the updated template of my SfNumericTextBox.

Let me know if you need more explanations.



Attachment: Template_1db0e1cd.7z

VI Vinothini Syncfusion Team December 16, 2016 12:37 PM UTC

Hi Pierre, 
Thank you for your update. 
The Text highlight color can be changed using the SelectionHighlightColor property. We have updated the sample and it is available in the below location. 

Live Chat Icon For mobile
Up arrow icon