Develop Reference

Bind custom class with Validation in WPF

I noticed that it is possible to bind variables of the type DateTime to a textbox in WPF. If I enter a wrong value it will not validate and show a red border.
How can I implement my own class, that I can bind to a textbox without having to bind to a property of the class? The Textbox should show a string and the class will validate the input.
Is this possible?
My current solution is this:
In the Model:
public string DefaultLanguageValue
{
get
{
return _defaultLanguageValue;
}
set
{
if (value != this._defaultLanguageValue)
{
ValidateLanguage(value);
this._defaultLanguageValue = value;
NotifyPropertyChanged();
}
}
}
private void ValidateLanguage(string value)
{
string rx = "([a-zA-Z]{2}|[iI]-[a-zA-Z]+|[xX]-[a-zA-Z]{1,8})(-[a-zA-Z]{1,8})*";
if (!Regex.IsMatch(value, rx))
{
throw new ArgumentException();
}
}
In the XAML:
<TextBox Text="{Binding TreeViewModel.Model.DefaultLanguageValue, UpdateSourceTrigger=PropertyChanged, ValidatesOnExceptions=True}" BorderThickness="0" MinWidth="100"/>
It would be nice to have a Class that I can just bind like a String, Int or DateTime for examlpe. Any Ideas?

You could bind to the Tag property of the TextBox itself and validate using a ValidationRule:
public class DateValidationRule : ValidationRule
{
public override ValidationResult Validate(object value, CultureInfo cultureInfo)
{
if (!DateTime.TryParse(value as string, out DateTime _))
return new ValidationResult(false, "Invalid date...");
return ValidationResult.ValidResult;
}
}
XAML:
<TextBox>
<TextBox.Text>
<Binding Path="Tag" RelativeSource="{RelativeSource Self}"
UpdateSourceTrigger="PropertyChanged">
<Binding.ValidationRules>
<local:DateValidationRule />
</Binding.ValidationRules>
</Binding>
</TextBox.Text>
</TextBox>
This doesn't require you to bind to a view model.

I finally tried the solution suggested by mm8.
The only issue I have now is that if one enters an invalid value into the textbox, it will not update the textbox when I programmatically change the value of the source after clicking a button.
I tried Validation after update, but this allows the user to save invalid values.
<TreeViewItem>
<TreeViewItem.Header>
<StackPanel Orientation="Horizontal">
<CheckBox x:Name="chkDefaultLanguage" IsChecked="{Binding TreeViewModel.TreeModel.DefaultLanguage, UpdateSourceTrigger=PropertyChanged}"/>
<TextBlock Text="DefaultLanguage: " />
<TextBox BorderThickness="0" MinWidth="100">
<TextBox.Text>
<Binding Path="TreeViewModel.TreeModel.DefaultLanguageValue" UpdateSourceTrigger="PropertyChanged">
<Binding.ValidationRules>
<validationrules:LanguageCodeValidationRule/>
</Binding.ValidationRules>
</Binding>
</TextBox.Text>
</TextBox>
</StackPanel>
</TreeViewItem.Header>
</TreeViewItem>
class LanguageCodeValidationRule : ValidationRule
{
public override ValidationResult Validate(object value, CultureInfo cultureInfo)
{
string rx = "([a-zA-Z]{2}|[iI]-[a-zA-Z]+|[xX]-[a-zA-Z]{1,8})(-[a-zA-Z]{1,8})*";
if (!Regex.IsMatch(value.ToString(), rx))
{
return new ValidationResult(false, "Invalid Language Codee.");
}
return ValidationResult.ValidResult;
}
}

Validation behavior is not doing as expected

