I'm trying to create a wpf error validation for a textbox. Looks pretty simple but after days and trying many methods I'm still trying to figure out the proper way to do this.
Here is my code (this is not my real code, just an example):
The textbox
<TextBox Text="{Binding Model.Name , UpdateSourceTrigger=PropertyChanged, ValidatesOnExceptions=True}"
Style="{StaticResource NameTextBoxStyle}" />
The style
<Style x:Uid="Style_81" x:Key="NameTextBoxStyle}" TargetType="{x:Type TextBox}">
<Style.Triggers>
<Trigger Property="Validation.HasError" Value="True">
<Trigger.Setters>
<Setter Property="ToolTip" Value="{Binding RelativeSource={RelativeSource Self},Path= (Validation.Errors)[0].ErrorContent}"/>
</Trigger.Setters>
</Trigger>
</Style.Triggers>
</Style>
The class
Public Class SomeClass
{
public bool IsNameMandatory { get; set; }
string name;
public string Name
{
get
{
return name;
}
set
{
if (IsNameMandatory && String.IsNullOrEmpty(value))
{
throw new Exception("Name can not be empty.");
}
if (value.Length > 12)
{
throw new Exception("name can not be longer than 12 charectors");
}
name = value;
OnPropertyChanged("Name");
}
}
}
The problem: The error validation is working but when the model is "initialized" and set a blank value to "Name" an exception is raised with a messagebox instead of the red rectangle with the tooltip. I don't want to display the exception in a messagebox.
My needs: I need to validate the error only on LostFocus of the textbox and on demand
Here is how WPF validation is properly done using Binding.ValidationRules Property:
In your View:
xmlns:tools="clr-namespace:SomeAppNameSpace.Tools"
<TextBox Style="{StaticResource SomeStyle}">
<TextBox.Text>
<Binding Path="SomeProperty" UpdateSourceTrigger="LostFocus" >
<Binding.ValidationRules>
<tools:SomeValidationRule />
</Binding.ValidationRules>
</Binding>
</TextBox.Text>
</TextBox>
ValidationRule class located in your tools (or equivalent of) namespace:
public class SomeValidationRule : ValidationRule
{
public override ValidationResult Validate(object value,
CultureInfo cultureInfo)
{
var userText = value as string;
return String.IsNullOrWhiteSpace(userText) ?
new ValidationResult(false, "Value must be provided.") :
new ValidationResult(true, null);
}
}
So, this simple ValidationRule checks the textbox on LostFocus and if the textbox is left empty it returns a validation error message...
Last piece of the puzzle is that your "SomeStyle" which is the style for the textbox above must have Validation.ErrorTemplate defined... something like this:
<Style x:Key="SomeStyle" TargetType="{x:Type TextBox}">
<Setter Property="Validation.ErrorTemplate">
<Setter.Value>
<ControlTemplate >
<!-- Your Error Template here. Typically a border with
red background and a textbox with light colored text... -->
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Related
I have the following INotifyDataErrorInfo implementation in an abstract base class.
private IEnumerable<ValidationErrorModel> _validationErrors = new List<ValidationErrorModel>();
public IEnumerable<ValidationErrorModel> ValidationErrors
{
get { return _validationErrors; }
private set
{
_validationErrors = value;
OnPropertyChanged();
}
}
protected abstract Task<ValidationResult> GetValidationResultAsync();
public IEnumerable GetErrors(string propertyName)
{
if (string.IsNullOrEmpty(propertyName) ||
ValidationErrors == null)
return null;
IEnumerable<string> errors = ValidationErrors
.Where(p => p.PropertyName.Equals(propertyName))
.Select(p => p.ToString())
.ToList();
return errors;
}
public bool HasErrors
{
get
{
bool hasErrors = ValidationErrors != null && ValidationErrors.Any();
return hasErrors;
}
}
public Task<ValidationResult> ValidateAsync()
{
Task<ValidationResult> validationResultTask = GetValidationResultAsync();
validationResultTask.ContinueWith((antecedent) =>
{
if (antecedent.IsCompleted &&
!antecedent.IsCanceled &&
!antecedent.IsFaulted)
{
ValidationResult validationResult = antecedent.Result;
if (validationResult != null)
{
lock (ValidationErrors)
{
ValidationErrors =
validationResult.Errors
.Select(validationFailure =>
new ValidationErrorModel(validationFailure.PropertyName, validationFailure.ErrorMessage))
.ToList();
foreach (ValidationErrorModel validationErrorModel in ValidationErrors)
{
RaiseErrorsChanged(validationErrorModel.PropertyName);
}
}
}
}
});
return validationResultTask;
}
public event EventHandler<DataErrorsChangedEventArgs> ErrorsChanged = delegate { };
protected virtual void RaiseErrorsChanged(string propertyName)
{
var handler = ErrorsChanged;
if (handler != null)
{
Dispatcher.InvokeOnMainThread(() =>
{
handler(this, new DataErrorsChangedEventArgs(propertyName));
});
}
}
In models deriving from the base class I implement the Task<ValidationResult> GetValidationResultAsync() required method, it uses fluent validation Nuget package.
private readonly ModelValidator _modelValidator = new ModelValidator();
protected override Task<ValidationResult> GetValidationResultAsync()
{
return _modelValidator.ValidateAsync(this);
}
The problem is that when I invoke from a ViewModel the ValidateAsync() method of a model the UI input controls are not invalidate/validate correctly, I actually have a tab control and validate the models in tab index changed, some might show the red border once I change tab but then again return to normal state to the next tab change.
In debug it shows that the ValidationErrors property returns errors.
My XAML input controls code is like below.
<Grid>
<StackPanel>
<StackPanel Orientation="Horizontal">
<TextBlock Text="Name:"/>
<TextBox Text="{Binding Name, UpdateSourceTrigger=PropertyChanged, Mode=TwoWay, ValidatesOnNotifyDataErrors=True}" Width="200"/>
</StackPanel>
<StackPanel Orientation="Horizontal">
<TextBlock Text="Scheduled Date:"/>
<DatePicker DisplayDate="{Binding ScheduledDate, UpdateSourceTrigger=PropertyChanged, Mode=TwoWay, ValidatesOnNotifyDataErrors=True}"/>
</StackPanel>
</StackPanel>
</Grid>
[Update 1]
I should mention that I use in the MainWindow a tab control and 3 tab items, each tab item is a UserControl.
I hooked up to the Validation.Error event of all the XAML UserControls and I noticed that even I get tab selected index changed value the Validation.Error fires once for the first tab and never again, I suspect there is a cleanup somewhere for a reason.
Code for the SelectedTabIndex that fires the models validations.
private int _selectedTabIndex = 0;
public int SelectedTabIndex
{
get { return _selectedTabIndex; }
set
{
_selectedTabIndex = value;
ValidateModels();
Tab2ViewModel.ValidateModels();
Tab3ViewModel.ValidateModels();
OnPropertyChanged();
}
}
The ValidateModels method calls ValidateAsync of the model in the ViewModel.
public override Task ValidateModels()
{
return Model.ValidateAsync();
}
MainWindow TabControl XAML.
<TabControl SelectedIndex="{Binding SelectedTabIndex, Mode=TwoWay}">
[Update 2]
After adding a custom error style and a custom error template, I see that the controls tooltip stay with the condition not met error but the error template is clearing. So, the TextBox shows no error template, custom or default, but the validation error exists and the tooltip shows the error.
Why the XAML templates clear on TabIndexChange and how come they don't refresh at least on the active tab item I'm viewing. This might be the problem that I should solve.
Also, as mentioned before, I don't see the ErrorsChanged revalidating the controls except the first time the SelectedTabIndex setter is invoked.
The templates I added.
<Application.Resources>
<Style x:Key="ErrorStyle"
TargetType="FrameworkElement">
<Style.Triggers>
<Trigger Property="Validation.HasError" Value="True">
<Setter Property="ToolTip" Value="{Binding (Validation.Errors).CurrentItem.ErrorContent, RelativeSource={x:Static RelativeSource.Self}}"></Setter>
</Trigger>
</Style.Triggers>
</Style>
<ControlTemplate x:Key="TextBoxErrorTemplate">
<DockPanel>
<Ellipse DockPanel.Dock="Right"
Margin="2,0"
ToolTip="Contains Invalid Data"
Width="10"
Height="10"
>
<Ellipse.Fill>
<LinearGradientBrush>
<GradientStop Color="#11FF1111" Offset="0"/>
<GradientStop Color="#FFFF0000" Offset="1"/>
</LinearGradientBrush>
</Ellipse.Fill>
</Ellipse>
<AdornedElementPlaceholder/>
</DockPanel>
</ControlTemplate>
<Style TargetType="TextBox">
<Setter Property="Margin" Value="4,4,15,4"/>
<Setter Property="Validation.ErrorTemplate" Value="{StaticResource TextBoxErrorTemplate}"/>
<Style.Triggers>
<Trigger Property="Validation.HasError" Value="True">
<Setter Property="ToolTip">
<Setter.Value>
<Binding Path="(Validation.Errors).CurrentItem.ErrorContent" RelativeSource="{x:Static RelativeSource.Self}"/>
</Setter.Value>
</Setter>
</Trigger>
</Style.Triggers>
</Style>
</Application.Resources>
The problem is that tabs, expanders etc don't work well with validators, you need to include AdornerDecorator, or not use tabs which in my case is not an option.
Issue with WPF validation(IDataErrorInfo) and tab focusing.
i think i have read already all related articles but non of them help..
im trying to enable/disable a save button of datagrid by the error state- but with no success.
this is my code:
contractor:
AddHandler(Validation.ErrorEvent, new RoutedEventHandler(OnErrorEvent));
XAML:
<Page
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:col="clr-namespace:System.Collections;assembly=mscorlib"
xmlns:local="clr-namespace:Metsuka_APP" x:Class="Metsuka_APP.MichlolimManagment"
mc:Ignorable="d"
d:DesignHeight="500" d:DesignWidth="500"
Title="MichlolimManagment"
x:Name="Michlolim_Managment" Validation.Error="Michlolim_Managment_Error">
<Page.Resources>
<DataGrid x:Name="AGAFIMDataGrid" VerticalAlignment="Center" RowEditEnding="rowEditEnding" Margin="10" FlowDirection="RightToLeft" Height="340"
AutoGenerateColumns="False" EnableRowVirtualization="True"
ItemsSource="{Binding Source={StaticResource aGAFIMViewSource}}" Grid.Row="1"
RowDetailsVisibilityMode="VisibleWhenSelected"
ScrollViewer.CanContentScroll="True"
ScrollViewer.VerticalScrollBarVisibility="Auto"
HorizontalGridLinesBrush="Silver"
VerticalGridLinesBrush="Silver">
<DataGrid.Resources>
<Style x:Key="errorStyle" TargetType="{x:Type TextBox}">
<Setter Property="Padding" Value="-2"/>
<Style.Triggers>
<Trigger Property="Validation.HasError" Value="True">
<Setter Property="Background" Value="Red"/>
<Setter Property="ToolTip"
Value="{Binding RelativeSource={RelativeSource Self},
Path=(Validation.Errors)[0].ErrorContent}"/>
</Trigger>
</Style.Triggers>
</Style>
</DataGrid.Resources>
<DataGrid.Columns>
<DataGridTextColumn x:Name="agaf_nameColumn" Header="name" Width="*">
<DataGridTextColumn.Binding>
<Binding Path="agaf_name" NotifyOnValidationError="True" >
<Binding.ValidationRules>
<local:MichlolimValidationRule ValidationStep="UpdatedValue"/>
</Binding.ValidationRules>
</Binding>
</DataGridTextColumn.Binding>
</DataGridTextColumn>
</DataGrid.Columns>
<DataGrid.RowValidationErrorTemplate>
<ControlTemplate>
<Grid Margin="0,-2,0,-2"
ToolTip="{Binding RelativeSource={RelativeSource
FindAncestor, AncestorType={x:Type DataGridRow}},
Path=(Validation.Errors)[0].ErrorContent}">
<Ellipse StrokeThickness="0" Fill="Red"
Width="{TemplateBinding FontSize}"
Height="{TemplateBinding FontSize}" />
<TextBlock Text="!" FontSize="{TemplateBinding FontSize}"
FontWeight="Bold" Foreground="White"
HorizontalAlignment="Center" />
</Grid>
</ControlTemplate>
</DataGrid.RowValidationErrorTemplate>
</DataGrid>
code behind:
private int errorCount;
private void OnErrorEvent(object sender, RoutedEventArgs e)
{
var validationEventArgs = e as ValidationErrorEventArgs;
if (validationEventArgs == null)
throw new Exception("Unexpected event args");
switch (validationEventArgs.Action)
{
case ValidationErrorEventAction.Added:
{
errorCount++; break;
}
case ValidationErrorEventAction.Removed:
{
errorCount--; break;
}
default:
{
throw new Exception("Unknown action");
}
}
btnSavePop.IsEnabled = errorCount == 0;
}
but the "OnErrorEvent" never fires- any idea why?
You need to set NotifyOnValidationError="True" on your bindings - otherwise, the event won't be raised. I would recommend using the IDataErrorInfo or INotifyDataErrorInfo interfaces instead for an MVVM error handling approach.
Try creating a class like the following:
public class AgafDescriptor : INotifyPropertyChanged, IDataErrorInfo
{
private string _name;
public string Name
{
get
{
return _name;
}
set
{
if (_name != value)
{
_name = value;
RaisePropertyChanged(x => x.Name);
}
}
}
#region INotifyPropertyChanged Members
public event PropertyChangedEventHandler PropertyChanged;
protected void RaisePropertyChanged<T>(Expression<Func<AgafDescriptor, T>> propertyExpression)
{
PropertyChangedEventHandler localPropertyChanged = this.PropertyChanged as PropertyChangedEventHandler;
if ((localPropertyChanged != null) && (propertyExpression != null))
{
MemberExpression body = propertyExpression.Body as MemberExpression;
if (body != null)
{
localPropertyChanged(this, new PropertyChangedEventArgs(body.Member.Name));
}
}
}
#endregion
#region IDataErrorInfo Members
// Does nothing in WPF.
public string Error
{
get { return null; }
}
public string this[string columnName]
{
get
{
string returnVal = null;
if (string.Equals("Name", columnName, StringComparison.Ordinal))
{
if (string.IsNullOrWhiteSpace(Name))
{
returnVal = "A name must be supplied.";
}
}
return returnVal;
}
}
#endregion
}
This will provide an error whenever there is a change to the Name property. Please note that if you wish to trigger new validation checks without modifying the property you just need to call:
RaisePropertyChanged(x => x.Name);
You will then need to change your binding to something like:
<DataGridTextColumn x:Name="agaf_nameColumn" Header="name" Width="*" Binding="{Binding Name, UpdateSourceTrigger=PropertyChanged, Mode=TwoWay, NotifyOnValidationError=True}"/>
Note you will have to load your data from the DB and create a descriptor for each item you want to display in the DataGrid.
The reason behind why you aren't seeing the event being fired:
You aren't raising property change events (INotifyPropertyChanged or through a DependencyProperty) therefore the UI won't receive updates and the event won't be fired because it hasn't received an update to then perform the validation. By binding direct to your DB then you aren't raising the property change events. You can see that the Name property I suggested in my answer does raise the property changed event
The attribute
Validation.Error="Michlolim_Managment_Error"
in your XAML already sets a handler for the error event on the window level, however, to a method which isn't defined in your code behind fragment. Your AddHandler call looks ok, but, depending on where it is in the constructor, it might get overridden by the XAML event handler definition.
Probably not related, but you might want to change
(Validation.Errors)[0].ErrorContent
to
(Validation.Errors)/ErrorContent
in your ToolTip bindings, since the former causes binding errors if there are no errors. Unfortunately, it is still contained in the documentation samples...
From my sample of your code I think you are missing specifying UpdateSourceTrigger="PropertyChanged" or UpdateSourceTrigger="LostFocus" on the DataGridTextColumn in the DataGrid instead of using the default behavior of the DataGrids binding.
That is assuming my assumptions are correct see bottom.
Your code causes OnErrorEvent to fire if i change:
<DataGridTextColumn.Binding>
<Binding Path="agaf_name" NotifyOnValidationError="True" >
...
To include UpdateSourceTrigger for PropertyChanged or LostFocus like so:
<DataGridTextColumn.Binding>
<Binding Path="agaf_name" NotifyOnValidationError="True" UpdateSourceTrigger="PropertyChanged" >
....
Assumptions - For your ValidationRule to test i made it always return false (see below). And for the test item source i am binding to a string value in 'agaf_name' property.
public class MichlolimValidationRule : ValidationRule
{
public override ValidationResult Validate(object value, System.Globalization.CultureInfo cultureInfo)
{
return new ValidationResult(false, "bad");
}
}
Hie.
So I have a password box.
What I basically am trying to do is to get it's border colour to change to Red if it's empty and change to white if it's not.
A simple mechanism just to inform the user which field they left blank on the sign up form.
After a bit of research I put together this code.
<Window.Resources>
<conv:rules x:Key="isNullConverter"/>
<Style TargetType="{x:Type PasswordBox}">
<Style.Triggers>
<DataTrigger Binding="{Binding Password, ValidatesOnDataErrors=False, UpdateSourceTrigger=PropertyChanged, Converter={StaticResource isNullConverter}}" Value="False">
<Setter Property="BorderBrush" Value="White"/>
</DataTrigger>
<DataTrigger Binding="{Binding Password, ValidatesOnDataErrors=False, UpdateSourceTrigger=PropertyChanged, Converter={StaticResource isNullConverter}}" Value="True">
<Setter Property="BorderBrush" Value="Red"/>
</DataTrigger>
</Style.Triggers>
</Style>
</Window.Resources>
'conv' is set to reference 'rules' namespace.
'rules' is the class where I put the below code.
using System.Windows.Data;
using System.Globalization;
namespace Masca
{
public class rules : IValueConverter, INotifyPropertyChanged, IDataErrorInfo
{
private string something;
public string Password
{
get
{
return something;
}
set
{
if (something!= value)
{
something = value;
RaisePropertyChanged("Password");
}
}
}
public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
{
if (value == null)
{
value = false;
}
if (value != null)
{
value = true;
}
return value;
}
private void RaisePropertyChanged(string prop)
{
if (PropertyChanged == null)
{
PropertyChanged(this, new PropertyChangedEventArgs(prop));
}
}
public event PropertyChangedEventHandler PropertyChanged;
public string Error
{
get { return null; }
}
Every time I run the program though, There is always a red border around the password box, even after I've typed something. Shouldn't the DataTrigger update the boundary to white? Or am I missing something?
"What I basically am trying to do is to get it's border colour to change to Red if it's empty and change to white if it's not."
If this is your problem, then simply have the trigger activate off of the Text property of the TextBox. If it is "", then the BorderBrush is red; otherwise White. FYI, you only need one trigger for this, not two. Set the "normal" default color as a property on the control, then a trigger for if Text is "":
<Setter Property="BorderBrush" Value="White">
and
<Trigger Property="Text" Value="">
<Setter Property=BorderBrush" Value="Red"/>
</Trigger>
P.S. You may want to ensure that the TextBox has received focus at least once before you color the border Red
I'm getting SO frustrated here.. I can't get these datatriggers to consistently work..
It works when I first run the program as I initialize a global UdpMessageAuthentication class (as it sets it to "test0"... but then I have a button that calls the SendAuthPacket method.. and from debugging I see it go into the OnPropertyChanged when I hit the button but the label won't change caption or color or any other property...once I use AuthenticateStatus to "test1".
Obviously I tried more realistic variables besides test0 and test1 but no matter what I'm doing I can't get the triggers to update
Please help =T
<Label Name="Label_Authentication" Margin="5,0,0,0" VerticalAlignment="Center" Grid.Column="0" FontSize="14">
<Label.Style>
<Style TargetType="Label">
<Setter Property="Content" Value="Initial Content"></Setter>
<Setter Property="Foreground" Value ="Red"></Setter>
<Style.Triggers>
<DataTrigger Binding="{Binding Path=AuthenticateStatus}" Value="test0">
<Setter Property="Content" Value="Authentication Required" />
<Setter Property="Foreground" Value="Red"></Setter>
</DataTrigger>
<DataTrigger Binding="{Binding Path=AuthenticateStatus}" Value="test1">
<Setter Property="Content" Value="Attempting Authentication..." />
<Setter Property="Background" Value="Blue"></Setter>
</DataTrigger>
etc....
public class UdpMessageAuthentication : INotifyPropertyChanged
{
private string _authenticateStatus;
public string AuthenticateStatus
{
get { return _authenticateStatus; }
set
{
if (_authenticateStatus != value)
{
_authenticateStatus = value;
OnPropertyChanged("Authenticate Status");
}
}
}
public UdpMessageAuthentication()
{
_udpClient = new UdpClient();
AuthenticateStatus = "test0";
}
public void SendAuthPacket(IPAddress ip, string userID)
{
etc etc....
AuthenticateStatus = "test1";
etc etc....
}
Make sure you explicitly set the Mode Property when you use (any) binding.
<DataTrigger Binding="{Binding Path=AuthenticateStatus, Mode=OneWay}" Value="test0">
Also, you have to make sure you're raising the property changed event with the PropertyName string set to exactly the name of the proprty being raised, since the system is using Reflection under the hood to find the changed property based on said string. Thus, try using this in your ViewModel:
get { return _authenticateStatus; }
set
{
if (_authenticateStatus != value)
{
_authenticateStatus = value;
OnPropertyChanged("AuthenticateStatus");
}
}
I am trying to setup validation for a phone number field in a WPF application using MVVM. I have the textbox text bound but cant seem to figure out the logic involved in rejecting input and popping up a tooltip. Any suggestions would be appreciated.
[Required]
public string PhoneNumber
{
get
{
return EntityPhone.PhoneNumber;
}
set
{
int intValue = 0;
if(!int.TryParse(value, out intValue))
{
// ToolTip tt = new ToolTip();
// tt.Content = "Invalid Character. Please enter a valid 10-digit number";
}
EntityPhone.PhoneNumber = value;
NotifyOfPropertyChange(() => PhoneNumber);
}
}
First you'll want to make your class inherit IDataErrorInfo, which is used by WPF for validation purposes.
public class MyClass : IDataErrorInfo
{
...
#region IDataErrorInfo Members
string IDataErrorInfo.Error
{
get { return null; }
}
string IDataErrorInfo.this[string columnName]
{
get
{
if (columnName == "PhoneNumber")
{
// Validate property and return a string if there is an error
return "Some error";
}
// If there's no error, null gets returned
return null;
}
}
#endregion
}
Next, tell your binding that it should be validating the value when it changes
<TextBox Text="{Binding Path=PhoneNumber, ValidatesOnDataErrors=True}" ... />
And finally, create a validation template. Here's the style/template I usually use
<!-- ValidatingControl Style -->
<Style TargetType="{x:Type FrameworkElement}" x:Key="ValidatingControl">
<Style.Triggers>
<Trigger Property="Validation.HasError" Value="True">
<Setter Property="ToolTip" Value="{Binding
Path=(Validation.Errors)[0].ErrorContent,
RelativeSource={x:Static RelativeSource.Self}}" />
</Trigger>
</Style.Triggers>
</Style>