I am trying to use XamNumericEditor to achieve the following:
I want to limit input to be a nullable decimal number - when I blank the field, the decimal? bound to the control is set to null.
I want the control to be an optional field - right now, the control shows a red boarder when it has not been filled in, indicating to the user this is a required field.
Here is the XAML I currently have, but does not work based on the features above (note Config.MaxErrorPercent is a decimal? type):
<igEditors:XamNumericEditor Text="{Binding Config.MaxErrorPercent, Mode=TwoWay}" Mask="nnn.nnnnnnnnnnnnnnnnnn" Format="###.##################" HorizontalContentAlignment="Right" HorizontalAlignment="Center" VerticalAlignment="Center" Width="50" Margin="5"> <igEditors:XamNumericEditor.ValueConstraint> <igEditors:ValueConstraint MinInclusive="0" MaxInclusive="100" Nullable="True" ValidateAsType="Decimal"/> </igEditors:XamNumericEditor.ValueConstraint> </igEditors:XamNumericEditor>
Hi Gary,
Thank you for posting in our forums!
From your code snippet, you are binding to the Text property of the XamNumericEditor. If you instead bind to the Value property, this should be working as you expect.
Please let me know if you need any further assistance with this and I will be glad to help.
Thanks for the suggestion, I changed the code as shown below, however, with this change, while the bound variable does get set to null when I blank the field, if I then try to enter a valid value, the control shows a red border (which up to this point I have been assuming means it is a required field - see 2nd requirement of original post).
What does the red border mean for this control?
Also, how can I have the text in the control selected when the user single-clicks on the control?
<igEditors:XamNumericEditor Value="{Binding Config.MaxErrorPercent, Mode=TwoWay}" Mask="nnn.nnnnnnnnnnnnnnnnnn" Format="###.##################" HorizontalContentAlignment="Right" HorizontalAlignment="Center" VerticalAlignment="Center" Width="50" Margin="5"> <igEditors:XamNumericEditor.ValueConstraint> <igEditors:ValueConstraint MinInclusive="0" MaxInclusive="100" Nullable="True" ValidateAsType="Decimal"/> </igEditors:XamNumericEditor.ValueConstraint> </igEditors:XamNumericEditor>
Thanks!
The red outline indicates some error with the value. In this case the default ValueType of the XamNumericEditor is Double and being bound to a Decimal is causing the outline. To resolve this, you should set the ValueType to Decimal as demonstrated below.
xmlns:core="clr-namespace:System;assembly=mscorlib" <igEditors:XamNumericEditor Value="{Binding MaxErrorPercent, Mode=TwoWay}" ValueType="core:Decimal"
And in order to select the entire value when clicking on the editor, please see the following forum thread which suggests handling the GotFocus event and calling the SelectAll() method.
https://ko.infragistics.com/community/forums/f/ultimate-ui-for-wpf/7003/xam-editors-not-selecting-the-entire-text-number-when-receive-focus
If you need any further assistance with this, please let me know and I will be glad to help.
That was the missing key to making this work properly, here is the final XAML:
<igEditors:XamNumericEditor Value="{Binding Config.MaxErrorPercent, Mode=TwoWay}" Mask="nnn.nnnn" Format="###.####" ValueType="system:Decimal" GotFocus="XamNumericEditor_GotFocus" PromptChar="" HorizontalContentAlignment="Right" HorizontalAlignment="Center" VerticalAlignment="Center" Width="50" Margin="5"> <igEditors:XamNumericEditor.ValueConstraint> <igEditors:ValueConstraint MinInclusive="0" MaxInclusive="100" Nullable="True" ValidateAsType="Decimal"/> </igEditors:XamNumericEditor.ValueConstraint> </igEditors:XamNumericEditor>
Also the auto-selection suggestion works!