Situation :
When you click on new product a popup screen show ups :
As you can see the button "Opslagen" is disabled, that is good because "Productnaam" is mandatory.
Now If I start typing the button "Opslagen" is enabled, so far thats ok.
But when I remove tekst a message in red shows that this field is mandatory, but the button won't disable anymore :
When I type something again the red text dissapears again. But the button behavior is not working as expected.
The XAML :
<TextBox Width="200"
Height="30"
HorizontalAlignment="Left"
VerticalContentAlignment="Center">
<TextBox.Text>
<Binding Path="ProductName" Mode="TwoWay" UpdateSourceTrigger="PropertyChanged">
<Binding.ValidationRules>
<validators:EmptyValidationRule ValidatesOnTargetUpdated="True" ValidationStep="RawProposedValue" />
</Binding.ValidationRules>
</Binding>
</TextBox.Text>
<Validation.ErrorTemplate>
<ControlTemplate>
<StackPanel>
<!-- Placeholder for the TextBox itself -->
<AdornedElementPlaceholder x:Name="textBox"/>
<TextBlock Text="{Binding [0].ErrorContent}" Foreground="Red"/>
</StackPanel>
</ControlTemplate>
</Validation.ErrorTemplate>
</TextBox>
The EmptyValidationRule class :
public override ValidationResult Validate(object value, CultureInfo cultureInfo)
{
if (value == null)
{
return new ValidationResult(true, null);
}
if (!string.IsNullOrEmpty(value.ToString()) && !string.IsNullOrWhiteSpace(value.ToString()))
{
return new ValidationResult(true, null);
}
return new ValidationResult(false, "Dit veld is verplicht.");
}
And finally the IsSaveButtonDisabled property in the ViewModel :
public bool IsSaveButtonEnabled
{
get
{
if (!string.IsNullOrEmpty(_productName) && !string.IsNullOrWhiteSpace(_productName))
{
return true;
}
else
{
return false;
}
}
}
I really have no idea. It must be the combination of the ValidationRule and the check if the property ProductName is empty.
Edit, button code :
<Button Content="Opslagen"
IsEnabled="{Binding IsSaveButtonEnabled}"
Background="Bisque"
Width="120"
Height="30"
Command="{Binding SaveCommand}" />
ProductName property :
private string _productName;
public string ProductName
{
get => _productName;
set
{
_productName = value;
RaisePropertyChanged(nameof(ProductName));
RaisePropertyChanged(nameof(IsSaveButtonEnabled));
}
}
The Save command is like this :
SaveCommand = new RelayCommand(SaveProduct);
And SaveProduct is just a method that saves the product. This stuff is working.

Set the ValidationStep property to UpdatedValue to run the ValidationRule after the source property has been set:
<validators:EmptyValidationRule ValidatesOnTargetUpdated="True"
ValidationStep="UpdatedValue" />
Then the PropertyChanged event for the IsSaveButtonEnabled property should be invoked and the Button should be disabled even if the validation rule fails.

How to properly bind multiple ViewModels when using DataTemplateSelector [duplicate]

