Class SfNumberBox

Represents a control that can be used to display and edit numbers.

Inheritance

System.Object

SfNumberBox

Namespace: Syncfusion.UI.Xaml.Editors

Assembly: Syncfusion.Editors.WinUI.dll

Syntax

public class SfNumberBox : Control

Examples

<editor:SfNumberBox PlaceholderText = "Enter your age"
   Value="{x:Bind Path=ViewModel.NumberBoxValue, Mode=TwoWay}" />

Constructors

SfNumberBox()

Initializes a new instance of the SfNumberBox class.

Declaration

public SfNumberBox()

Fields

AllowNullProperty

Identifies AllowNull dependency property.

Declaration

public static readonly DependencyProperty AllowNullProperty

Field Value

Type
Microsoft.UI.Xaml.DependencyProperty

CultureProperty

Identifies Culture dependency property.

Declaration

public static readonly DependencyProperty CultureProperty

Field Value

Type
Microsoft.UI.Xaml.DependencyProperty

CustomFormatProperty

Identifies CustomFormat dependency property.

Declaration

public static readonly DependencyProperty CustomFormatProperty

Field Value

Type
Microsoft.UI.Xaml.DependencyProperty

DescriptionProperty

Identifies Description dependency property.

Declaration

public static readonly DependencyProperty DescriptionProperty

Field Value

Type
Microsoft.UI.Xaml.DependencyProperty

HeaderProperty

Identifies Header dependency property.

Declaration

public static readonly DependencyProperty HeaderProperty

Field Value

Type
Microsoft.UI.Xaml.DependencyProperty

HeaderTemplateProperty

Identifies HeaderTemplate dependency property.

Declaration

public static readonly DependencyProperty HeaderTemplateProperty

Field Value

Type
Microsoft.UI.Xaml.DependencyProperty

InputScopeProperty

Identifies InputScope dependency property.

Declaration

public static readonly DependencyProperty InputScopeProperty

Field Value

Type
Microsoft.UI.Xaml.DependencyProperty

IsEditableProperty

Identifies IsEditable dependency property.

Declaration

public static readonly DependencyProperty IsEditableProperty

Field Value

Type
Microsoft.UI.Xaml.DependencyProperty

LargeChangeProperty

Identifies LargeChange dependency property.

Declaration

public static readonly DependencyProperty LargeChangeProperty

Field Value

Type
Microsoft.UI.Xaml.DependencyProperty

MaximumProperty

Identifies Maximum dependency property.

Declaration

public static readonly DependencyProperty MaximumProperty

Field Value

Type
Microsoft.UI.Xaml.DependencyProperty

MinimumProperty

Identifies Minimum dependency property.

Declaration

public static readonly DependencyProperty MinimumProperty

Field Value

Type
Microsoft.UI.Xaml.DependencyProperty

NumberFormatterProperty

Identifies NumberFormatter dependency property.

Declaration

public static readonly DependencyProperty NumberFormatterProperty

Field Value

Type
Microsoft.UI.Xaml.DependencyProperty

PlaceholderTextProperty

Identifies PlaceholderText dependency property.

Declaration

public static readonly DependencyProperty PlaceholderTextProperty

Field Value

Type
Microsoft.UI.Xaml.DependencyProperty

ShowClearButtonProperty

Identifies ShowClearButton dependency property.

Declaration

public static readonly DependencyProperty ShowClearButtonProperty

Field Value

Type	Description
Microsoft.UI.Xaml.DependencyProperty	The identifier for the ShowClearButton dependency property.

SmallChangeProperty

Identifies SmallChange dependency property.

Declaration

public static readonly DependencyProperty SmallChangeProperty

Field Value

Type
Microsoft.UI.Xaml.DependencyProperty

TextBoxVisibilityProperty

Identifies TextBoxVisibility dependency property.

Declaration

public static readonly DependencyProperty TextBoxVisibilityProperty

Field Value

Type
Microsoft.UI.Xaml.DependencyProperty

UpDownPlacementModeProperty

Identifies UpDownPlacementMode dependency property.

Declaration

public static readonly DependencyProperty UpDownPlacementModeProperty

Field Value

Type
Microsoft.UI.Xaml.DependencyProperty

ValueProperty

Identifies Value dependency property.

Declaration

public static readonly DependencyProperty ValueProperty

Field Value

Type
Microsoft.UI.Xaml.DependencyProperty

Properties

AllowNull

Gets or sets a value indicating whether the SfNumberBox allows null value or not.

Declaration

public bool AllowNull { get; set; }

Property Value

Type	Description
System.Boolean	true when SfNumberBox allows null value input, otherwise false. The default value is true.

Remarks

Placeholder text will only appear when Value is set to NaN or null or when the input is cleared by the user.

Culture

