Skip to content

WPF. Quick start

Vsevolod Pilipenko edited this page Jul 19, 2022 · 6 revisions

Step 1. Install package

Install-Package ReactiveValidation.Wpf

Step 2. Inherit your validatable class from ValidatableObject

using ReactiveValidation;

public class YourViewModel : ValidatableObject
{ ... }

You also can use your base class, but you should inherit it from IValidatableObject. You can read about it here.

Step 3. Specify validation rules and build validator

Create ValidationBuilder<> to begin creating validation rules. After all rules are specified, call Build(this) and set result to Validator property.

public class YourViewModel : ValidatableObject
{
    public BaseSampleViewModel()
    {
        Validator = GetValidator();
    }

    private IObjectValidator GetValidator()
    {
        var builder = new ValidationBuilder<YourViewModel>();

        builder.RuleFor(vm => vm.Name)
            .NotEmpty()
            .MaxLength(16)
            .NotEqual("foo");

        builder.RuleFor(vm => vm.Surname)
            .Equal("foo");

        builder.RuleFor(vm => vm.PhoneNumber)
            .NotEmpty()
            .Matches(@"^\d{9,12}$");
            
        return builder.Build(this);
    }

    // Properties with realization INotifyPropertyChanged goes here.
}

If you want to specify rules in separate class, read about separate validation classes and validator factory.

Step 4. Configure your View

Bind your View and ViewModel:

public partial class YourView : UserControl
{
    public YourView()
    {
        DataContext = new YourViewModel();
        InitializeComponent();
    }
}

At YourView.xaml surraund all content with AdornerDecorator and bind your properties inside it:

<AdornerDecorator>
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
        </Grid.RowDefinitions>

        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition />
            <ColumnDefinition Width="Auto" />
        </Grid.ColumnDefinitions>

        <TextBlock Grid.Row="0" Grid.Column="0" Margin="3" Text="Name: " />
        <TextBox Grid.Row="0" Grid.Column="1"
                 Text="{Binding Name, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" />
        <TextBlock Grid.Row="0" Grid.Column="2" Margin="3" MaxWidth="150" TextWrapping="Wrap"
                   Text="Name not empty, not equal 'foo' and max length is 16" />


        <TextBlock Grid.Row="1" Grid.Column="0" Margin="3" Text="Surname: " />
        <TextBox Grid.Row="1" Grid.Column="1"
                 Text="{Binding Surname, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" />
        <TextBlock Grid.Row="1" Grid.Column="2" Margin="3" MaxWidth="150" TextWrapping="Wrap"
                   Text="Surname should be equal 'foo'" />


        <TextBlock Grid.Row="2" Grid.Column="0" Margin="3" Text="Phone number: " />
        <TextBox Grid.Row="2" Grid.Column="1"
                 Text="{Binding PhoneNumber, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" />
        <TextBlock Grid.Row="2" Grid.Column="2" Margin="3" MaxWidth="150" TextWrapping="Wrap"
                   Text="Phone number required and allow from 9 to 12 digits" />
    </Grid>
</AdornerDecorator>

Result

All properties are invalid:

image

All properties are valid:

image

If you use the default WPF theme, you can see that ErrorTemplate doesn't display messages. You can use another template from this library (describing here):

image

Samples

You also can check project with samples of using ReactiveValidation. Project located here.