Home > WPF > CodeFluent Entities and WPF: Validation

CodeFluent Entities and WPF: Validation


As all entity classes generated by CodeFluent Entities implement the IDataErrorInfo interface, an interface supported natively across all .NET applications for validation purposes (ASP.NET, WPF, Windows Forms, Silverlight), setting up validation in your user interface can be done without a single line of code.

If you remember our ASP.NET Web Forms Validation post, we declared a validation rule on each of our two properties (FirstName, LastName) stipulating that names including a ‘_’ should be considered invalid. In our previous post, we created a Master/Detail screen listing all our contacts, and upon selection, filling an associated form. In this post, we’ll extend this last example by adding a UI representation indicating the user the typed-in string is invalid. Here’s the code:

<StackPanel Margin="10">
    <TextBlock FontWeight="bold" Margin="5">Contacts:</TextBlock>
    <ListBox Name="_contactsListBox" />
    
    <TextBlock FontWeight="bold" Margin="5,10,5,5">Details:</TextBlock>
    <StackPanel DataContext="{Binding ElementName=_contactsListBox, Path=SelectedItem}" Margin="5">
        <TextBlock>FirstName:</TextBlock>
        <TextBox Text="{Binding Path=FirstName, UpdateSourceTrigger=PropertyChanged, 
            ValidatesOnDataErrors=True, NotifyOnValidationError=true}" />

        <TextBlock>LastName:</TextBlock>
        <TextBox Text="{Binding Path=LastName, UpdateSourceTrigger=PropertyChanged, 
            ValidatesOnDataErrors=True, NotifyOnValidationError=true}" />
    </StackPanel>
</StackPanel>

It’s exactly the same as yesterday’s code, except that we set the ValidatesOnDataErrors and NotifyOnValidationError options on our binding, to indicate to display the error template if an error is raised.

Here’s the result:

image

Already pretty cool, but not great, as the user doesn’t know why the textbox is turning red.

That’s where WPF comes in action: you can define a custom validation error template. In our case we’ll replace the default template by ours, which will circle the textbox in red, display a red ‘*’ and the error message in the tooltip.

Here’s the XAML:

<Window.Resources>
    <Style TargetType="{x:Type TextBox}">
        <Setter Property="Validation.ErrorTemplate">
            <Setter.Value>
                <ControlTemplate>
                    <DockPanel LastChildFill="True">
                        <TextBlock DockPanel.Dock="Right" Foreground="Red" FontSize="14pt" Margin="-15,0,0,0" FontWeight="Bold">*
                        </TextBlock>
                        <Border BorderBrush="Red" BorderThickness="1">
                            <AdornedElementPlaceholder Name="controlWithError"/>
                        </Border>
                    </DockPanel>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
        <Style.Triggers>
            <Trigger Property="Validation.HasError" Value="true">
                <Setter Property="ToolTip" Value="{Binding RelativeSource={x:Static RelativeSource.Self}, Path=(Validation.Errors)[0].ErrorContent}"/>
            </Trigger>
        </Style.Triggers>
    </Style>
</Window.Resources>

And here’s the result:

image

Tadaaa!

  1. No comments yet.
  1. December 6, 2011 at 1:48 pm

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s