Gets or sets the culture for SfNumberBox.

Declaration

public CultureInfo Culture { get; set; }

Property Value

Type	Description
System.Globalization.CultureInfo	The default value is "en-US".

Remarks

When NumberFormatter is not null, Culture property not effective.

CustomFormat

Gets or sets the format used to specify the formatting of Value.

Declaration

public string CustomFormat { get; set; }

Property Value

Type	Description
System.String	The default value is null.

Remarks

Change the display format of the Value using NumberFormatter or CustomFormat. When both NumberFormatter and CustomFormat are specified, CustomFormat will take higher precedence. NumberFormatter.

Examples

To display custom text.

editor.CustomFormatter = "#.# dollars";

To display a minimum of 2 decimal digits and maximum of 4 digits, with grouping.

editor.CustomFormatter = "#,0.00##";

To remove group separator.

editor.CustomFormatter = "#,#.#";

To display currency format.

editor.CustomFormatter = "C";

To display percentage format, with a minimum of 2 decimal digits.

editor.CustomFormatter = "#.#%";

Description

Gets or sets content that is shown below the control. The content should provide guidance about the input expected by the control.

Declaration

public object Description { get; set; }

Property Value

Type	Description
System.Object	The default value is null.

Examples

Set string as description.

<!-- String description -->
<editor:SfNumberBox Description = "Quantity" />

Set a control as description.

<!-- TextBlock as description -->
<editor:SfNumberBox>
    <editor:SfNumberBox.Description>
        <TextBlock Text = "Quantity" FontWeight="Bold"/>
    </editor:SfNumberBox.Description>
</editor:SfNumberBox>

Header

Gets or sets the content for the control's header.

Declaration

public object Header { get; set; }

Property Value

Type	Description
System.Object	The default value is null.

Examples

Set string as Header.

<!-- String header -->
<editor:SfNumberBox Header = "Quantity" />

Set a control as Header.

<!-- TextBlock as header -->
<editor:SfNumberBox>
    <editor:SfNumberBox.Header>
        <TextBlock Text = "Quantity" FontWeight="Bold"/>
    </editor:SfNumberBox.Header>
</editor:SfNumberBox>

Apply a DataTemplate as Header.

<!-- Templated header -->
<editor:SfNumberBox Header = "Quantity">
    <editor:SfNumberBox.HeaderTemplate>
        <DataTemplate>
            <TextBlock Text="{Binding}" FontWeight="Bold"/>
        </DataTemplate>
    </editor:SfNumberBox.HeaderTemplate>
</editor:SfNumberBox>

HeaderTemplate

Gets or sets the DataTemplate used to display the content of the control's header.

Declaration

public DataTemplate HeaderTemplate { get; set; }

Property Value

Type	Description
Microsoft.UI.Xaml.DataTemplate	The default value is null.

Examples

Set string as Header.

<!-- String header -->
<editor:SfNumberBox Header = "Quantity" />

Set a control as Header.

<!-- TextBlock as header -->
<editor:SfNumberBox>
    <editor:SfNumberBox.Header>
        <TextBlock Text = "Quantity" FontWeight="Bold"/>
    </editor:SfNumberBox.Header>
</editor:SfNumberBox>

Apply a DataTemplate as Header.

<!-- Templated header -->
<editor:SfNumberBox Header = "Quantity">
    <editor:SfNumberBox.HeaderTemplate>
        <DataTemplate>
            <TextBlock Text="{Binding}" FontWeight="Bold"/>
        </DataTemplate>
    </editor:SfNumberBox.HeaderTemplate>
</editor:SfNumberBox>

InputScope

Gets or sets the context for input used.

Declaration

public InputScope InputScope { get; set; }

Property Value

Type
Microsoft.UI.Xaml.Input.InputScope

See Also

Use input scope to change the touch keyboard

IsEditable

Gets or sets a value indicating whether the SfNumberBox allows editing the value or not.

Declaration

public bool IsEditable { get; set; }

Property Value

Type	Description
System.Boolean	true when SfNumberBox is editable, otherwise false. The default value is true.

LargeChange

Gets or sets the value that is added to or subtracted from Value when a large change is made, such as with the PageUP and PageDown keys.

Declaration

public double LargeChange { get; set; }

Property Value

Type	Description
System.Double	The default value is 10.

Maximum

Gets or sets the numerical maximum for Value.

Declaration

public double Maximum { get; set; }

Property Value

Type	Description
System.Double	The default value is double.MaxValue.

Minimum

Gets or sets the numerical minimum for Value.

Declaration

public double Minimum { get; set; }

Property Value

Type	Description
System.Double	The default value is double.MinValue.

NumberFormatter

Gets or sets the object used to specify the formatting of Value.

Declaration

public INumberFormatter NumberFormatter { get; set; }

