Numeric text box with MVVM Pattern

Question

I have seen implementations of numeric TextBox with code behind in WPF. How do we do this in MVVM pattern?

Answer 1

If you really wanted to do this in the ViewModel, you'd have to make your bound property a string. Ensure that the binding updates at each keystroke (using the UpdateSourceTrigger).

In your setter, reject non-numeric values by either raising an exception or trimming out non-numerical characters. The latter approach has the benefit of working for copy/paste operations where the pasted text may contain a mix of digits and letters, but only the digits must be retained.

That being said, I would agree with other suggestions that having a specialized control that only exposes a numeric property is a cleaner approach.

Regards,

Eric.

Answer 2

Well... if you want to be notified in your viewmodel when the text property of the numeric textbox changes just bind to it. If the .Text property of the numeric textbox is not a dependency property slap the coder!

this one: http://wpftoolkit.codeplex.com/wikipage?title=DecimalUpDown&referringTitle=Home

I can recommend and you can bind to it from the viewmodel via:

<!-- View: -->
<NumericTextBox Text="{Binding MyViewModelTextStringProperty}" />

//ViewModel:
public string MyViewModelTextStringProperty
{
  get/set with NotifyPropertyChanged....
}

Answer 3

honestly - what does MVVM and numeric textbox have in common?

if you want a numeric textbox you create a new TextBox or AttachedProperty or a Behaviour. Here is an example for a MaskedTextbox behaviour to see what i mean.

now to your MVVM part. i assume that you want to validate your input to be just numeric. if your viewmodel has an Property of type int, then your binding just works if your view got input which is convertable to int. otherwise your viewmodel will never be informed. there are 2 ways now:

first: you make sure that your view just can take numeric input (with your numeric textbox) and the viewmodel property can be int.

or second: your viewmodel property type is typeof string and you use IDataErrorInfo to let the view know when the input is not numeric.

Answer 4

In WPF if you bind the TextBox to a Decimal or a Int Property it will accept only that int or decimal otherwise it will show a red border that it does not have proper value in the binding. And if you are talking about the numeric updown textbox then it is readily available with WPF toolkit over here

Answer 5

By the standard definition of MVVM you would not want a ViewModel behind a custom control. All you should do is extend the TextBox control and ensure only numeric input is entered. You should also add a DependencyProperty that returns the numeric input.

The ViewModel would come in when that control is used in a window or a composite control. You would bind the Text or Numeric DependencyProperty to a public property in your ViewModel.