This question already has answers here:
How to use DataTemplateSelector with ContentControl to display different controls based on the view-model?
(2 answers)
Closed 4 years ago.
I'm trying to write a simple dialog that would accept a value in a SpinEdit or a text in a TextEdit. I'm using multiple VMs and I made a selector that should view a proper control based on the logic in the c++/cli file.
XAML:
xmlns:local="clr-namespace:asd"
Title="{Binding Path=Title, Mode=OneTime}"
<dx:DXWindow.Resources>
<DataTemplate x:Key="TInputValueVM" DataType="{x:Type local:TInputValueVM}">
<dxe:SpinEdit Height="23" Width="200"
Text="{Binding Value, Mode=TwoWay}"
Mask="{Binding Mask, Mode=OneWay}"
MaxLength="{Binding Path=InputLength}" />
</DataTemplate>
<DataTemplate x:Key="TInputTextVM" DataType="{x:Type local:TInputTextVM}">
<dxe:TextEdit Height="23" Width="200"
Text="{Binding Value, Mode=TwoWay}"
MaskType="RegEx" Mask="{Binding Mask, Mode=OneWay}"
MaxLength="{Binding Path=InputLength}"/>
</DataTemplate>
<local:PropertyDataTemplateSelector x:Key="templateSelector"
DataTemplate_Value="{StaticResource TInputValueVM}"
DataTemplate_Text="{StaticResource TInputTextVM}" />
</dx:DXWindow.Resources>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<StackPanel Grid.Row="0" >
<Label x:Uid="Label" MinHeight="24" MinWidth="60" Content="Value" />
<ContentControl Content="{Binding Path=Whoami}" ContentTemplateSelector="{StaticResource templateSelector}" />
</StackPanel>
<StackPanel Grid.Row="1" x:Uid="OKCancel_Buttons" Orientation="Horizontal" HorizontalAlignment="Right" VerticalAlignment="Bottom">
<Button Height="23" x:Name="OK_Button" Click="OK_Click" Content="OK" IsDefault="True" HorizontalAlignment="Right" MinWidth="95" />
<Button Height="23" x:Name="Cancel_Button" Click="Cancel_Click" Content="Cancel" HorizontalAlignment="Right" MinWidth="95" />
</StackPanel>
</Grid>
In c# I have a base VM and two VMS that extend it, one for values and one for text. The rest of the properties stay the same.
C#
namespace asd
{
public class TInputBaseVM : ViewModelBase
{
private string m_sTitle;
private string m_sMask;
private int m_nInputLenght;
private string m_sWhoami;
public TInputBaseVM(string A_sTitle, string A_sMask, int A_nInputLength)
{
m_sTitle = A_sTitle;
m_sMask = A_sMask;
m_nInputLenght = A_nInputLength;
}
protected string Title
{
get { return m_sTitle; }
set { SetProperty(ref m_sTitle, value, () => Title); }
}
protected string Mask
{
get { return m_sMask; }
set { SetProperty(ref m_sMask, value, () => Mask); }
}
protected int InputLength
{
get { return m_nInputLenght; }
set { SetProperty(ref m_nInputLenght, value, () => InputLength); }
}
protected string Whoami
{
get { return m_sWhoami; }
set { SetProperty(ref m_sWhoami, value, () => Whoami); }
}
}
public class TInputValueVM : TInputBaseVM
{
public TInputValueVM(string A_sTitle, string A_sMask, int A_nInputLength, double A_nValue) : base(A_sTitle, A_sMask, A_nInputLength)
{
Value = A_nValue;
Whoami = "Value";
}
private double m_nValue;
public double Value
{
get { return m_nValue; }
set { SetProperty(ref m_nValue, value, () => Value); }
}
}
public class TInputTextVM : TInputBaseVM
{
public TInputTextVM(string A_sTitle, string A_sMask, int A_nInputLength, string A_sValue) : base(A_sTitle, A_sMask, A_nInputLength)
{
Value = A_sValue;
Whoami = "Text";
}
private string m_sValue;
public string Value
{
get { return m_sValue; }
set { SetProperty(ref m_sValue, value, () => Value); }
}
}
public class PropertyDataTemplateSelector : DataTemplateSelector
{
public DataTemplate DataTemplate_Value { get; set; }
public DataTemplate DataTemplate_Text { get; set; }
public override DataTemplate SelectTemplate(object item, DependencyObject container)
{
var selector = item as string;
if(selector == "Value")
return DataTemplate_Value;
return DataTemplate_Text;
}
}
}
In c++/cli I create an object of a proper VM and I'd like the WPF to automatically update the view to either spinedit or textedit, however I'm not sure how to properly bind the properties from the C#. If I explicitly type 'Value' in the Content property of the ContentControl then it displays the spinEdit but I don't know how to bind it so it automatically takes the correct property.
EDIT: I'm adding c++/cli code to show how I choose different VMs
C++/cli:
bool TSignalNumberPositionDialogCLR::StartDialog(TSignalNumberPositionSupport& A_Attributes, HWND A_hwndParent, LPTSTR String)
{
try
{
TInputValueVM ^oExchange_Value;
TInputTextVM ^oExchange_Text;
int inputFormat = A_Attributes.GetInputFormat();
if(inputFormat)
oExchange_Text = gcnew TInputTextVM(gcnew System::String(A_Attributes.GetTitle()), gcnew System::String(A_Attributes.GetMask()),
A_Attributes.GetInputLength(), gcnew System::String(A_Attributes.GetInitialText()));
else
oExchange_Value = gcnew TInputValueVM(gcnew System::String(A_Attributes.GetTitle()), gcnew System::String(A_Attributes.GetMask()),
A_Attributes.GetInputLength(), A_Attributes.GetInitialValue());
Dialogs::TSignalNumberPositionDialog^ dialog = gcnew Dialogs::TSignalNumberPositionDialog();
if(inputFormat)
dialog->DataContext = oExchange_Text;
else
dialog->DataContext = oExchange_Value;
dialog->ShowDialog();
if(dialog->DialogResult)
{
CString nValue;
if(inputFormat)
nValue = oExchange_Text->Value;
else
nValue = ((Decimal)oExchange_Value->Value).ToString("F2", CultureInfo::InvariantCulture);
A_Attributes.UpdateValue(nValue, String, A_Attributes.GetInputLength());
return true;
}
return false;
}
catch(Exception^ e)
{
e;
}
}
based on the 'inputFormat' variable I want to display different controls in the dialog.
EDIT: Based on #Clemens comments I got rid of the selector sectionand the x:Key property in the DataTemplates. I changed the content opf the Content property to Content="{Binding}" and it somehow works. The moment I create a VM it selects the correct one.