Property Value

Type	Description
Windows.Globalization.NumberFormatting.INumberFormatter	The default value is null.

Remarks

Change the display format of the Value using NumberFormatter or CustomFormat. When both NumberFormatter and CustomFomat are specified, CustomFormat will take higher precedence. CustomFormat.

Examples

To display a minimum of 2 decimal digits and maximum of 4 digits.

editor.NumberFormatter = new DecimalFormatter()
{
    FractionDigits = 2,
    NumberRounder = new IncrementNumberRounder
    {
        Increment = 0.0001
    }
};

To remove group separator and change the language.

editor.NumberFormatter = new DecimalFormatter()
{
    IsGrouped = false,
    NumeralSystem = "Arab",
};

To display currency format.

editor.NumberFormatter = new CurrencyFormatter("USD");

To display percentage format, with a minimum of 2 decimal digits.

editor.NumberFormatter = new PercentFormatter()
{
    FractionDigits = 2
};

See Also

DecimalFormatter

CurrencyFormatter

PercentFormatter

PlaceholderText

Gets or sets the text that is displayed in the control until the value is changed by a user action or some other operation.

Declaration

public string PlaceholderText { get; set; }

Property Value

Type	Description
System.String	The default value is null.

Remarks

Placeholder text will only appear when Value is set to NaN or when the input is cleared by the user. Value can be cleared by selecting all the text and delete, by clicking the clear button, or by setting Value to null. Value can be cleared, only when AllowNull is set to true.

ShowClearButton

Gets or sets a value indicating whether to show or hide the clear button in SfNumberBox.

Declaration

public bool ShowClearButton { get; set; }

Property Value

Type	Description
System.Boolean	The default value is true.

SmallChange

Gets or sets the value that is added to or subtracted from Value when a small change is made, such as with an arrow key or scrolling.

Declaration

public double SmallChange { get; set; }

Property Value

Type	Description
System.Double	The default value is 1.

TextBoxVisibility

Gets or sets a value indicating whether to show or hide the text box.

Declaration

public Visibility TextBoxVisibility { get; set; }

Property Value

Type	Description
Microsoft.UI.Xaml.Visibility	The default value is visible.

Remarks

If the value is set to Collapse, only the up and down buttons will be visible.

UpDownPlacementMode

Gets or sets a value that indicates the placement of buttons used to increment or decrement the Value property.

Declaration

public NumberBoxUpDownPlacementMode UpDownPlacementMode { get; set; }

Property Value

Type	Description
NumberBoxUpDownPlacementMode	Default value is Hidden.

Value

Gets or sets the numeric value of a SfNumberBox.

Declaration

public Nullable<double> Value { get; set; }

Property Value

Type	Description
System.Nullable<System.Double>	The default value is null.

Remarks

When Value is changed, ValueChanged event will be triggered. When editing, Value will not be updated immediately. The entered value will be validated and updated when enter key is pressed or the control loses focus. Disable value editing by setting IsEditable to false.

Methods

OnApplyTemplate()

Declaration

protected override void OnApplyTemplate()

OnCreateAutomationPeer()

Declaration

protected override AutomationPeer OnCreateAutomationPeer()

Returns

Type
Microsoft.UI.Xaml.Automation.Peers.AutomationPeer

OnGotFocus(RoutedEventArgs)

Declaration

protected override void OnGotFocus(RoutedEventArgs e)

Parameters

Type	Name	Description
Microsoft.UI.Xaml.RoutedEventArgs	e

OnLostFocus(RoutedEventArgs)

Declaration

protected override void OnLostFocus(RoutedEventArgs e)

Parameters

Type	Name	Description
Microsoft.UI.Xaml.RoutedEventArgs	e

OnPointerEntered(PointerRoutedEventArgs)

Declaration

protected override void OnPointerEntered(PointerRoutedEventArgs e)

Parameters

Type	Name	Description
Microsoft.UI.Xaml.Input.PointerRoutedEventArgs	e

OnPointerExited(PointerRoutedEventArgs)

Declaration

protected override void OnPointerExited(PointerRoutedEventArgs e)

Parameters

Type	Name	Description
Microsoft.UI.Xaml.Input.PointerRoutedEventArgs	e

OnPointerWheelChanged(PointerRoutedEventArgs)

Declaration

protected override void OnPointerWheelChanged(PointerRoutedEventArgs e)

Parameters

Type	Name	Description
Microsoft.UI.Xaml.Input.PointerRoutedEventArgs	e

Events

ValueChanged

Occurs after the user triggers evaluation of new input by pressing the Enter key, clicking a spin button, or by changing focus.

Declaration

public event EventHandler<ValueChangedEventArgs> ValueChanged

Event Type

Type
System.EventHandler<ValueChangedEventArgs>