I was testing the nuances of Data Binding in WPF today, and I came across a strange problem.
In my View, I have
<TextBox Text="{Binding MyInt, UpdateSourceTrigger=LostFocus, StringFormat='{}{##.##}'}"/>
<Label Content="{Binding MyStr2}"/>
In my ViewModel, I have
private decimal myInt;
public decimal MyInt
{
get { return myInt; }
set
{
if (value == myInt) { return; }
myInt = value;
OnPropertyChange();
OnPropertyChange("MyStr2");
}
}
public string MyStr2
{
get
{
return myInt.ToString("N2", CultureInfo.CreateSpecificCulture("en-IN"));
}
}
I want to get the data from the textbox, and format it properly and display it in a label. Simple and easy.
Now, I can only enter decimal data in the textbox, or else the border turns red, indicating an input error.
All is fine when I input decimal data:
But, when I enter garbage data, this happens:
The red border shows there is data input error. But, the label still reflects the older data. I want the label to fall back to 0.00 in case of input error. Is there any way to do that?
I have tried to find a contrived way to do it, and it works, sort of, in an extremely hacky kludgy way.
private string myInt;
private decimal myIntActual;
public string MyInt
{
get
{
return myInt;
}
set
{
if (value == myInt) { return; }
Decimal.TryParse(value.ToString(), out myIntActual);
myInt = myIntActual.ToString();
Decimal.TryParse(myInt, out myIntActual);
OnPropertyChange();
OnPropertyChange("MyStr2");
}
}
public string MyStr2
{
get
{
return myIntActual.ToString("N2", CultureInfo.CreateSpecificCulture("en-IN"));
}
}
What this does is that, it takes the input as a string, tries to parse it to decimal, if it cant, it will return zero. But I have sacrificed the input validation with this code, not to mention that the code looks ugly.
I understand that WPF has a fallback value mechanism when binding fails. Is there any fallback value mechanism in case of input error?
EDIT:
One more thing. After entering the garbage data, the next time I enter valid data, the value somehow reaches the viewmodel, but the textbox becomes blank. And it is a reproducible problem.
Screenshot A:
This is working as is expected.
The garbage data is then entered. Do note that, as the UpdateSourceTrigger is LostFocus, the error does not come up until the focus is lost.
I then enter valid data, and...
on losing focus, the textbox blanks out. Do note, that the label is properly updated. I set up breakpoints to see if the binded property is updated or not, and it is, yet the textbox becomes blank. Why is that?
Here's the trigger idea. I tested this and it's working for me. It works with no changes to your viewmodel or code behind.
<TextBox
x:Name="MyIntTextBox"
Text="{Binding MyInt, UpdateSourceTrigger=LostFocus, StringFormat='{}{##.##}'}"
/>
<Label Content="{Binding MyStr2}">
<Label.Style>
<Style TargetType="Label" BasedOn="{StaticResource {x:Type Label}}">
<Style.Triggers>
<!--
parens on (Validation.HasError) are important: It's an attached
so its name has a dot in it. The parens tell the binding that.
-->
<DataTrigger
Binding="{Binding (Validation.HasError), ElementName=MyIntTextBox}"
Value="True">
<Setter
Property="Visibility"
Value="Hidden"
/>
</DataTrigger>
</Style.Triggers>
</Style>
</Label.Style>
</Label>
As for the blank-out behavior, I see that when I type an invalid string into the MyInt box, tab out, tab back in, type a valid value, and tab back out. It only happens when I tab out on a valid value, when the previous value that I tabbed out on was invalid. I think that's exactly the (mis)behavior you're describing.
I don't have an explanation for that. I don't like to run around yelling "bug" on a framework, but I think that's a bug. The control isn't showing the viewmodel property value it's bound to, and the value hasn't changed. I put a breakpoint in the MyInt setter and it only hits the breakpoint once, with the new valid value (aside from the fact that as far as I know there's no integer value that's displayed as an empty string).
I would ask about that as a separate question if google doesn't turn up any workarounds. I tried "wpf textbox invalid tab out empty" and got nothing.
Related
I'm fairly new to WPF. I have the following radio button in my application
<Viewbox Height="30">
<RadioButton Content="B1" GroupName="InputBelt" IsChecked="{Binding RBChecked, Mode=TwoWay, FallbackValue=True}" VerticalAlignment="Center"/>
</Viewbox>
<Viewbox Height="30">
<RadioButton Content="B2" GroupName="InputBelt" IsChecked="{Binding RBChecked, Converter={StaticResource boolconverter}, Mode=TwoWay}" VerticalAlignment="Center"/>
</Viewbox>
I have defined datacontext in xaml file
<Window.DataContext>
<vm:TestViewModel />
</Window.DataContext>
The issue is when the page is loaded for the 1st time, everything is fine. But when I go to some other page in the application and comes back to this page, the application crashes due to stackoverflow exception.
I even tried adding datacontext locally in radiobutton tag but it isn't working either.
Property structure given below.
private bool _bRBChecked;
public bool RBChecked
{
get { return _bRBChecked; }
set
{
_bRBChecked = value;
RaisePropertyChanged("RBChecked");
}
}
Upon investigating further, I found out that the RaisePropertyChanged of the binded property is being called too many times. This issue occurs only with the property binded to radio button. I have other controls which has two-way bind with other properties in the same page and it seems to work fine.
Now I have tried the below fix suggested in another stackoverflow question and it seems to be working.
set
{
if (_bRBChecked != value)
{
_bRBChecked = value;
RaisePropertyChanged("RBChecked");
}
}
But I would like to know the root cause of this issue and why the property is being set so many times and find any alternate fix if possible. Please let me know if I am missing anything.
Any insight is highly appreciable.
Your change notification is not protected from recursion. Property A changing Property B, whose change changes Property A...
A simple solution is this:
set
{
if(value != _bRBChecked){
_bRBChecked = value;
RaisePropertyChanged("RBChecked");
}
}
Simply check if the value is actually a change, before you go tell everyone about it. This pattern is explicitly used in the Examples. I am 90% sure the Depdency Properties have a similar recursion protection, but it would not be the first time I was wrong.
I think it is fairly easy to figure this out, based on the fix you shared.
What happens in steps:
You set the new value in one of the radio buttons
The event is raised
Since it's two way binding, the binding of the second radio button sets the value again to the other radio button
The event is raised again due to 3
Go back to 1 as now the value is set again for the first radio button.
With your fix the value is not set (the setter it's not called) so the event is not triggered again.
Problem:
When I change the value of "LuxVoltage" in the GUI via the Slider or the NumericUpDown the Value jumpes from "default value" (in this case 0) to the "actual value". Assuming I set the Value to 1000 and print out every set this is what the output looks like (it kind of "flickers"):
Output:
0
1000
0
1000
[repeat]
XAML: (Using MahApps.Metro "NumericUpDown")
<metro:NumericUpDown
Value="{Binding LuxVoltage, UpdateSourceTrigger=PropertyChanged, Mode=TwoWay}"
Minimum="0"
Maximum="65535"
/>
<Slider
Value="{Binding LuxVoltage, UpdateSourceTrigger=PropertyChanged, Mode=TwoWay}"
Minimum="0"
Maximum="65535"
/>
C#: (Using Prisms "BindableBase")
private ushort _luxVoltage = 0;
public ushort LuxVoltage
{
get { return _luxVoltage; }
set { SetProperty(ref _luxVoltage, value); }
}
Requirement:
I need to manipulate the same value from two controls. The "slider" to simply change the value fast, and the "NumericUpDown" tho provide precision
I don't know why you have a problem with flickering, but when I've had two GUI things chained from one value in the past I've always gone for the approach (using your case) of binding the NumericUpDown to the property in your viewmodel, and then binding the Slider to the NumericUpDown property. It might work for you.
The type of the Value of Slider is double. As you are binding to a ushort this causes multiple updates even though the slider does not move. Which then might cause additional changes fired from the other control, try adding this to the Slider binding so it when you drag the slider it will only increment it by the tick frequency which is defaulted to "1.0".
IsSnapToTickEnabled="True"
seems like that the actual problem lives somewhere else in my codebase.
- Binding from 2 Controls to one Property schould just work fine.
- Or consider binding one of the Controls to the value of the other, whose value is bound to the Property*
Try checking the incoming value on the setter for a meaningful change before you call SetProperty.
private ushort _luxVoltage = 0;
public ushort LuxVoltage
{
get { return _luxVoltage; }
set
{
if (_luxVoltage != value)
{
SetProperty(ref _luxVoltage, value);
}
}
}
I need behavior like in the excel Find and Replace dialogBox that's why i asked like this. In this image you can able to see FindNext is always focused
I could able to set the focus to single element that is either Textbox or Button. But my requirement is always i need to set focus to Button even i click the some other controls within the window.
As I said in the comment, just set IsDefault="True" for your button will give you the result you want in the images you posted.
e.g.
<Button Content="Button" IsDefault="True" />
Result:
You can see the button will be highlighted even when user input into the textbox.
Not sure why you want to do this. But you can always set up a PreviewMouseLeftButtonDown on the Window, and check the e.OriginalSource property to see if it is a Control you want to give focus to. If it is not something you want to give focus to, simply set e.Handled to true.
But, seriously, it is still weird why you want to do this.
Edited because of your edited question
The "Find Next" button only visually looks focused. The focus is still given to the search TextBox or the replace TextBox. When you hit "Enter", the TextBox handles that KeyEvent, and executes the same Command as the "Find Next" button.
If you want to do something like that, you probably can consider this:
Add a property (probably bool ShouldButtonLookFocused) somewhere
Set up a Data Trigger in the button that binds to this ShouldButtonLookFocused property), set trigger value to true (e.g. <DataTrigger Binding="{Binding Path=ShouldButtonLookFocused}" Value="True">
Set the data trigger's setter to whatever visual changes you want to indicate this.
Then add bindings to which ever other TextBox controls, which when focused, you would want the button to "look focused". The binding should be to this ShouldButtonLookFocused property, and most likely you need to use a Converter for this.
Example:
<Style TargetType="Button">
<Style.Triggers>
<DataTrigger Binding="{Binding Path=ShouldButtonLookFocused}" Value="True">
<!-- Whatever visual thing you can think of -->
<Setter Property="Border" Value="Red" />
</DataTrigger>
</Style.Triggers>
</Style>
public static readonly DependencyProperty ShouldButtonLookFocusedProperty =
DependencyProperty.Register("ShouldButtonLookFocused",
typeof(bool),
typeof(WhicheverClassThisIsIn));
public bool ShouldButtonLookFocused
{
get
{
return (bool)GetValue(ShouldButtonLookFocusedProperty);
}
set
{
SetValue(ShouldButtonLookFocusedProperty, value);
}
}
<TextBox Name="SearchBox"
IsFocused="{Binding Path=ShouldButtonLookFocused,
Converter={StaticResource MyConverter}"
/>
I did not test this though, maybe you can try it and tell me how it goes.
So, picture the situation...
I have a MainWindow, with a TabControl, Apadtly named TabControl1, placed within it. The TabControl is made up of 2 "tabs".
The first tab, contains an instantiation of one of my Custom User Controls, FruitForm, this particular instantiation is named FruitForm1.
Likewise the second tab contains an instantion of another one of my Custom User Control, VegForm, this particular instantiation is named VegForm1.
To give you an impression of what FruitForm and VegForm look like I have included the following image:
I don't have enough rep to embed images within my question :(
I also have 2 Validation classes named FruitValidation and VegValidation which are essentially made up of simple public static methods which return true or false depending on whether the input string matches the simple criteria. For example, consider the "FruitValidation.validateApple()" method:
public static bool validateApple(string apple)
{
if (apple == null) return false;
if (apple.ToUpper() == "APPLE") return true;
else return false;
}
I also have an static IconLoader class, which is essentially a wrapper, which allows me to easily change the source property of my desired icon to a Tick or a Cross. For example if I wanted to change the icon next to the Banana textbox (see image above) to a Tick then I would write the following code:
imageBanana.Source = IconLoader.GetTick();
//setting it back to a cross...
imageBanana.Source = IconLoader.GetCross();
Everytime the text is changed within a particular textbox I validate whether the contents of the textbox matches the desired value. If it does I set the icon to a Tick otherwise it displays a Cross.
This image should clarify what I have described in the previous paragraph.
Now essentially this is the question:
How do I change the image found within the header to a Tick when all textboxes within it's corresponding UserControl are valid (i.e. every TextBox has a Tick next to it)? I also want this particular event to be triggered from within the UserControl, which is not currently aware of TabControl1's exsistance
I should also point out that if one of the textfields were to become invalid (after being once valid at some point) the corresponding Tab header should reflect this - by displaying a Cross
Well, to answer your question: the easiest way is to define a dependency property on your UserControls which will indicate the validation result and then bind your tab item to it. For example:
public static readonly DependencyProperty IsValidProperty = DependencyProperty.Register("IsValid", typeof (bool), typeof (VegForm));
public bool IsValid
{
get { return (bool) GetValue(IsValidProperty); }
set { SetValue(IsValidProperty, value); }
}
<TabItem>
<TabItem.Header>
<Image>
<Image.Style>
<Style TargetType="Image">
<!-- Replace "..." with valid "tick" image source -->
<Setter Property="Source" Value="..."/>
<Style.Triggers>
<DataTrigger Binding="{Binding IsValid, ElementName=VegForm}" Value="False">
<!-- Replace "..." with valid "cross" image source -->
<Setter Property="Source" Value="..."/>
</DataTrigger>
</Style.Triggers>
</Style>
</Image.Style>
</Image>
</TabItem.Header>
<VegForm x:Name="VegForm"/>
</TabItem>
However, if your goal is to learn wpf - you should get rid of this Windows.Forms mentality before it takes you any further. Because normally you would not need this code. Reading a few articles on MVVM pattern in WPF is a good start.
Also WPF has an inbuild validation. You should read on that as well. Before you end up reinventing the wheel.
I hope that this question has not been asked elsewhere, but I'm having difficulty finding the right search terms to bring up any already-existing answers to this problem.
I'm implementing a program in C# WPF (MVVM) with many interview-style screens where the user inputs scientific data in an orderly manner. We would like to have the Textbox's and DataGrid's change Foreground and Background colors on an individual basis based on whether the data in that control has been inputted by the user, inputted as a default value by the program, or is a template value from another file the user imported. On top of this, we would like the UI to respond to validation checks from IDataErrorInfo implemented in the ViewModel.
Thus, the data displayed in a TextBox could be blue if it is a templated value, green if a program default, black if user inputed, and red if IDataErrorInfo says it is bad data.
My initial answer for implementing this was to create a custom class:
class AdornerString{
private string _myString;
private bool _isTemplate;
private bool _isDefault;
public string MyString{
get{
etc.
}
set{
etc.
}
}
// accessor properties and Constructors omitted for brevity
}
Then I have all my TextBox.Text properties in the View bound like so:
<TextBox Text="{Binding Path=someAdornerString.MyString,UpdateSourceTrigger=PropertyChanged,ValidatesOnDataErrors=True}"/>
and apply a style with DataTriggers that responds to someAdornerString's properties to create the appropriate colors.
However, IDataErrorInfo on the ViewModel doesn't validate the TextBox anymore. Why is this so, and is there a better way to solve my problem? I can't validate inside the AdornerString class.
A possible work-around, though undesirable:
The only other solution I can think of is to have two properties in the ViewModel for each field entered by the user- one for the data itself and the other being the same custom class as above minus the string. However, this means I can't generalize the style used for the textboxes. Each TextBox would have to have a custom style something like this:
<TextBox.Style>
<Style TargetType="{x:Type TextBox}"
BasedOn="{StaticResource OtherStyle}">
<Style.Triggers>
<DataTrigger Binding="{Binding Path=**instanceCustomClass**.IsDefault}"
Value="True">
<Setter Property="Foreground"
Value="Green" />
</DataTrigger>
<Trigger Property="Validation.HasError"
Value="true">
<Setter Property="Foreground"
Value="OrangeRed" />
</Trigger>
</Style.Triggers>
</Style>
since each UI field has a specific custom class associated with it.
I would seriously rather not implement this way, as I have possibly 100+ pages of input screens, with each screen having 1-12 TextBox's each, ignoring the DataGrids thrown in the mix (with parellel arrays of data and their associated custom classes).
Any ideas? I've read about custom validation, though I yet don't see how this might help in this case.
Ignore making use of the IDataErrInfo validation all together, as it seems that the you really want to make it 1 of 4 values...and 'bad' data just happens to be one of them.
You need to keep the items on an even playing field since you are treating them the same, just differentiating colors. Use a single property with an object wrapping the value and the state of the model within the ViewModel. Ignore IDataErroInfo and then use a converter to provide the coloring and then add a delegate to the AdornerString that will be set to the validation function written in the ViewModel for it.