Based on your comment. Let me improve my answer. As you are facing issue in VM selection. so plesae concentrate how I assigned VM to datatemplate. Although it is done in very basic way, you can handle it if you you are using MVVM packages.
I have created 2 data template and 2 vms and each vm is bound to datatemplate. To verify, I have a combobox, which will select datatemplate based on selected value.
Here is Sample VM
public class VM : System.ComponentModel.INotifyPropertyChanged
{
private string title;
private SolidColorBrush background;
public string Title { get => title; set { title = value; RaisePropertyChanged(); } }
public SolidColorBrush Background { get => background; set { background = value; RaisePropertyChanged(); } }
public event PropertyChangedEventHandler PropertyChanged;
private void RaisePropertyChanged([System.Runtime.CompilerServices.CallerMemberName] string name = "")
{
PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(name));
}
}
public class VM1: VM
{
public VM1()
{
Title = "This is VM1";
Background = Brushes.Yellow;
}
}
public class VM2: VM
{
public VM2()
{
Title = "This is VM2";
Background = Brushes.Orange;
}
}
Now check for resources
<local:VM1 x:Key="VM1"/>
<local:VM2 x:Key="VM2"/>
<DataTemplate x:Key="DT1">
<Grid DataContext="{StaticResource VM1}">
<TextBlock Text="{Binding Title}" Background="{Binding Background}"/>
</Grid>
</DataTemplate>
<DataTemplate x:Key="DT2">
<Grid DataContext="{StaticResource VM2}">
<TextBlock Text="{Binding Title}" Background="{Binding Background}"/>
</Grid>
</DataTemplate>
<Style TargetType="ContentControl" x:Key="contentStyle">
<Style.Triggers>
<DataTrigger Binding="{Binding ElementName=cmbo, Path=SelectedValue}" Value="Template1">
<Setter Property="ContentTemplate" Value="{StaticResource DT1}" />
</DataTrigger>
<DataTrigger Binding="{Binding ElementName=cmbo, Path=SelectedValue}" Value="Template2">
<Setter Property="ContentTemplate" Value="{StaticResource DT2}" />
</DataTrigger>
</Style.Triggers>
</Style>
and finally I have combobox and content control just to verify
<ComboBox Name="cmbo"/>
<ContentControl Style="{StaticResource contentStyle}"/>
where cmbo.ItemsSource = new List { "Template1", "Template2" };
Hope you got the point

Required field Validation in WPF text box

I need a simple way to validate of text boxes (Required Field). It should check all mandatory field existence , when user press button.
I have tried this code :
<Window.Resources>
<ControlTemplate x:Key="validationTemplate">
<DockPanel>
<TextBlock Foreground="Red" FontSize="25" Text="*" DockPanel.Dock="Right" />
<AdornedElementPlaceholder/>
</DockPanel>
</ControlTemplate>
</Window.Resources>
<Grid>
<Button Content="Button" HorizontalAlignment="Left" Height="26" Margin="62,213,0,0" VerticalAlignment="Top" Width="121" Click="Button_Click_1"/>
<TextBox x:Name="txtEmail1" Text="" Height="61" Margin="116,10,194,0" Validation.ErrorTemplate="{StaticResource validationTemplate}"/>
</Grid>
please anyone suggest a way to make validation in Text boxes in WPF.
Thank you

You should bind the Text property of the TextBox to a property of a view model and implement the IDataErrorInfo interface in the view model class.
Please refer to the following sample code.
Code:
public partial class Window3 : Window
{
Window3ViewModel viewModel = new Window3ViewModel();
public Window3()
{
InitializeComponent();
DataContext = viewModel;
}
private void Button_Click_1(object sender, RoutedEventArgs e)
{
viewModel.Validate();
}
}
public class Window3ViewModel : INotifyDataErrorInfo
{
private readonly Dictionary<string, string> _validationErrors = new Dictionary<string, string>();
public void Validate()
{
bool isValid = !string.IsNullOrEmpty(_text);
bool contains = _validationErrors.ContainsKey(nameof(Text));
if (!isValid && !contains)
_validationErrors.Add(nameof(Text), "Mandatory field!");
else if (isValid && contains)
_validationErrors.Remove(nameof(Text));
if (ErrorsChanged != null)
ErrorsChanged(this, new DataErrorsChangedEventArgs(nameof(Text)));
}
public bool HasErrors => _validationErrors.Count > 0;
public event EventHandler<DataErrorsChangedEventArgs> ErrorsChanged;
public IEnumerable GetErrors(string propertyName)
{
string message;
if (_validationErrors.TryGetValue(propertyName, out message))
return new List<string> { message };
return null;
}
private string _text;
public string Text
{
get { return _text; }
set
{
_text = value;
}
}
}
XAML:
<Window x:Class="WpfApp2.Window3"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:WpfApp2"
mc:Ignorable="d"
Title="Window3" Height="300" Width="300">
<Window.Resources>
<ControlTemplate x:Key="validationTemplate">
<DockPanel>
<TextBlock Foreground="Red" FontSize="25" Text="*" DockPanel.Dock="Right" />
<AdornedElementPlaceholder/>
</DockPanel>
</ControlTemplate>
</Window.Resources>
<Grid>
<Button Content="Button" HorizontalAlignment="Left" Height="26" Margin="62,213,0,0" VerticalAlignment="Top" Width="121" Click="Button_Click_1"/>
<TextBox x:Name="txtEmail1" Text="{Binding Text}" Height="61" Margin="116,10,194,0" Validation.ErrorTemplate="{StaticResource validationTemplate}"/>
</Grid>
</Window>
And please refer to the following blog post for more information about how data validation in WPF works.
Data validation in WPF: https://blog.magnusmontin.net/2013/08/26/data-validation-in-wpf/

I will show you how you can validate data using IDataErrorInfo. This interface has only two members which need to be implemented:
public string Error { get; } - gets an error message indicating what is wrong with this object
public string this[string columnName] { get; } - get the error message for the property with the given name.
Once you implement the IDataErrorInfo you need to set the ValidatesOnDataErrors to true in the element that you want to validate. To simplify the code example, I implemented IDataErrorInfo in the MainViewModel as you can see below:
public class MainViewModel : BindableBase, IDataErrorInfo
{
private string _firstName;
private string _lastName;
public string FirstName
{
get { return _firstName; }
set { _firstName = value; RaisePropertyChanged(); }
}
public string LastName
{
get { return _lastName; }
set { _lastName = value; RaisePropertyChanged(); }
}
public string this[string columnName]
{
get
{
string error = string.Empty;
switch (columnName)
{
case nameof(FirstName):
if (string.IsNullOrWhiteSpace(FirstName))
error = "First name cannot be empty.";
if (FirstName?.Length > 50)
error = "The name must be less than 50 characters.";
break;
case nameof(LastName):
if (string.IsNullOrWhiteSpace(LastName))
error = "Last name cannot be empty.";
break;
}
return error;
}
}
public string Error => string.Empty;
}
and in the TextBox element, I set ValidatesOnDataErrors to true:
<TextBox Text="{Binding FirstName, Mode=TwoWay,
UpdateSourceTrigger=PropertyChanged, ValidatesOnDataErrors=True}" />

XAML TwoWay binding to Nullable types

Environment: WinRt / XAML / C#
I am trying to do a two way binding for a float type property. However if that is a nullable type (float? or Nullable) the binding doesnt work.
I have event applied converters for this, and it still doesnt show any sign of bindability.
C#: ViewModel
public class MyViewModel : INotifyPropertyChanged
{
private float _quantity1;
public float Quantity1
{
get
{
return this._quantity1;
}
set
{
this._quantity1 = value;
RaisePropertyChanged("Quantity1");
}
}
private float? _quantity2;
public float? Quantity2
{
get
{
return this._quantity2;
}
set
{
this._quantity2 = value;
RaisePropertyChanged("Quantity2");
}
}
private Nullable<float> _quantity3;
public Nullable<float> Quantity3
{
get
{
return this._quantity3;
}
set
{
this._quantity3 = value;
RaisePropertyChanged("Quantity3");
}
}
public MyViewModel()
{
this.Quantity1 = 100.01F;
this.Quantity2 = 200.02F;
this.Quantity3 = 300.03F;
}
public event PropertyChangedEventHandler PropertyChanged;
protected void RaisePropertyChanged(string propertyName)
{
System.ComponentModel.PropertyChangedEventHandler propertyChanged = this.PropertyChanged;
if ((propertyChanged != null))
{
propertyChanged(this, new System.ComponentModel.PropertyChangedEventArgs(propertyName));
}
}
}
C# : Converter:
public sealed class NullableFloatConverter : IValueConverter
{
public object Convert(object value, Type targetType, object parameter, string language)
{
if (value == null)
return 0F;
else
return value;
}
public object ConvertBack(object value, Type targetType, object parameter, string language)
{
if (value != null)
return value;
else
return 0;
}
}
XAML:
<Page
x:Class="Test_Binding.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:Test_Binding"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<Page.Resources>
<local:NullableFloatConverter x:Key="nullConverter" />
</Page.Resources>
<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
<StackPanel>
<StackPanel Orientation="Horizontal">
<TextBlock Text="Quantity1: " Width="150" />
<TextBox Text="{Binding Quantity1, Mode=TwoWay}" />
<TextBlock Text="{Binding Quantity1}" />
</StackPanel>
<!-- the second text block doesnt get an updated value -->
<StackPanel Orientation="Horizontal">
<TextBlock Text="Quantity2: " Width="150"/>
<TextBox Text="{Binding Quantity2, Mode=TwoWay, Converter={StaticResource nullConverter}}" />
<TextBlock Text="{Binding Quantity2, Converter={StaticResource nullConverter}}" />
</StackPanel>
<!-- the second text block doesnt get an updated value -->
<StackPanel Orientation="Horizontal">
<TextBlock Text="Quantity2 (No Converter): " Width="150"/>
<TextBox Text="{Binding Quantity2, Mode=TwoWay}" />
<TextBlock Text="{Binding Quantity2}" />
</StackPanel>
<!-- the second text block doesnt get an updated value -->
<StackPanel Orientation="Horizontal">
<TextBlock Text="Quantity3: " Width="150"/>
<TextBox Text="{Binding Quantity3, Mode=TwoWay}" />
<TextBlock Text="{Binding Quantity3}" />
</StackPanel>
</StackPanel>
</Grid>
Only the First text block gets updated (i.e. for Quantity1). I cant get the others (Quantity2 & Quantity3) to get updated.
Any suggestions ?

I think the convertBack method wasnt upto scratch, which i got from stackoverflow.com/questions/15406336/databind-a-nullable-type-in-xaml-windows-8-store-app
public object ConvertBack(object value, Type targetType, object parameter, string language)
{
string s = value as string;
float result;
if (!string.IsNullOrWhiteSpace(s) && float.TryParse(s, out result))
{
return result;
}
return null;
}